17

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>

Improve this question
2
  • I'm not familiar with that framework but a quick grasp at their site suggests they use good old class. Could you please point to an example of such usage? Commented Oct 15, 2015 at 15:03
  • I edit my question with a link to specific documention page in which you can find applied examples Commented Oct 15, 2015 at 15:06

1 Answer 1

Reset to default
19

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

For what good reason would they make a validator choke? (i.e a reason that can't be reasonably avoided; not just for the reason that there is some validator out there that doesn't support it because it was poorly written).
@BVernon — Because arbitrary attributes that you make up are not attributes that the HTML specification permits.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.