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数据属性，比如设置元素的width和height ，那么你需要额外的JavaScript库。
Fabrice Weinberg写了一个处理data-width和data-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/
