HTML "data-attribute"与简单 "custom attribute"

Question

我经常看到html data-attribute (s) 将特定值/参数添加到 html 元素，例如使用它们将按钮“链接”到要打开的模式对话框等的 Bootstrap。

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

现在，我看到一个几乎著名的 CSS 框架，Kube ，在其新版本中广泛使用简单的自定义属性，例如:

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

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

其他实际示例是可见的，例如 here .

我不知道可以使用简单的自定义属性，所以我尝试搜索一些有关此的资源，但我只找到了 this old similar question其中几乎只有(可能)兼容性问题。

如果浏览器支持如此“脆弱”，我很惊讶像 Kube 这样的 CSS 框架可以使用类似的解决方案......

所以我的问题是:

1. Kube 的方法有多好(=交叉兼容)？
2. 我可以安全地更换我的 data-attribute 吗？使用简单的自定义值，例如，如果我必须只传递真/假值？

最后一个问题最好用一个例子来描述，所以替换 <span class="foo" data-boo='true'>Black</span>与 <span class="foo" boo>Black</span>

Answer 1

使用数据属性。它们是:

• 标准
• 不会让验证器将它们报告为错误(当它们被一堆你故意犯的错误包围时，很难在验证报告中发现无意的错误)
• 不会与将来可能添加到标准中的属性发生冲突

...如果您只是想检查它们是否存在于 CSS 属性选择器中，则不必给它们赋值...但如果您想要这样做，那么您可能应该只使用其他类。