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 specs for the attr() function，它应该可以工作。

（另外，还有a page about attr() in the MDN Wiki，所以我认为它至少应该可以在 Firefox 中使用）

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);
}

然而，即使你有正确的语法，它也不会起作用。事实证明，截至 2012...2020 年，没有已知的 3 级版本的 attr() 实现。更糟糕的是，it's still at-risk as of the latest editor's draft of the spec。

但并非全部丢失：如果您希望在即将推出的浏览器中实现此功能，仍有时间在相关反馈渠道中提出建议！以下是目前已经提出的建议：

• Microsoft Edge Platform，目前正在考虑中 (ht Lea Verou!)

作为记录，基本的Level 2.1 version 在所有主要浏览器的最新版本中得到完全支持，包括 IE8+ 和 Firefox 2+，并且与 :before 和 :after 伪的 content 属性一起使用生成内容的元素。 MDN浏览器兼容性表仅适用于该版本，不适用于CSS3版本。

Answer 2

截至目前，CSS3 中的attr() 仅支持从HTML5 的data 属性中获取值来设置元素的content。有一个很好的fiddle 显示了它。

我已经在 Google Chrome 35、Mozilla Firefox 30 和 Internet Explorer 11 中对其进行了测试。

如果您想在 CSS3 中为不同的事物使用 HTML5 数据属性，例如设置元素的 width 和 height，那么您需要一个额外的 JavaScript 库。

Fabrice Weinberg 写了一个 CSS3 attr() Polyfill 来处理 data-width 和 data-height。您可以在这里找到 Fabrice 的 GitHub 存储库：cssattr.js。

Answer 3

我发现了黑客。这不是属性，而是直接对样式进行操作。在 Chrome Canary 中，您可以使用自定义 css 属性和 JS 来操作属性。

在 CSS 中：

.some { background-position: var(--x) 0; } 

在 JS 中：

element.style.setProperty("--x", "100px", "");
//With same success you can set attribute. 

测试用例：https://jsfiddle.net/y0oer8dk/

火狐：https://jsfiddle.net/0ysxxmj9/2/

Answer 4

它确实有效，但不是你想的那样。它不是通过变量发送的值，而是作为触发器然后分配一个值。正因为如此，最好使数据属性独特而简单。 一个小例子可能会有所帮助：

<div class="data"><span data-width="80" data-tint="lime"></span></div>

然后在你的css中你会放：

.data {height: 50px; width: 100%; background-color: #eee;}
.data > span {display: block; height: 100%;}
.data > span[data-width="80"] {width: 80%;}
.data > span[data-tint="lime"] {background-color: rgba(118, 255, 3, 0.6);}

如果你在小规模上做这件事是没有意义的，但在更大的范围内，在 SCSS 的帮助下，有些事情会变得更容易，比如..

@for $i from 1 through 100 {
    &[data-width="#{$i}"] {
        .data > span {
            width: calc(#{$i} * 1%);
        }
    }
}

这将编译成所有百分比可能性的 CSS，允许您使用 data-width 设置跨度宽度。

Check out the fiddle