CSS Attribute Selector Bug in Safari
November 2
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.
