CSS Oddity

Lesson: Thou shalt not use CSS to obscure unpredictable text for ye users.

Skin deep advantage of CSS is that it can be used to make web pages beautiful and possibly perform some tricks without other tools like Javascript. However, when one doesn't know what the content of the page will be, CSS might actually end up obscuring that part of the page. An example is the occurence of heading tags h1, h2, etc. in people's blog posts on Planet Debian. For the planet, date is a level 1 heading, each person's name is a level 2 heading and title for each post is a level 3 heading. When a post contains either of the h1 or h2 level headings, it looks like the image shown below. Notice that the circled heading (h1) is hardly readable while the post's matter is!

This happens because tje CSS for the planet makes the h1 and h2 to have a letter-spacing of -2 pixels due to h1 and div.channel h2 selector definitions. The problem starts when a person's post contains either a level 1 or level 2 heading. The div.content h* selector (where * = 1,2,...6) makes all of them to have a font-size of 100% and the reduced letter spacing in addition to the default bold font-weight of headings make them almost unreadable (Firefox, IE6, Konqueror). The reason behind this is that the letter-spacing: -2px definition is being applied to all h1 headings and all descendant h2 headings of div.channel selector. If we remove the letter-spacing in the level 2 heading in the post(shown above), it should look as shown below.

In such cases where the content is not predictable, CSS rules should take into account both the static and variables parts separately. A style sheet which took care of the static part using child selectors and separate selectors for content styling would have suited Planet Debian more. Using the suggested separation method, a child selector e.g. div.channel>h2 would not make the div.content h2 to be with reduced letter spacing and thus leaving headings in posts to be more easily legible as show by the second image above.

So although using CSS gives many advantages, using it without giving a real consideration to the actual content of the page, however unpredictable it may be, one can end up with difficult to read content due to misused CSS rules.

This post will help me with a visual example of the different between descendant and child selectors. I hope it serves useful purpose to others too. Have fun CSSifying your pages.