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()功能,它应该工作.

(另外,在MDN Wiki中有一个页面attr(),所以我认为它至少应该在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);
}

但是,即使您使用了正确的语法,它也无法正常工作.事实证明,没有已知的3级版本的attr()实现2012 2013 2014 2015年 2016 2017年 20182019.更糟糕的是,从最新编辑的规范草案开始,它仍处于危险之中.

但并非所有内容都丢失了:如果您希望在即将推出的浏览器中实现此功能,仍有时间在相关的反馈渠道中进行推荐!以下是迄今为止提出的建议:

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

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

Answer 2

截至今天,attr()CSS3中仅支持从HTML5 data属性中获取值以设置content元素.有一个很好的小提琴,它显示了它.

我已在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.