John Topley’s Weblog

On Friday I attended a Professional CSS XHTML Techniques workshop given by Eric Meyer and organised by Carson Workshops. The event was superb; it’s clear that Eric has probably forgotten more about CSS than most of us will ever know, yet he was able to impart some of his vast knowledge and experience in a digestible and accessible manner. He was a pleasure to watch and listen to and a nice guy who answered everyone’s questions thoughtfully and patiently.

I learned lots of things about CSS that I didn’t know before or only vaguely understood, including:

• The values of attributes within XHTML aren’t case-sensitive, apart from class and id attributes.
• Everything looks like an element to CSS. It’s possible to write CSS that displays and styles elements that are normally supressed by browsers. For example, the head and title tags.
• The content: declaration can be used to generate content. The print stylesheet at A List Apart uses this to good effect to display link URLs. This doesn’t work in IE though (including IE7).
• The “Cascading” in Cascading Style Sheets refers to specificity processing, not to the inheritence of declared values across elements.
• Inherited values have a null specificity.
• The universal selector (*) has a specificity of 0 0 0 0. It’s equivalent to listing every XHTML selector explicitly in the stylesheet.
• The universal selector is handy-dandy for stripping out browser defaults.
• If selectors have equal specificity then the tiebreaker is the order listed in the stylesheet—last one wins.
• !important trumps specificity, even for inline style declarations. IE7 supports it properly, whereas IE6 supports it but has a buggy implementation.
• !important isn’t inherited.
• !important can be used to diagnose specificity conflicts by temporarily boosting the specificity of a selector.
• Link selectors have to be listed in a:link, a:visited, a:hover and a:active (LoVe HAte) order because all four selectors have the same specificity, so the selector order in the stylesheet comes into play.
• Listing selectors in alphabetical order within a stylesheet is generally a bad idea because it can introduce specificity conflicts.
• IE7 should be considered roughly equivalent to Firefox in terms of CSS rendering behaviour.
• IE6 only sees the last class or pseudo-class when multiple classes are assigned to an element.
• Absolutely positioned elements cannot affect other elements because they’re outside of the normal flow.
• The order in which elements appear in the source is significant for floated elements.
• Clearing an element resets the top margin for the cleared element.
• Elements that are in the normal flow don’t establish position context for other elements, which is why container elements need to have position: relative in their declaration block.
• Line height can be specified in the shorthand font declaration syntax e.g. font: 1em/1.2em Verdana, Arial, sans-serif; specifies a font with size 1em and line-height 1.2 em.