Attributes and Casing

Sep28
Missing Image
By SiteCrafting Staff

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)
< 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.



Dev

Back To Feed