John Topley’s Weblog

Workshop Review: Professional CSS XHTML Techniques

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.

Comments

There are 2 comments on this post. Comments are closed.

  • avatar Eric Meyer
    15 May 2006 at 02:50

    John, thanks for such a wonderful and kind review of the day! I had a good time as well, the best part for me being all the great questions. I just want to correct two things that I must have mis-stated, or else was unclear about:

    1. !important is supported in IE6, albeit with a few obscure bugs, and I think in IE5.5 as well. I don't remember whether it was in IE5.0, but based on the show of hands in the room, nobody seems to much care about it any more.

    2. IE7 should be considered *roughly* equivalent to Firefox. Doubtless there will be differences between the two, but how much difference has yet to be determined.

    Thanks again, and I'm really glad you enjoyed the day.

  • avatar John Topley
    15 May 2006 at 06:54

    Hi Eric, thanks for dropping by! :-)

    I've updated the entry in line with your corrections. I probably got things slightly wrong because I was handwriting my notes using pen and paper and struggled to keep up with you at some points! I decided to go old-school with my note-taking because there are too many distractions with a laptop...

Eric has probably forgotten more about CSS than most of us will ever know.


Archives

  • Jan
  • Feb
  • Mar
  • Apr
  • May
  • Jun
  • Jul
  • Aug
  • Sep
  • Oct
  • Nov
  • Dec
  • 2019
  • 2018
  • 2017
  • 2016
  • 2015
  • 2014

More Archives


Sign In