Utilizzare un valore di default con le variabili CSS

di Stefano Mostarda, in HTML5, CSS3,

Quando utilizziamo una variabile CSS per impostare il valore di una proprietà, potremmo usare una variabile che non è definita nel nostro file. Per evitare che la proprietà CSS rimanga senza valore, possiamo definire un valore di fallback.

.myclass {
  padding: var(--my-var, 10px);
}

In questo esempio, se la variabie my-var non è definita, viene usato il valore 10px per impostare il padding.
Possiamo anche impostare il fallback a un'altra variabile CSS e utilizare più valori di fallback che vengono processati in sequenza.

.myclass {
  padding: var(--my-var-1, --my-var-2, 10px);
}

In questo caso, usiamo la variabile my-var-1. Se la variable non esiste viene usata la variabile my-var-2 e nel caso nemmeno questa esista viene usato il valore 10px.

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi