title: CSS3's attr() doesn't work in major browsers
body: <p>I have this in my HTML document:</p>
  
  <pre><code>&lt;a class="wbutton tint" data-tint="rgba(255,0,0,.5)" href="#"&gt;This should be red, with an opacity of 0.5&lt;/a&gt;
  </code></pre>
  
  <p>and this in the CSS file:</p>
  
  <pre class="lang-css prettyprint-override"><code>.window &gt; .content .wbutton.tint {
      border: solid thin attr(data-tint, color);
      box-shadow: inset 0 0 50px attr(data-tint, color);
  }
  </code></pre>
  
  <p>Firefox returns a CSS error in Firebug. Am I doing something wrong?</p>
  
  <p>According to the <a href="http://www.w3.org/TR/css-values-3/#attr-notation" rel="noreferrer">W3C specs for the <code>attr()</code> function</a>, it should work.</p>
  
  <p>(Also, there's <a href="https://developer.mozilla.org/en/CSS/attr" rel="noreferrer">a page about <code>attr()</code> in the MDN Wiki</a>, so I assume it should at least work in Firefox)</p>