Yes, CSS2 is very cool, but apparently way more problematic than I originally thought. It seems even minor details are the cause of much consternation, giving headaches to programmers and designers alike.

The whole thing started when I noticed that the blog title ("banner") was not displayed properly on my grandfather's machine (Internet Explorer 6); it appeared as though the text class wasn't handled properly. Give or take 20 minutes later I found out that I accidentally used a class="banner" declaration where in the CSS it was defined as A.Banner. Apparently Mozilla was misbehaving in ignoring the case. At first I thought Microsoft finally got something right with Internet Explorer 6, then figured I might as well delve a little deeper into it and figure out which behaviour is right.

Enter the CSS2 specifications, specifically section 4.1.3 Characters and case, where it is clearly stated that CSS is assumed to be case-insensitive "except for the parts that are not under the control of CSS". This a very subtle distinction, which apparently goes on to include the "... values of the HTML attributes "id" and "class"".

Now, seeing that I love to be standards-compliant, I naturally included the correct <!DOCTYPE> declaration in the beginning of my blog template, putting Internet Explorer in standards-compliant mode; unfortunately I did not read the CSS2 specifications carefully enough and therefore did not properly understand the case-sensitivity issue.

Therefore I will quote what I perceive is a very good piece of advice from Zen and the Art of Website Maintenance:

Last but not least, let me touch on the issue of case sensitivity. CSS selectors are not, by definition, case-sensitive. However, if the page language within which they are used is case-sensitive, then they become case-sensitive. HTML is not case-sensitive [HTML 4.01 is, though, so take care! -TG], so CSS is not when used within it. But XHTML and XML are case-sensitive and so, therefore, is any CSS used within it. Given this, the only sensible choice is to regard all CSS as case-sensitive: this will save you from considerable pain in the future.

And to sum the whole thing up: yes, Microsoft seem to have done something right for a change, and Mozilla does indeed misbehave (unless, which is just as likely, I've missed another subtle but important issue...)