Sai come si usa attr() in CSS?

1. Introduzione

La funzione attr() in CSS consente di recuperare il valore di un attributo HTML e utilizzarlo all’interno dei fogli di stile. È particolarmente utile per inserire contenuto dinamico generato a partire dagli attributi dell’elemento, senza dover ricorrere a JavaScript.

Un esempio semplice:

a::after {
  content: " (" attr(href) ")";
}

In questo caso, ogni link mostrerà tra parentesi il proprio indirizzo URL, preso direttamente dall’attributo href.

2. Sintassi

La sintassi generale è:

attr(<nome_attributo> <tipo>? , <valore_predefinito>?)

<nome_attributo>: il nome dell’attributo HTML da cui recuperare il valore.
<tipo> (opzionale, solo nei CSS di livello 4): specifica come interpretare il valore (stringa, numero, colore, lunghezza, ecc.).
<valore_predefinito> (opzionale, solo nei CSS di livello 4): valore da usare se l’attributo non è presente o è vuoto.

Esempio con sintassi avanzata:

HTML:

<div data-width="200px">Hello attr() width 200px!</div>

CSS:

div { 
  width: attr(data-width type(<length>), 100px);
}

Qui si prova a usare data-width come valore di lunghezza, con fallback a 100px se l’attributo manca.

3. Livelli di supporto

CSS Level 2 / 3

attr() è supportato solo nella proprietà content.

Esempio funzionante:

p::before {
  content: attr(title);
}

CSS Values and Units Level 4

Specifica che attr() può essere usato in qualsiasi proprietà CSS, con tipi e valori di fallback.
Stato attuale: questa estensione della sintassi è ancora poco supportata dai browser. Al momento, solo alcune versioni sperimentali permettono di usare attr() fuori da content.

Come verificare il supporto dell'estensione sintassi attr()

@supports (x: attr(x type(*))) {
  /* Browser has modern attr() support */
  body {
    background-color: lightgreen;
  }
}

@supports not (x: attr(x type(*))) {
  /* Browser does not have modern attr() support */
  body {
    background-color: gray;
  }
}

4. Tipi di dati supportati (CSS4)

Il secondo parametro opzionale (<tipo>) può essere:

string (predefinito) – il valore viene trattato come testo.
color – il valore viene interpretato come un colore CSS.
url – il valore viene trattato come URL.
integer – numero intero.
number – numero decimale.
length, angle, time, frequency – unità fisiche o temporali.

Esempio con colore:

div {
  background-color: attr(data-color color, red);
}

5. Casi d’uso pratici

5.1 Aggiungere informazioni extra da attributi

abbr::after {
  content: " (" attr(title) ")";
}

5.2 Mostrare URL nei link stampati

@media print {
  a::after {
    content: " [" attr(href) "]";
  }
}

5.3 Usare dati personalizzati (CSS4, sperimentale)

.card {
  width: attr(data-width length, 300px);
}

6. Limitazioni

Supporto limitato fuori da content: nella pratica attuale, attr() può essere usato solo all’interno di content.
Non è dinamico come JavaScript: i valori si aggiornano solo se il DOM o gli attributi cambiano e il browser ricalcola lo stile.
Tipi e fallback: la sintassi estesa (attr(attrName type, fallback)) è ancora in fase di adozione.

7. Supporto browser (2025)

Funzionalità	Chrome	Firefox	Safari	Edge	Opera
`attr()` in `content`	✔	✔	✔	✔	✔
`attr()` in altre proprietà (CSS4)	✔	✖*	✖*	✔	✖*

*Disponibile solo con flag sperimentali in alcuni browser.

Conclusione

La funzione attr() è un potente strumento per inserire dati provenienti dagli attributi HTML direttamente nel CSS, riducendo la necessità di script. Oggi è soprattutto usata in combinazione con content, ma la specifica CSS4 promette di ampliarne notevolmente l’uso, trasformandola in una vera alternativa a certe manipolazioni JavaScript. Per un uso avanzato, occorrerà monitorare i progressi del supporto nei browser.

Techelopment

Cerca nel blog