Pubblicato: 15 gen 2025
Con CSS attr() puoi utilizzare il valore di un attributo HTML nel tuo CSS. Finora 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. Il valore di questo attributo viene analizzato in un <color> utilizzando attr() e type(). Il valore di riserva è impostato su red.
<div data-foo="blue">test</div>
div {
color: attr(data-foo type(<color>), red);
}
Nell'esempio successivo, 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 carta, mentre ora puoi farlo in una sola volta.
<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 un'unità di 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, come nel comportamento precedente.