CSS - Add color with data attribute - attr (data color color)

Question

I am trying to add color to another element with the data attribute in my css, but doensn't work ...

I follow these instructions:

Attr () function: property values ​​collected from the document being edited.

W3c

HTML

<table> <tr> <td> <span class="bgborder" data-color="#e7663f"></span> <i class="fa fa-copy"></i> </td> <td> <span>Blaablaaablaaa</span> </td> </tr> </table> <table> <tr> <td> <span class="bgborder" data-color="#77c385"></span> <i class="fa fa-upload fa-fw"></i> </td> <td> <span>Blablaablaaa</span> </td> </tr> </table> 

CSS

 .bgborder { display: block; width: 5px; height: 100%; position: absolute; top: 0; background-color: attr(data-color color); } 

Can’t see anything ... Am I right?

My chrome inspector I have this:

 background-color: attr(data-color color); /!\ Invalid property value 

I do not understand why...???

Thank you for your help:)

Answer 1

It is always a good idea to read the documentation: https://developer.mozilla.org/en/docs/Web/CSS/attr

Surprise! If it does not support anything, then this will not work;)

Alternative: If you know that you have a limited range of colors, try:

 [data-color=red] {background-color:red !important} [data-color=blue] {background-color:blue !important} [data-color=zophan-blue] {background-color:#33ccff !important} 

As you can see, this provides flexibility, for example, defining your own colors;)

Answer 2

If you are talking only about colors, you can use the currentColor value as a proxy.

For instance:

HTML

 <td> <span class="bgborder" style="color: #e7663f"></span> <i class="fa fa-copy"></i> </td> 

CSS

 .bgborder { background-color: currentColor; } 

Answer 3

Currently, the CSS attr function can only be used with the content property in browsers.

See here for compatibility.

In the CSS2 specification:

Limited by content property

CSS3 will expand this proposal (proposal)

.. can be used for all properties; can return other values ​​than <string>

Answer 4

I assume you are looking for CSS variables and you can use them in Chrome, Firefox and Safari. Check browser support. Can I use

And you can see more on the video from Lea Verou