CSS3的attr()在主stream浏览器中不起作用

我在我的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()的页面 ,所以我认为它应该至less在Firefox中工作)

看看规范中给出的语法:

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

但是,即使你有正确的语法,它也不会工作。 事实certificate, 没有已知attr()级别3版本的实现 2012 2013 2014 2015年 2016 更糟糕的是, 截至最新的编辑草案规范 , 它仍然处于风险之中 。

但并非全部都丢失了:如果您希望在即将到来的浏览器中看到这个function,还有时间在相关的反馈渠道中提出build议! 以下是迄今为止提出的build议:

  • 微软Edge平台 ,目前正在考虑之中(ht Lea Verou !)

为了logging,所有主stream浏览器(包括IE8 +和Firefox2 +)的最新版本都支持基本的Level 2.1版本 ,并且与生成content:before:after content元素一起使用。 Mozilla开发人员networking(MDN)浏览器兼容性表仅适用于此版本,而不适用于CSS3版本。

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

我已经在Google Chrome 35,Mozilla Firefox 30和Internet Explorer 11中进行了testing。

如果你想为CSS3中的不同事物使用HTML5数据属性,比如设置元素的widthheight ,那么你需要额外的JavaScript库。

Fabrice Weinberg写了一个处理data-widthdata-height的CSS3 attr()Polyfill 。 你可以在这里findFabrice的GitHub仓库: cssattr.js 。

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

在CSS中:

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

在JS中:

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

testing用例: https : //jsfiddle.net/y0oer8dk/

Firefox: https : //jsfiddle.net/0ysxxmj9/2/