28 Sep
Attributes and Casing
Internet Explorer just doesn't like to play well with others. Case in point: I was working on some JavaScript using jQuery where I noticed a strain bug. My data attributes were camel casing differently in Firefox and IE7. So I loaded up Chrome and saw it matched Firefox. I'm sure you can see where this is going. So here's the issue:
Given the following HTML: (spaces added)
Internet Explorer returns the innerHTML in a non-normalized way: (Link to test code)
JavaScript is strict about it's casing, and this one character difference is enough to make the property undefined. In our case, I am going to suggest developers follow the spec and use lowercase names for HTML5 data- attributes. This will bypass the browser inconsistency completely. On the plus side, the jQuery Data function normalizes this problem for you, so you don't have to worry about it.
As a side note, while looking into this I found a bug in the latest jQuery (1.6.4). Looks like there is a regression where the jQuery.data() function returns an empty object in IE. I have reported it here.
Given the following HTML: (spaces added)
< div data-elem-ID="1">< /div>
Internet Explorer returns the innerHTML in a non-normalized way: (Link to test code)
| Browser | innerHTML | attribute[0].name | jQuery.data() |
| IE8 (and lower) |
< DIV data-elem-ID="1">< /div> |
data-elem-ID |
elemID |
| IE9+ | < div data-elem-ID="1">< /div> |
data-elem-ID |
elemID |
| Others | < div data-elem-id="1">< /div> |
data-elem-id |
elemId |
JavaScript is strict about it's casing, and this one character difference is enough to make the property undefined. In our case, I am going to suggest developers follow the spec and use lowercase names for HTML5 data- attributes. This will bypass the browser inconsistency completely. On the plus side, the jQuery Data function normalizes this problem for you, so you don't have to worry about it.
As a side note, while looking into this I found a bug in the latest jQuery (1.6.4). Looks like there is a regression where the jQuery.data() function returns an empty object in IE. I have reported it here.
Update 2011-09-30:
The jQuery team closed the bug as it's considered spec. HTML5 data-* attribute requires the attribute to be in all lower case. So the code above is invalid HTML5. That said, it is still processed by the browsers and will give you trouble. Stay safe and keep your attributes in lower case.
No comments found.