I have to choose between custom data tags or ids. I would like to choose custom data tags, but I want to be sure that they do not cause browser compatibility issues for the most widely used browsers today.
I'm using jQuery 1.6 and my particular scenario involves a situation where I need to reference a commentId for several actions.
<div data-comment-id="comment-1" id="comment-1">
<a class="foo"></a>
</div>
It's easier to extract data tags in jQueryin: $('foo').data('commentId');
Extract a substring from the id seems a bit complicated and could break for one reason or another: <a id="comment-1"
Are there any sweeping merits or fatal flaws for either approach?
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 being 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 this 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 a xhtml-compatible approach using namespaces.
hope that helps,
best regards, carsten
this guy says data attibutes work on IE6.
Here is the relevant chart on caniusecom: http://caniuse.com/#feat=dataset
来源：https://stackoverflow.com/questions/6222359/does-using-custom-data-attributes-produce-browser-compatibility-issues