Proprieta Personalizzate E Var

Prerequisiti: gli argomenti delle unità precedenti.

Una proprietà personalizzata ha un nome che inizia con due trattini, per esempio --colore-accento. Si dichiara dentro una regola CSS e si usa mediante var(--colore-accento). :root seleziona l’elemento radice, che in un documento HTML è html: è un posto comune per definire valori condivisi. Non si tratta di una sostituzione testuale eseguita prima del browser: le proprietà personalizzate partecipano alla cascata e, nella forma ordinaria qui usata, si ereditano.

Un componente può ridefinire una proprietà personalizzata e fornire il nuovo valore ai propri discendenti. Ciò permette varianti senza riscrivere ogni dichiarazione di colore. I nomi sono sensibili a maiuscole e minuscole: --Accento e --accento non indicano la stessa proprietà. Nomi che descrivono funzione e ruolo, come --colore-bordo, rendono più comprensibile il foglio rispetto a nomi numerici scollegati dal significato.

var(--accento, #174a7e) offre un fallback quando la proprietà personalizzata non è disponibile o ha un valore garantito invalido. Non è però una verifica generica del tipo: se --accento è definita come 20px, il fallback non converte quel valore in un colore valido. Una dichiarazione color che riceve quella lunghezza diventa invalida al momento del calcolo. Non assumere che in questo caso riemerga automaticamente una precedente dichiarazione color.

Esempio con stile esterno. Il documento index.html collega il file stile.css mediante il tag link nella head.

<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Proprietà personalizzate e var()</title>
<link rel="stylesheet" href="stile.css">
</head>
<body>
<section class="scheda"><h1>Stile condiviso</h1><p>Questa scheda usa l’accento radice.</p></section>
<section class="scheda variante"><h2>Variante</h2><p>Questa scheda ridefinisce l’accento.</p></section>
</body>
</html>

:root {
  --accento: #174a7e;
  --spazio: 1rem;
}
.scheda {
  color: var(--accento, #174a7e);
  border: 2px solid var(--accento);
  padding: var(--spazio);
  margin-bottom: var(--spazio);
}
.variante { --accento: #8b1e3f; }

Il bordo e il testo leggono lo stesso valore. La seconda scheda cambia accento tramite una sola proprietà personalizzata locale.

.variante-verde {
  --accento: #27683b;
}

Seleziona una domanda per visualizzare la risposta e confrontarla con la tua.

Riferimento tecnico: MDN — riferimento CSS. Cerca le proprietà o i selettori utilizzati nell’esempio.