Question

Does HTML’s data attribute work in IE6?

I’m using the attribute like this <img id="charm_1" data-code='sdfsdfsdfsdf' data-price='100' class='addition_image' src="img/misc/donut.png" width="55" height="55" alt="Donut">.

As you can see there are 2 data attributes (price and code). I can get this with jQuery using the .data() method and it all seems to work in IE7/8/9. Does this work in IE6? I don’t have a copy of IE6 to test this.

Answer 1

IE6 — and indeed all other browsers on the market — have always been perfectly happy for you to define your own custom attributes on an element.

The use of data- as a prefix was formalised in the HTML5 standard, but browsers have always supported it, and don’t even really require the data- prefix.

The data- prefix is recommended because it is now part of the standard, so there’s a chance that a future browser may be more picky about it, and also because of the new dataset property that was added to HTML5 DOM specification at the same time to support it.

Obviously you can’t use the dataset property, as very few browsers support it (not even newer ones, let alone older ones), but you can of course always use the good old getAttribute() method instead (which is what jQuery does).

To find out about browser support for new properties, I recommend the CanIUse.com site. For example, here is their page about data- attributes: http://caniuse.com/#search=dataset. They have full browser support tables for a wide range of features.

Hope that helps.