title: Combine calc() with attr() in CSS
body: <p>I was wondering whether I can combine the calc() function with the attr() function to achieve something like the following:</p>
  
  <pre><code>&lt;div class="content" data-x="1"&gt;
      This box should have a width of 100px
  &lt;/div&gt;
  
  &lt;div class="content" data-x="2"&gt;
      This box should have a width of 200px
  &lt;/div&gt;
  
  &lt;div class="content" data-x="3"&gt;
      This box should have a width of 300px
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.content{
      //Fallback. If no calc is supported, just leave it at 100px
      width: 100px;
  }
  
  
  .content[data-x]{
      // Multiply the width of the element by the factor of data-x
      width: calc(100px * attr(data-x));
  }
  </code></pre>
  
  <p>The <a href="http://www.w3.org/TR/css3-values/#calc">draft</a> says it should work, but in my case (Chrome 31.0.1650.63 m and Firefox 25.0.1 ) it doesn't. There are two cases then: </p>
  
  <ol>
  <li>I did it wrong</li>
  <li>It is not supported yet</li>
  </ol>
  
  <p>Whats the deal?</p>
  
  <p><a href="http://jsfiddle.net/loupax/cQ8F4/"><strong>Example Fiddle</strong></a></p>