Do HTML5 custom data attributes “work” in IE 6?

Question

Custom data attributes: http://dev.w3.org/html5/spec/Overview.html#embedding-custom-non-visible-data

When I say “work”, I mean, if I’ve got HTML like this:

<div id="geoff" data-geoff="geoff de geoff">

will the following JavaScript:

var geoff = document.getElementById('geoff');
alert(geoff.dataGeoff);

produce, in IE 6, an alert with “geoff de geoff” in it?

Hartzke

HTML5 and IE6? The horror... O_o – Chainman

Hey, the doctype works at least. Small mercies. – Hartzke

Note that data-geoff isn't a valid JS identifier due to the "-" character. You'd need to use dataGeoff in scripts. – Civism

@outis: note that geoff.dataGeoff won't work, it's undefined. – Karlotta

@Marcel: that's a different matter, the matter of the question. My comment was only addressing the syntax issue. – Civism

@outis: Although I understand your point (about a non-valid identifier), your comment could imply that every HTML attribute with a hyphen in it can be translated to camel-case. That's only true for CSS style properties, as far as I know. – Karlotta

@Marcel: it's also true of HTML5 data attributes (I had to check this myself). Whether the browser supports it is another matter. – Civism

@outis: According to the specs (in draft), you mean? I tested this myself in FF 3.6 and Chromium 5.0.307.11 and retrieving geoff.dataGeoff didn't work. It turned out (whatwg.org/specs/web-apps/current-work/multipage/…) that it should be geoff.dataset.geoff, but as element.dataset is still undefined in modern browsers, that's neither supported. – Karlotta

+1 for the Eddie Izzard reference. – Foremost

Is geoff de geoff an Eddie Izzard reference? I never knew that. – Hartzke

The jeffth of the jeffth, nineteen jeffty-jeff. – Thorn

@Civism for knowledge's sake, it is possible to do foo['invalid-name'] where one would want to do foo.invalid-name but couldn't. – Neves

@ANeves: while that allows one to access a property with non-identifier characters, it doesn't apply here as the browser won't bridge a 'data-geoff' HTML attribute with a property of the same name in the DOM. – Civism

@Civism I could get it at elem.attributes['data-geoff'].value: jsfiddle.net/MEaVR/1 (It even works in IE8.) – Neves

@ANeves: note that that's basically the same as Marcel's answer of using getAttribute, as it uses the DOM rather than HTML5 data attributes. Looks like a useful addition to his answer, though. – Civism

If the browser is really working with DOM tree - which I hope all do - you can theoretically have any element with any attributes, like <myelement myatribute="myvalue" /> and work with them as with standard elements & attributes. – Trunkfish

@jave.web: sure, but invented elements/attributes 1. might have unwanted effects if they’re later supported by browsers; 2. have no globally-agreed semantics, unlike standard HTML; and 3. preclude you from using a non-customised HTML validator to check your HTML for errors. None of those might be a big deal for a given situation, but they’re at least worth thinking about. – Hartzke

@PaulD.Waite Totally agree with you Paul ! :) I was just stating the reason why it works :) – Trunkfish

@jave.web: ah, yes I see, with you. – Hartzke

Answer 1

You can retrieve values of custom (or your own) attributes using getAttribute. Following your example with

<div id="geoff" data-geoff="geoff de geoff">

I can get the value of data-geoff using

var geoff = document.getElementById("geoff");
alert(geoff.getAttribute("data-geoff"));

See MSDN. And although it is mentioned there that you need IE7 to get this to work, I tested this a while ago with IE6 and it functioned correctly (even in quirks mode).

But this has nothing to do with HTML5-specific attributes, of course.

Karlotta

Totally, this isn’t actual support of HTML5 data attributes. Does sound like a way to utilise them though. – Hartzke

Correct this doesn't support the API of data putting things in a collection or whatever (nobody supports this yes). However, as shown by get/Set Attribute you can get the main use of data- attributes immediately in any minimally DOM aware browser. You probably also could monkey patch browsers if you are so inclined to make the missing collections. From my recent book experiments it is clear that data- attributes are usable now and are far superior to the current common scheme of overloading the class attribute value to contain style info and random meta data. – Ethnography

“ You probably also could monkey patch browsers if you are so inclined to make the missing collections.” — Yeah, that’s the nice thing about JavaScript as compared to CSS: because it’s a programming language, you can fix compatibility issues yourself. – Hartzke

I'm actually amazed this answer still gets so much credit, especially as IE 6 should be considered "dead", according to many web developers. – Karlotta

@Marcel: I think quite a few sites still have IE 6 as a non-negligible part of their audience. Maybe in another 10 years we won’t have to worry any more. – Hartzke

Answer 2

Yes, they work.

IE has supported getAttribute() from IE4 which is what jQuery uses internally for data().

data = elem.getAttribute( "data-" + key ); // Line 1606, jQuery.1.5.2.js

So you can either use jQuery's .data() method or plain vanilla JavaScript:

Sample HTML

<div id="some-data" data-name="Tom"></div>

Javascript

var el = document.getElementById("some-data");
var name = el.getAttribute("data-name");
alert(name);

jQuery

var name = $("#some-data").data("name");

Terpineol

This answer seems to conflict a bit with canIuse. Any input on why it's marked as "partially" supported? caniuse.com/dataset – Pomegranate

@Pomegranate I believe it's related to the note at the bottom Note: All browsers can already use data-* attributes and access them using getAttribute. "Supported" refers to accessing the values using the dataset property. Current spec only refers to support on HTML elements, only some browsers also have support for SVG/MathML elements. – Terpineol

@Terpineol What about <div lala="Tom"></div> , would this be ok in IE6 ? How would you read the value ? – Cree

@RoyiNamir I believe it should work OK with any attribute but you best check. I don't have IE6 handy anywhere. – Terpineol

I wish jquery would just go away – Bosh

Someone should update MDN because it says getAttribute support dates back to IE 8 and according to you it dates back to IE 4. I know for a fact it works in IE 6 so I do not doubt that you are correct and that MDN is wrong as often it is. I find that frustrating since it is supposed to be an authoritative source. – Survance

Answer 3

Not only does IE6 not support the HTML5 Data Attribute feature, in fact virtually no current browser supports them! The only exception at the moment is Chrome.

You are perfectly at liberty to use data-geoff="geoff de geoff" as an attribute, but only Chrome of the current browser versions will give you the .dataGeoff property.

Fortunately, all current browsers - including IE6 - can reference unknown attributes using the standard DOM .getAttribute() method, so .getAttribute("data-geoff") will work everywhere.

In the very near future, new versions of Firefox and Safari will start to support the data attributes, but given that there's a perfectly good way of accessessing it that works in all browsers, then there's really no reason to be using the HTML5 method that will only work for some of your visitors.

You can see more about the current state of support for this feature at CanIUse.com.

Hope that helps.

Fordham

"Not only does IE6 not support the HTML5 Data Attribute feature, in fact virtually no current browser supports them" - sure, although that does depend on your definition of "support". No browser supports the dataset property, but all browsers allow you to store data in attributes with a prefix of data-, and (as you say) retrieve it via getAttribute. So in one sense they support the feature, because you can use the attributes themselves effectively. – Hartzke

I see your point about there being no reason to use the dataset property to access them though - I don't know what benefits it's supposed to offer over getAttribute. – Hartzke

@Paul -- it doesn't offer any advantages over getAttribute. What it offers is a standardised way to handle storing data against a tag using attributes. This has always worked but was never an official standard until HTML5. HTML5 simply took an existing non-standard but widely used feature and ratified it, adding some rules to say how you should name them, and defining a new way to access them. When I say it's not supported, I'm explicitly referring to the .dataXYZ properties; as you say, the basic functionality is widely supported, but not because it's HTML5. – Fordham

Answer 4

I think IE has always supported this (at least starting from IE4) and you can access them from JS. They were called 'expando properties'. See old MSDN article

This behaviour can be disabled by setting the expando property to false on a DOM element (it's true by default, so the expando properties work by default).

Edit: fixed the URL

S

Ah, yes sorry, I don’t think that’s the sense I intended. Just edited the question to clarify. – Hartzke

I am the one being sorry, the link was wrong. It explained how to disable this behavior instead of explaining the feature. I've fixed the link and text. – S

getAttribute works cross-browser, no need to rely on IE quirks here. – Bis

excellent, thank you. Nice article too, gotta love “Welcome to the first DHTML Dude column.” – Hartzke

Answer 5

If you wanted to retrieve all of the custom data attributes at once like the dataset property in newer browsers, you could do the following. This is what I did and works great for me in ie7+.

function getDataSet(node) {
    var dataset = {};
    var attrs = node.attributes;
    for (var i = 0; i < attrs.length; i++) {
        var attr = attrs.item(i);
        // make sure it is a data attribute
        if(attr.nodeName.match(new RegExp(/^data-/))) {
            // remove the 'data-' from the string 
            dataset[attr.nodeName.replace(new RegExp('^data-'), '')] = attr.nodeValue;
        }
    }
    return dataset;
}

Lattonia

Answer 6

In IE6, it may not work. For reference: MSDN

I suggest using jQuery to handle most of the cases:

var geoff = $("#geoff").data("data-geoff");
alert(geoff);

Try this in your coding.

Putput

In IE6, it does work (see the accepted answer), and I didn’t ask about jQuery. – Hartzke

@Paul D. Waite: Sorry, I declined your spam flag by mistake. This does look suspicious. – Hyperesthesia

@BoltClock: that’s quite alright. The code suggestion is actually a somewhat reasonable one, but that news reader link is obviously entirely unrelated. – Hartzke

Then why is it still here 4 years later? – Breastfeed