CSS - Aggiungere colore con un attributo di dati - attr (colore dei dati-colore)

Sto cercando di aggiungere colore a un elemento diverso con un attributo di dati nel mio css ma il lavoro doensn't ...CSS - Aggiungere colore con un attributo di dati - attr (colore dei dati-colore)

seguo queste istruzioni:

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>

appare

CSS

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

Niente ... Ho ragione?

Nel mio cromo ispettore ho questo:

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

Non capisco perché ... ???

Grazie per il vostro aiuto :)

fonte

2014-12-17 Zagloo

sempre una buona idea di leggere la documentazione: https://developer.mozilla.org/en/docs/Web/CSS/attr

screenshot of support table

Sorpresa! Se non lo supporta, allora non funzionerà;)

alternativa: se sai di avere solo una gamma limitata di colori, provare:

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

Come si può vedere, questo permette la flessibilità, come ad come definizione dei tuoi colori;)

fonte

2014-12-17 15:47:50

s *** ... è per male ... altra possibilità di farlo? con meno ? (ma senza jquery) – Zagloo

Vuoi dire oltre a 'style =" background-color: # 123456; "'? –

@Zagloo: con Meno è possibile utilizzare i loop per evitare la ripetizione del codice, ma il CSS compilato dovrebbe comunque essere allo stesso modo di cui sopra. – Harry

Attualmente, la funzione CSS attr può essere utilizzata solo con la proprietà content nei browser

See here for compatibility

Per le specifiche CSS2:

Limitato alla proprietà contenuto

CSS3 estenderà questa (proposta)

..can essere utilizzato su tutte le proprietà; può restituire valori diversi <string>

fonte

2014-12-17 15:47:00 SW4

Se stai parlando solo di colori, puoi usare il valore currentColor come proxy.

Ad esempio:

HTML

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

CSS

.bgborder { 
    background-color: currentColor; 
}

fonte

2017-05-23 12:14:20 Treeskar

Immagino che si sta cercando è CSS variables e si può utilizzare a Chrome, Firefox e Safari. Controllare il supporto del browser a Can I use

E può vedere di più al video da Lea Verou

fonte

2017-09-04 20:43:53

CSS - Aggiungere colore con un attributo di dati - attr (colore dei dati-colore)

risposta

Problemi correlati