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~~ ~~2013~~ ~~2014 <时，attr()~~ 的第3级版本没有已知的实现/ del> ~~2015~~ ~~2016~~ ~~2017~~ ~~2018~~ 2019.更糟糕的是，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+）中得到完全支持，并与content :before属性一起使用和:after生成内容的伪元素。 MDN浏览器兼容性表仅适用于此版本，而不适用于CSS3版本。

Answer 2

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

我在谷歌Chrome 35，Mozilla Firefox 30＆amp; 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/

Firefox：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每个百分比的可能性，允许您使用数据宽度设置跨度宽度。

Check out the fiddle

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

4 个答案: