CODEWITHSUNDEEP
htmlcustom-data-attribute
Luca Detomi
Luca Detomi

Reputation: 5716

HTML "data-attribute" vs simple "custom attribute"

I usually saw html data-attribute(s) to add specific values/parameters to html element like Bootstrap that uses them to "link" buttons to modal dialog to be opened, etc.

<button type="button" class="close" data-dismiss="modal" aria-label="Close">

Now, I see that an almost famous CSS framework, Kube, in its new version extensively uses simple custom attribute such as in following:

<column cols="4">4</column> 

<span class="label label-black" outline bold>Black</span>

Other in-action examples are visibile for example, here.

I did not know that was possible to use simple custom attributes so I tried to search some source about this, and I found only this old similar question in which are noted almost only (possible) compatiblity issues.

I'm surprised that a CSS framework like Kube could use a similar solution if browser support could be so "fragile"....

So my question are:

  1. How good (=cross-compatible) is Kube's approach?
  2. Can I safely replace my data-attribute with simple custom ones if for example I have to pass only true/false values?

This last question is better described by an example, so replace <span class="foo" data-boo='true'>Black</span> with <span class="foo" boo>Black</span>

Upvotes: 17

Views: 3786

Answers (1)

Quentin
Quentin

Reputation: 943562

Use data attributes. They are:

  • standard
  • won't make a validator report them as errors (it's hard to spot unintentional errors in a validation report when they are surrounded with a pile of errors that you've made intentionally)
  • won't conflict with attributes that might be added to the standard in the future

… and you don't have to give them values if you just want to check to see if they exist with a CSS attribute selector … but if you want that then you should probably just be using additional classes instead.

Upvotes: 19

Related Questions