Aggiornamento della funzione CSS attr()

Pubblicata: 15 gennaio 2025

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.

Scopri di più

Scopri di più su attr() nella specifica e su MDN.