CSS CSS3 的 attr() 在主流浏览器中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8769786/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3's attr() doesn't work in major browsers
提问by Peter W.
I have this in my HTML document:
我的 HTML 文档中有这个：
<a class="wbutton tint" data-tint="rgba(255,0,0,.5)" href="#">This should be red, with an opacity of 0.5</a>
and this in the CSS file:
这在 CSS 文件中：
.window > .content .wbutton.tint {
border: solid thin attr(data-tint, color);
box-shadow: inset 0 0 50px attr(data-tint, color);
}
Firefox returns a CSS error in Firebug. Am I doing something wrong?
Firefox 在 Firebug 中返回 CSS 错误。难道我做错了什么？
According to the W3C specs for the attr()function, it should work.
根据函数的W3C 规范attr()，它应该可以工作。
(Also, there's a page about attr()in the MDN Wiki, so I assume it should at least work in Firefox)
（另外，在 MDN Wiki 中有一个关于页面attr()，所以我认为它至少应该在 Firefox 中工作）
回答by BoltClock
Looking at the grammar that's given in the spec:
查看规范中给出的语法：
attr( <attr-name> <type-or-unit>? [ , <fallback> ]? )
It looks like the comma between the attribute name and the unit to be used needs to be dropped:
看起来属性名称和要使用的单位之间的逗号需要删除：
.window > .content .wbutton.tint {
border: solid thin attr(data-tint color);
box-shadow: inset 0 0 50px attr(data-tint color);
}
However, even if you have the right syntax, it won't work either. It turns out, there are no known implementations of the level 3 version of attr()as of 2012...2020. To make matters worse, it's still at-risk as of the latest editor's draft of the spec.
但是，即使您有正确的语法，它也不起作用。事实证明，截至目前，尚无 3 级版本的已知实现attr()2012年...2020。更糟糕的是，截至最新编辑的规范草案，它仍然处于危险之中。
But not all is lost: if you'd like to see this feature implemented in upcoming browsers, there is still time to suggest it in the relevant feedback channels! Here are the proposals that have been put out so far:
但并非全部丢失：如果您希望在即将推出的浏览器中实现此功能，仍有时间在相关反馈渠道中提出建议！以下是迄今为止提出的提案：
- Microsoft Edge Platform, currently Under Consideration (ht Lea Verou!)
- Microsoft Edge 平台，目前正在考虑中（ht Lea Verou！）
For the record, the basic Level 2.1 versionis fully supported across recent versions of all major browsers, including IE8+ and Firefox 2+, and is used with the contentproperty for the :beforeand :afterpseudo-elements for generated content. The MDN browser compatibility table is applicable only to this version, and not the CSS3 version.
作为记录，所有主要浏览器的最新版本（包括 IE8+ 和 Firefox 2+）完全支持基本的Level 2.1 版本，并与生成内容的content属性:before和:after伪元素一起使用。MDN 浏览器兼容性表仅适用于该版本，不适用于 CSS3 版本。
回答by Benny Neugebauer
As of today, the attr()in CSS3 only supports to get values from the HTML5 dataattribute to set the contentof an element. There is a nice fiddlewhichs shows it.
截至今天，attr()CSS3 中仅支持从 HTML5data属性中获取值来设置content元素的 。有一个很好的小提琴显示它。
I have tested it in Google Chrome 35, Mozilla Firefox 30 & Internet Explorer 11.
我已经在 Google Chrome 35、Mozilla Firefox 30 和 Internet Explorer 11 中对其进行了测试。
If you want to use HTML5 data attributes for different things in CSS3, like setting the widthand the heightof elements, then you need an additional JavaScript library.
如果你想在 CSS3 中为不同的东西使用 HTML5 数据属性，比如设置元素的width和height，那么你需要一个额外的 JavaScript 库。
Fabrice Weinberg wrote a CSS3 attr() Polyfillwhich handles data-widthand data-height. You can find Fabrice's GitHub repository here: cssattr.js.
Fabrice Weinberg 编写了一个CSS3 attr() Polyfill，它处理data-width和data-height. 您可以在此处找到 Fabrice 的 GitHub 存储库：cssattr.js。
回答by user2454034
I found hack. This is not attribute, but manipulate directly on styles. In Chrome Canary, you can use custom css properties, and JS for manipulate properties.
我发现了黑客。这不是属性，而是直接对样式进行操作。在 Chrome Canary 中，您可以使用自定义 css 属性，并使用 JS 来操作属性。
In CSS:
在 CSS 中：
.some { background-position: var(--x) 0; }
In JS:
在JS中：
element.style.setProperty("--x", "100px", "");
//With same success you can set attribute.
Test case: https://jsfiddle.net/y0oer8dk/
测试用例：https: //jsfiddle.net/y0oer8dk/
Firefox: https://jsfiddle.net/0ysxxmj9/2/
回答by Eugene
It does work, but not the way you think. It's not a value that's sent via a variable but more as a trigger to then assign a value to. And because of this it's better to make the data attributes something unique but simple. A small example might help:
它确实有效，但不是你想的那样。它不是通过变量发送的值，而是作为触发器然后为其分配值。正因为如此，最好让数据属性变得独特而简单。一个小例子可能会有所帮助：
<div class="data"><span data-width="80" data-tint="lime"></span></div>
Then in your css you would put:
然后在你的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);}
It's pointless if your doing it on a small scale but on a larger scale and with some help from SCSS some things become easier, like..
如果你在小规模上做，但在更大的规模上做，并且在 SCSS 的帮助下，一些事情变得更容易，比如..
@for $i from 1 through 100 {
&[data-width="#{$i}"] {
.data > span {
width: calc(#{$i} * 1%);
}
}
}
That will compile into CSS every percentage possibility allowing you to set your span width with data-width.
这将编译成 CSS 每个百分比的可能性，允许您使用数据宽度设置跨度宽度。
