During last weekend’s Train the Trainer workshop, Jinny from University of Georgia asked a question that gave Molly and I pause:
Are attribute selectors case sensitive?
As someone who strives to write correct markup and CSS rules, I always try to make my CSS class and ID attributes match case. At most, I worry about my ID or class selectors have a typo, but worry about attribute selectors? To be honest, it wasn’t till Internet Explorer 7 for Windows (IE7) came out that I’m giving attribute selectors a closer look.
So, on the spot, I dove into writing up a quick test case and run it through the major browsers: IE7, Firefox 2, Safari, and Opera. The results were that all the major browsers are case senstivie except Safari.
However, I wasn’t satsisified with that test case. To be honest, Molly wasn’t either. The first pass earned Molly’s dissastifcation as I didn’t test against XHTML first, but settled for HTML 4. (I quickly tested against XHTML, but the results were still the same: Safari allowed for case insensitivity.)
Now that I’m back home, I decided to write a tighter test case in XHTML and HTML and run it through a few more browsers than I tested at the workshop. These results can be viewed in Table 1.
Web Browsers | DOCTYPE | |
---|---|---|
XHTML | HTML 4 | |
IE 7 | Yes | Yes |
Safari 1.2 | No | No |
Safari 1.3 | No | No |
Safari 2.0 | No | No |
Safari 3.0 (iPhone) | No | No |
Firefox 1.5 | Yes | Yes |
Firefox 2.0 | Yes | Yes |
Opera 8.5 | Yes | Yes |
Opera 9.21 | Yes | Yes |
Camino 1.0 | Yes | Yes |
Note that links within the table include screenshots of browsers and links to test cases.
Discussing Case Senstivity of Attribute Selectors
Once we find something odd, the first thing to do is to read the specifications to see what is the “right” behavior for the browser to follow.
First up, this is what the CSS 2.1 sepcification says about case sensitivity:
All CSS style sheets are case-insensitive, except for parts that are not under the control of CSS. For example, the case-sensitivity of values of the HTML attributes “id” and “class”, of font names, and of URIs lies outside the scope of this specification. — CSS2.1, 4.1.3
And while we are at it, let’s take a look at the HTML specification as well, which states that the title
attribute is also case sensitive.
What Does This Mean?
The short version of the results is that Safari is wrong and the other major browsers that support attribute selectors appear to be getting it right. (Yes, that includes IE7.)
Safari CSS Filter
How can you, the Web developer always looking for that edge in coding, use this bit of information? The obvious thing to do is to send CSS rules to only Safari browsers.
For example, write a CSS rule like so:
p[title="foobar"] {
border: 1px solid red;
}
And then set up the HTML like so, making sure to change the case of the title
attribute’s value:
<p title="FoObAr">The content is styled with a 1-pixel,
red border in Safari.</p>
Note
Thanks to Jinny for asking an intriguing question and to Porter for providing his usual excellent W3C specification translation services.
I think this is technically a bug in HTML error handling, not in CSS support. At least, that’s what I was told about similar bugs in other browsers (remember when IE/Win was case-insensitive?). In fact, it’s why case-sensitivity testing was dropped from the CSS test suite at one point in time.
Why can’t all of the major browsers get their ducks in a row? Having to do a lot of work to make the same page work on all of the big three only lends its self to pushing developers to support only one browser if it ever became practical to do so.
There’s a problem with your test. When you serve XHTML up as text/html the browser treats it as an HTML document which is why your XHTML column is the same as your HTML column.
The cheat’s way to test is to give the file a .xhtml extension. Open the file locally in Safari and it’ll treat the file as XHTML, be case-sensitive, and correctly render the 2nd para with a red background.
At least it does in Safari 2.04 🙂
WebKit Bugzilla lists this problem as #11389, see
http://bugs.webkit.org/show_bug.cgi?id=11389
Interesting that Firefox 2 also fails the case-sensitivity test for the id attribute here: http://www.css3.info/selectors-test/test.html (linked from the bug report Ingo provided)
And further thoughts on why Safari is case-sentitive for application/xhtm+xml .… well of course it is! Everything is case-sensitive when treated as XML! So it really isn’t a surprise that Safari get’s it right for application/xhtml+xml.