Supponiamo che tu abbia creato alcuni stili iniziali per il tuo sito e che ti sia accorto di ripetere alcuni valori nel CSS. Stai utilizzando dodgerblue come colore principale e lo stai aggiungendo ai bordi dei pulsanti, al testo dei link, agli sfondi delle intestazioni e utilizzando uno strumento di progettazione per scegliere alcune varianti di questo blu per altre parti del sito. A questo punto, ricevi una guida di stile e il colore principale è oklch(70% 0.15 270).
Le proprietà personalizzate, o variabili CSS, ti consentono di organizzare e riutilizzare i valori nel CSS, in modo che gli stili siano più flessibili e facili da comprendere.
Creazione di proprietà
Il modo più semplice per creare una proprietà è impostare un valore su una nuova proprietà con un nome che definisci.
.card {
--base-size: 1em;
}
Tutti i nomi delle proprietà devono iniziare con due trattini. In questo modo, non puoi provare a utilizzare un nome di proprietà CSS esistente per un valore personalizzato. La specifica CSS non aggiungerà mai una proprietà che inizia con due trattini.
A questa proprietà è possibile accedere con la funzione var(). Questo esempio imposta la dimensione del carattere all'interno di un .card-title in modo che sia il doppio del valore --base-size.
.card .card-title {
font-size: calc(2 * var(--base-size));
}
Utilizzare una proprietà personalizzata
Come hai visto, puoi utilizzare il valore di una proprietà personalizzata con la funzione var(). Puoi utilizzare la funzione var() nei valori, ma non nelle media query. Sono particolarmente utili come argomenti per altre funzioni CSS.
Fallback
Cosa succede se provi a utilizzare una proprietà personalizzata per cui non è stato impostato un valore? La funzione var() accetta un secondo valore che verrà utilizzato come valore di riserva. Il valore di riserva può essere anche un'altra proprietà personalizzata con un var() nidificato.
#my-element {
background: var(
--alert-variant-background,
var(--alert-primary-background)
);
}
Valori non validi
Se una proprietà personalizzata viene risolta in un valore non valido, ad esempio un valore di 1em per la proprietà background-color, le altre dichiarazioni valide per quella proprietà nell'elemento non verranno utilizzate. Questo perché il browser non può sapere se un valore non è valido finché non scarta altre dichiarazioni durante il calcolo di un valore. Il valore utilizzato sarà invece un valore ereditato o iniziale.
.content {
background-color: blue;
}
.content.invalid {
--length: 2rem;
background-color: var(--length);
}
Nell'esempio precedente, l'elemento .invalid non avrà uno sfondo blu. Poiché background-color non eredita, il valore sarà transparent, ovvero il suo valore iniziale.
Override ed ereditarietà
Nella maggior parte dei casi, ti consigliamo di utilizzare il comportamento predefinito delle proprietà personalizzate, ovvero l'ereditarietà dei valori. Quando imposti un nuovo valore per una proprietà, l'elemento e tutti i relativi elementi secondari avranno quel valore, finché non viene sostituito da un altro valore.
Le proprietà personalizzate sono determinate dalla cascata, quindi possono essere sostituite anche da un selettore più specifico.
Più controllo con @property
Una proprietà personalizzata creata impostando un valore può essere di qualsiasi tipo ed eredita. Per un maggiore controllo su una proprietà personalizzata, puoi utilizzare la regola @property.
La proprietà --base-size creata in precedenza sarebbe equivalente a questa dichiarazione @property.
@property --base-size {
syntax: "*";
inherits: true;
initial-value: 18px;
}
Il valore syntax imposta i tipi di valori CSS validi per la proprietà. Se imposti un tipo diverso per questa proprietà, non sarà valido e verrà ripristinato il valore iniziale o un valore ereditato impostato più in alto nella cascata.
Quando crei una proprietà personalizzata utilizzando @property, puoi disattivare l'ereditarietà con inherit: false. L'override del valore di una proprietà personalizzata con l'ereditarietà disattivata lo modifica per l'elemento selezionato, ma non per i relativi elementi secondari. Ciò è spesso utile quando più selettori hanno come target lo stesso elemento.
initial-value imposta il valore della proprietà, a meno che non venga modificato in un secondo momento. A meno che la sintassi non sia *, ovvero qualsiasi tipo di CSS, @property deve impostare un initial-value. In questo modo, la proprietà avrà sempre un valore della sintassi specificata e non sarà mai non definita.
Aggiornamento delle proprietà personalizzate con JavaScript
Il valore di una proprietà personalizzata di un elemento può essere aggiornato utilizzando JavaScript, che puoi utilizzare per aggiornare dinamicamente gli stili del tuo sito.
const element = document.getElementById("my-button");
getComputedStyle(element).setPropertyValue("--color", orange);
Questo esempio aggiorna il tag di stile nell'elemento #my-button e l'ispezione in DevTools mostra:
<button id="my-button" style="--color: orange">Click me</button>
Nell'esempio precedente, puoi vedere come impostare le proprietà personalizzate accedendo ai dati archiviati negli attributi HTML personalizzati. Ogni pulsante ha un attributo data-color con un valore di un colore specifico. La proprietà personalizzata --background impostata sull'elemento body viene reimpostata sul valore di data-color sul pulsante su cui viene fatto clic.
Puoi anche utilizzare getComputedStyle(element).getPropertyValue("--variable") per ottenere il valore di una proprietà in un elemento specifico. Questa opzione può essere utile se la logica deve rispondere a un valore in cascata.