CSS Tutorial: feedback so far
My CSS tutorial series has been getting some fantastic feedback, both in this blog’s comments system and elsewhere. This entry will summarise the most useful feedback, acting as a kind of errata to the previous entries. Thanks to everyone who commented, there are too many to credit individually but you can see most of the points in their original format by browsing the comments attached to each entry.
- In one of the examples I specified a
colorproperty without a
background-colorproperty. This causes a warning when run through the CSS validator, because it may lead to unreadable text if the user has configured their browser’s user stylesheet in such a way that your applied colour becomes unreadable.
- I failed to cover the Universal Selector. This is an
*in place of the element selector, and means “any element”. In fact,
#idnameare actually shorthands for
- A couple of terminology points: “internal stylesheets” are better known as “embedded stylesheets” and the “descendant selector” is really called the “descendant combinator”.
div#main a:linkis preferable to
div#main afor selecting all links inside a specific div, as it will match only hyperlinks while
div#main awould match
<a name="anchor">points as well.
This entry drew the greatest criticism for its extensive use of the Fahrner Image Replacement technique, which can cause accessibility problems and also has some browser compatibility problems. In particular, the purple permalink icons were not showing up in IE5/Mac, probably because the technique was being applied to an inline rather than a block-level element. I have prepared two alternative examples of the Scripting.com remake, one using a permalink image and one that uses CSS to style the ’#’ sign to appear small and purple: Scripting.com with inline image permalinks, Scripting.com with styled purple hashes.
- Owen Brigg’s Sane CSS text sizes was suggested as a useful text sizing tutorial.
- Vincent Flanders commented that the teaching style of the course sacrificed instant availability of code for extensive explanations, when most people would probably just like to grab the code and run. The reason I’m explaining everything as I go along is that the hey to using CSS in a practical manner is to understand its limitations and the subtle browser bugs demonstrated by some modern browsers. Just providing code may teach people basic CSS faster, but the moment they try their site in IE5 they’ll be stumped by the weird side effects. By explaining each workaround as and when I use it I hope to make the unpleasant surprises a bit less unpleasant.
- Leonard Lin (broken permalink, try the front page) commented that this article essentially proved jwz right in that “CSS is too fuckin’ hard”. He’s got a fair point, but I believe that for more people to successfully adopt CSS they need to be fully exposed to it, warts and all. The jwz example shows off CSS at its worst, but despite the hacks the result is still smaller, more structural and more maintainable than the original. Designs without centered blocks or using a font other than verdana would have avoided the hacks entirely.
Most of the comments here involved alternative ways of applying the selectors, all of which are worth reading about but none of which are practical due to poor browser support. I recommend reading them anyway, as they give a good indication of how much cleaner CSS will be once Microsoft get their act together.