Do Html5 Custom Data Attributes "Work" in Ie 6

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

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.

HTML data attribute IE6 support

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.

Does using custom data attributes produce browser compatibility issues?

I would advise in favor of data attributes for the following reasons:

• ids need to be unique document-wide. Thus they are limited in the semantics they can carry
• you can have multiple data-attributes per element

and probably less relevant in your case:

• changing ids might break idrefs

However, I'm not sure whether I understand your specs completely as extracting the element id in jQuery is as trivial as getting the data attribute: $('.foo').attr('id');.

You might be interested in Caniuse.com, a browser compatibility site for web technologies.

If XHTML is an issue to you, you might also be interested in how to use custom data attributes in XHTML: see here for a discussion on SO and here for an XHTML-compatible approach using namespaces.

Is there any problem with using HTML5's data-* attributes for older browsers?

There isn't really, they're not 100% correct/valid usage in HTML4 of course....but they don't cause problems either, so they're still a great way to solve the "I need an attribute for this" problem.

If it helps, I've used these while supporting IE6 and have had zero issues thus far, and I can't recall a single SO question reporting any either.

Using custom data-* attributes inside HTML5 template tag

To bind to an attribute, use $= rather than =. This results in a call to:

element.setAttribute(attr, value);

As opposed to:

element.property = value;

(source)

So in your case:

<a data-route$="{{item.dataRoute}}" href="{{item.href}}">

Native JS for Reading HTML5 Custom Data Attributes

In vanilla-JS, assuming spanEl is a reference to the DOM node

spanEl.dataset.complexKey

will work using the camelCase notation (see http://jsbin.com/oduguw/3/edit) when your data attribute contains hypens (-) and also

spanEl.getAttribute('data-complex-key')

will work fine as you already noticed. As a side note, in jQuery you can access to that data attribute with

$(spanEl).data("complex-key")

Why should I prepend my custom attributes with data-?

There are several benefit for keeping custom attributes prefixed with data-*.

1. It guarantees there will not be any clashes with extensions to HTML in future editions. This is a problem that has been encountered to some degree already with some of the new attributes introduced in HTML5, where existing sites were using attributes with the same name and expecting different and incompatible, custom behaviour. (e.g. the required attribute on input elements is known to have had some clashes on some popular websites in the past)

2. There is a convenient DOM API, HTMLElement.dataset, for accessing these attributes from scripts. It is now supported in most browsers.

3. They provide a clear indication of which attributes are custom attributes, and which ones are standardised attributes. This not only helps validators by allowing them to permit any attribute with data-* while still performing useful error checking for other attributes (e.g. to catch typos), it also helps make this aspect of the source code clearer to those reading it, including people who may work on a website after the original author.

Change div content in HTML5 Custom Data Attributes

You can use following functions to fulfill your task:

• element.getAttribute to get the values inside the attribute
• element.setAttribute to set the values inside the attribute
• JSON.stringify and JSON.parse to work with JSON

Check the code below.

var meter1 = document.getElementById("meter1")
var dataSettings = JSON.parse(meter1.getAttribute("data-settings"))
dataSettings.value = 8
dataSettings.min = 5

meter1.setAttribute("data-settings", JSON.stringify(dataSettings))

console.log(meter1.getAttribute("data-settings"))

<div class="gauge" id="meter1" data-settings='
   {"value": 7,
    "min": 0,
    "max": 50,
    "threshold": [
      {"from": 25, "to": 50, "color": "blue", "label": "Warning"},
      {"from": 0, "to": 25, "color": "orange", "label": "Critical"}
        ]
    }'></div>