CSS Design Patterns Chapter 3 – 5
I covered almost three chapters today. Topics discussed were selectors and the CSS box model. As I don’t use a lot of the fancy selectors because it’s not supported by IE6, I skimmed over it. The box model material is pretty useful though; I really just have a general idea of how it works so it’s good to read about it in a more detailed manner. Now I won’t be caught unaware when I try a combination of attributes to style a box. Conversely, if I wished to style a box in a certain way, I now have the knowledge of how to do it.
- Block items follow a vertical flow.
- Inline items follow a horizontal flow and wrap to a new line when it doesn’t fit completely.
- You can’t set the width, height, and overflow of inline elements. It depends on the font.
- Tables are special because their width refers to the outside of the border, unlike everything else which specifies the inner box.
- Tables don’t have padding, but cells do. Cells don’t have margins, but tables do.
- Absolute items don’t affect the flow but are rendered in a different layer.
- Floated items affect the flow of other boxes.
- The float attribute specifies the horizontal position, but the vertical position is determined by its current inline position.
- Certain items can be sized (set size), shrinkwrapped (fit to content), or stretched (fit to parent)
- You cannot horizontally shrinkwrap a block box, it will always be stretched by default (or sized if set)
The box model, I believe, is something that every aspiring CSS guru needs to master.
What I’ve Learned So Far
With Apress’s Pro CSS and HTML Design Patterns:
- A design pattern consists of four elements: pattern name, problem, solution, and tradeoffs.
- Cascade order is determined by selector priority, then number of selectors ordered by priority, then location groups, then location level, and finally listing order.
- To simplify the cascade, minimise the number of stylesheets linked or imported, and sort the selectors by importance.
- Use baseline stylesheets to reset styles created by the browser.
- A good HTML structure is important as it provides the basis for the CSS selectors. HTML or XHTML can be validated to ensure that the document is valid.
- The safest MIME type to use for XHTML is
text/html. <!DOCTYPE>must be the first element in a document; otherwise Internet Explorer 6 will render in Quirks mode, which does not follow CSS standards.- Use conditional stylesheets instead of hacks to target Internet Explorer 6/7.
- Block elements should not be siblings with inline elements. Do not put content in between blocks; rather, content must be inside a terminal block at all times.
Decided to forgo CSS: The Definitive Guide as I found it to be a beginner’s book. The other book I’m reading in conjunction with Design Patterns is CSS Mastery: Advanced Web Standards Solutions.
I will be writing my notes in this blog so that I can keep track whether I’m learning anything!!
CSS
Work has been consistently pushing me towards front-end development. I like to think of myself as a back-end developer – give me classes, methods, and translating business rules to working logic anytime.
So being forced to do HTML, CSS, and slicing seems kind of, for a lack of a better word, insulting.
But hey, it doesn’t hurt to learn more about the ins and outs of styling – it could be pretty useful in the future. (And it will save me from internal groaning whenever I receive a task that involves slicing.)
Actually, I do have a bit of intermediate CSS knowledge, more than the average developer. I sort of straddle the divide between front-end and back-end already. But to be honest, I still don’t have the confidence to say that I am a truly a master of the front-end, because most of my CSS skills come from trial and error. I’d like to get to the point where I see a design, and immediately think of the best, correct way to build the template, without having to go back-and-forth with solutions, and tearing my hair off once cross-browser issues crop up.
Oh, and it still takes me longer to slice anything, than my workmate (who works mainly on front-end.) So once I get up to her speed, I’ll be happy. :)
Having said all that, I’m starting out by (virtually) picking up a (virtual) copy of CSS: The Definitive Guide by Eric Meyer. With hope, I’ll transform my incomplete CSS knowledge to a more concrete skill.
Safari Books Online
I got myself a 10-day free trial of Safari Bookshelf because of two things:
- I wanted to read “Fundamentals of Game Design” by Ernest Adams
- I didn’t have $100+ to fork out to buy the book
If I continue with my subscription it’s AUD 25 a month. I still wonder if it’s worth it though. I’ve long been complaining about computer books – they get so outdated quickly, and they are basically paperweights after their use-by date. With Safari Books Online I wouldn’t have this problem. My only concerns are:
- I love books – I like the feel of reading a book
- Reading online has its distractions… Not sure if I can absorb the material as easily as reading from a physical book.
Still, SBO’s advantages weigh out the disadvantages… we’ll hear the final word before Valentines’ Day (the end of my free trial.)
