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

Luc*_*omi 9 html custom-data-attribute

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

<button type="button" class="close" data-dismiss="modal" aria-label="Close">
Run Code Online (Sandbox Code Playgroud)

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

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

<span class="label label-black" outline bold>Black</span>
Run Code Online (Sandbox Code Playgroud)

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

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

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

所以我的问题是:

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

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

Que*_*tin 6

使用数据属性.他们是:

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

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

  • @BVernon — 因为您组成的任意属性不是 HTML 规范允许的属性。 (3认同)