CSS3的attr（）在主要的浏览器中不工作 [英] CSS3's attr() doesn't work in major browsers

问题描述

我在HTML文件中有这个：

I have this in my HTML document:

<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错误。我做错了什么？

Firefox returns a CSS error in Firebug. Am I doing something wrong?

根据 W3C规范 attr（）函数，它应该可以工作。

According to the W3C specs for the attr() function, it should work.

（此外，还有有关 attr（）的页面在MDN Wiki ，所以我认为它应该至少在Firefox工作）

(Also, there's a page about attr() in the MDN Wiki, so I assume it should at least work in Firefox)

推荐答案

规格中提供的语法：

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

但是，即使你有正确的语法， 。事实证明，<$>没有已知的实现的<3>版本的 attr（），自 2012 < del> 2013 2014 2015 2016 更糟糕的是，从规范的最新编辑草稿开始，它仍然处于风险之中。

However, even if you have the right syntax, it won't work either. It turns out, there is no known implementation of the Level 3 version of attr() yet as of 2012 2013 2014 2015 2016 2017. To make matters worse, it's still at-risk as of the latest editor's draft of the spec.

但并不是所有的都失去了：如果你想看到这个功能在即将推出的浏览器中实现，还有时间在相关的反馈渠道中建议它！以下是迄今为止提出的建议：

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 ，目前正在考虑中（ht

• Microsoft Edge Platform, currently Under Consideration (ht Lea Verou!)

对于记录，基本的 2.1版本完全支持所有主要浏览器的最新版本，包括IE8 +和Firefox 2+，以及与：之前和： content 属性c>用于生成内容的伪元素。 Mozilla开发者网络（MDN）浏览器兼容性表仅适用于此版本，而不适用于CSS3版本。

For the record, the basic Level 2.1 version is fully supported across recent versions of all major browsers, including IE8+ and Firefox 2+, and is used with the content property for the :before and :after pseudo-elements for generated content. The Mozilla Developer Network (MDN) browser compatibility table is applicable only to this version, and not the CSS3 version.

这篇关于CSS3的attr（）在主要的浏览器中不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！