CODEWITHSUNDEEP
htmldomcross-browser
Atticus
Atticus

Reputation: 6720

DOM data-x attribute compatibility -- is this safe?

I was wondering what the browser compatibility looks like for using data-varname attributes for elements?

Throughout my site I'm using data- attributes to indicate row numbers, reference IDs, etc for ajax deletion & insertion.

For example:

<ul>
    <li data-row="1">First Row <a href="#" data-row="1" data-id="123">remove</a></li>
    <li data-row="2">Second Row <a href="#" data-row="1" data-id="111">remove</a></li>
</ul>

$(document).ready(function(){
    $("li a").click(function(){
        var index = $(this).attr("data-row");
        $("li [data-row='" + index + "']").remove();
            // ajax deletion in database referencing data-id attribute
    });
});

I know i can just reference the anchor's parent to remove it rather than looking at the element's data-row attribute, but this is just an example to show basic usage of it.. this isn't actually what I'm doing.

I want to know how "safe" it is to use this data- attribute. Is it pretty univerisally compatible or are there still a good number number of browsers that won't function correctly with this?

Upvotes: 2

Views: 2178

Answers (1)

Alohci
Alohci

Reputation: 82986

It's completely safe. Browsers have always accepted unrecognised attributes. All that happened with the data-* attributes was that HTML5 defined (a) that those names will never be used for any other official purpose and (b) an API to make accessing those values in JavaScript more convenient.

If you use the new API, then you will need a polyfill for older browsers and those that do not yet have native support for the API, but what you are doing doesn't use that API.

Upvotes: 2

Related Questions