Pubblicata: 15 gennaio 2025
La funzione attr() riprogettata
Con CSS attr() puoi utilizzare il valore di un attributo HTML nel codice CSS. Fino ad ora, attr() funzionava solo all'interno della proprietà content degli pseudo-elementi e poteva analizzare i valori solo in un <string> CSS.
La funzione attr() riprogettata, disponibile a partire da Chrome 133, sblocca più funzionalità. Ora puoi utilizzare attr() con qualsiasi proprietà CSS, incluse le proprietà personalizzate, e può analizzare i valori in tipi di dati diversi da <string>.
Esempi
Nell'esempio seguente il valore della proprietà color per div utilizza il valore dell'attributo data-color. Questo valore dell'attributo viene analizzato in un <color> utilizzando attr() e type(). Il valore alternativo è impostato su red.
<div data-foo="blue">test</div>
div {
color: attr(data-foo type(<color>), red);
}
Nell'esempio seguente, la proprietà view-transition-name è determinata dall'attributo id dell'elemento. L'attributo viene analizzato in un <custom-ident>, che è il tipo richiesto per view-transition-name. Senza attr() dovevi dichiarare un view-transition-name per ogni scheda, mentre ora puoi farlo in un'unica operazione.
<div class="cards">
<div class="card" id="card-1"></div>
<div class="card" id="card-2"></div>
<div class="card" id="card-3"></div>
<div class="card" id="card-4"></div>
</div>
.card {
view-transition-name: attr(id type(<custom-ident>), none); /* card-1, card-2, card-3, etc. */
view-transition-class: card;
}
Puoi anche analizzare i valori in una lunghezza impostando il tipo su qualsiasi identificatore che corrisponda a una unità di misura della dimensione CSS o al carattere %. Nell'esempio seguente, l'attributo data-size viene analizzato in un valore in pixel.
<div data-size="10">test</div>
div {
font-size: attr(data-size px);
}
Quando utilizzi attr() senza alcun tipo, l'attributo viene analizzato in una stringa CSS, che corrisponde al comportamento precedente.