CSS3的attr（）在主要的浏览器中不起作用

Question

我的HTML文件中有这个：

<a class="wbutton tint" data-tint="rgba(255,0,0,.5)" href="#">This should be red, with an opacity of 0.5</a>

这在CSS文件中：

.window > .content .wbutton.tint {
    border: solid thin attr(data-tint, color);
    box-shadow: inset 0 0 50px attr(data-tint, color);
}

Firefox在Firebug中返回CSS错误。难道我做错了什么？

按照W3C规范的attr()功能，它应该工作。

Answer 1

查看规范中给出的语法：

attr( <attr-name> <type-or-unit>? [ , <fallback> ]? )

似乎需要删除属性名称和要使用的单位之间的逗号：

.window > .content .wbutton.tint {
    border: solid thin attr(data-tint color);
    box-shadow: inset 0 0 50px attr(data-tint color);
}

但是，即使您使用正确的语法，也不会起作用。事实证明，截至 3的级别3版本没有已知的实现attr() 2012年 …
2020年。更糟糕的是，截至最新的规范编辑草案仍存在风险。

但是，并不是所有的东西都丢失了：如果您希望在即将到来的浏览器中实现此功能，仍然有时间在相关的反馈渠道中提出建议！这是到目前为止已经提出的建议：

• Microsoft Edge平台，目前正在考虑中（ht Lea Verou！）

记录在案，所有主要浏览器的最新版本（包括IE8+和Firefox2+）都完全支持基本的[2.1版]，并与content属性:before和:after用于生成内容的伪元素一起使用。MDN浏览器兼容性表仅适用于此版本，而不适用于CSS3版本。