CSS – Add Color with a data attribute – attr(data-color color)

Issue

I’m trying to add color to different element with a data attribute in my css but doensn’t work …

I follow this instructions :

The attr() Function: Properties Values Collected from the Edited Document.

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);
}

Nothing appears…Am I right ?

In my chrome inspector I have this :

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

I don’t understand why… ???

Thanks for your help 🙂

Solution

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

screenshot of support table

Surprise! If nothing supports it, then it won’t work 😉

Alternative: If you know you only have a limited range of colours, 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 allows flexibility, such as defining your own colours 😉

Answered By – Niet the Dark Absol

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published