HTML"数据属性"与简单的"自定义属性"

Question

我经常看到html data-attribute(s)将特定的值/参数添加到像Bootstrap这样的html元素中,它使用它们来" 链接 "按钮到要打开的模态对话框等.

<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>

其他动作示例例如,这里是可见的.

我不知道可以使用简单的自定义属性,所以我试图搜索一些关于这个的来源,我发现只有这个旧的类似问题,其中几乎只注意到(可能的)兼容性问题.

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

所以我的问题是:

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

最后一个问题可以通过示例更好地描述,因此请替换<span class="foo" data-boo='true'>Black</span>为<span class="foo" boo>Black</span>

Answer 1

使用数据属性.他们是:

• 标准
• 不会使验证者窒息
• 不会与将来可能添加到标准的属性冲突

...如果你只是想检查它们是否存在CSS属性选择器,你不必给它们值...但是如果你想要那么你应该只是使用其他类.