问题
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:
- How good (=cross-compatible) is Kube's approach?
- Can I safely replace my
data-attributewith 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>
回答1:
Use data attributes. They are:
- standard
- won't make a validator choke
- 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.
来源：https://stackoverflow.com/questions/33151713/html-data-attribute-vs-simple-custom-attribute