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

问题描述

我在HTML文档中有这个：

 < a class =wbutton tintdata-tint =rgba （255,0,0，.5）href =＃>这应该是红色的，不透明度为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中工作）

解决方案

看看规范中给出的语法： p>

  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 < del> 2013 2014 2015 2015 更糟糕的是，从规范的最新编辑草稿开始，它仍然处于风险之中。

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

• Microsoft Edge Platform ，目前正在考虑中（ht / www.w3.org/TR/CSS21/generate.html#x18rel =nofollow noreferrer> 2.1版本在所有主要浏览器（包括IE8 +和Firefox 2+）的最新版本中完全支持，与：之前和： content 属性c>用于生成内容的伪元素。 Mozilla开发人员网络（MDN）浏览器兼容性表仅适用于此版本，而不适用于CSS3版本。
  
  

  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>
  

  and this in the CSS file:

  .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?

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

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

  解决方案

  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 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, currently Under Consideration (ht Lea Verou!)

  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屋！