title: CSS - Add Color with a data attribute - attr(data-color color)
body: <p>I'm trying to add color to different element with a data attribute in my css but doensn't work ...</p>
  
  <p>I follow this instructions :</p>
  
  <p><a href="http://oxygenxml.com/doc/ug-oxygen/index.html#topics/dg-attr-function.html" rel="noreferrer">The attr() Function: Properties Values Collected from the Edited Document.</a></p>
  
  <p><a href="http://www.w3.org/TR/css3-values/#attr" rel="noreferrer">W3C</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;span class="bgborder" data-color="#e7663f"&gt;&lt;/span&gt;
              &lt;i class="fa fa-copy"&gt;&lt;/i&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;span&gt;Blaablaaablaaa&lt;/span&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;table&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;span class="bgborder" data-color="#77c385"&gt;&lt;/span&gt;
              &lt;i class="fa fa-upload fa-fw"&gt;&lt;/i&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;span&gt;Blablaablaaa&lt;/span&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.bgborder {
      display: block;
      width: 5px;
      height: 100%;
      position: absolute;
      top: 0;
      background-color: attr(data-color color);
  }
  </code></pre>
  
  <p>Nothing appears...Am I right ?</p>
  
  <p>In my chrome inspector I have this :</p>
  
  <pre><code>background-color: attr(data-color color); 
  /!\ Invalid property value
  </code></pre>
  
  <p>I don't understand why... ???</p>
  
  <p>Thanks for your help :)</p>