Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

CSS: variabili

Immagina di aver usato lo stesso colore blu in 15 punti diversi del tuo CSS. Se un giorno vuoi cambiarlo, devi trovarli e modificarli tutti. Le variabili CSS (dette anche custom properties) risolvono questo problema: definisci il valore una volta sola, e lo richiami ovunque serva.

stile.css
:root {
    --colore-principale: navy;
    --colore-sfondo: white;
    --spaziatura: 20px;
}

.menu a {
    color: var(--colore-principale);
}

.intestazione {
    background-color: var(--colore-sfondo);
    padding: var(--spaziatura);
}

:root è un selettore speciale che punta all’elemento radice del documento (di fatto, l’intera pagina): definire le variabili lì le rende disponibili ovunque. Il nome deve iniziare sempre con --, e si richiama con var(--nome-variabile).

Il vantaggio di usare le variabili CSS

:root {
    --colore-testo: black;
    --colore-sfondo: white;
}

body {
    color: var(--colore-testo);
    background-color: var(--colore-sfondo);
}

.menu {
    background-color: var(--colore-sfondo);
}

Se ridefinisci --colore-sfondo e --colore-testo in un solo punto, ogni regola che li usa cambia di conseguenza. Questo è esattamente il meccanismo che si usa ad esempio quando si vogliono fornire più temi (es: chiaro/scuro) per la stessa pagina.

Temi CSS

L’idea: definiamo due gruppi di variabili — uno per il tema chiaro (il default) e uno per il tema scuro — e usiamo un <input type="checkbox"> nascosto come “interruttore”, sfruttando la pseudo-classe :checked.

<body>
    <input type="checkbox" id="tema-scuro" class="interruttore-tema">
    <label for="tema-scuro">Tema scuro</label>

    <header class="intestazione">
        <h1>Il mio sito</h1>
    </header>
</body>

:root {
    --colore-testo: black;
    --colore-sfondo: white;
}

/* Quando la checkbox è selezionata, ridefiniamo le variabili su :root */
body:has(.interruttore-tema:checked) {
    --colore-testo: white;
    --colore-sfondo: black;
}

body {
    color: var(--colore-testo);
    background-color: var(--colore-sfondo);
    transition: color 0.3s, background-color 0.3s;
}

Tip

il codice CSS transition: color 0.3s, background-color 0.3s rappresenta una animazione CSS e rende il cambio di tema una dissolvenza morbida invece di uno scatto secco.

Non è necessario, ma secondo me è molto carino ☺️

Il punto chiave è il selettore body:has(.interruttore-tema:checked): la pseudo-classe :checked seleziona la checkbox solo quando è spuntata, la funzione :has() è… autoesplicativa ☺️

Note

Questa tecnica è totalmente “CSS-only”: non serve una riga di JavaScript. Più avanti vedremo come rifare lo stesso identico interruttore usando JS con addEventListener. In questo modo spero di rendere evidente dove può arrivare il CSS e dove invece serve un linguaggio di programmazione web lato client!

Nascondere la checkbox, mostrare solo la label

Nell’esempio sopra la checkbox è visibile e “brutta”. Di solito si nasconde e si stilizza solo la <label> come se fosse un pulsante:

.interruttore-tema {
    position: absolute;
    opacity: 0;
    /* la checkbox esiste ancora e riceve i click, ma è invisibile */
}

.interruttore-tema + label {
    cursor: pointer;
    padding: 8px 12px;
    border: 1px solid var(--colore-testo);
    border-radius: 4px;
}

+ è il combinatore “fratello immediatamente successivo”: seleziona la <label> che viene subito dopo la checkbox nell’HTML.

Esercizi

Esercizio w231

Definisci in :root tre variabili: --colore-titolo, --colore-sfondo, --spaziatura-generale. Usale per colorare un <h1>, lo sfondo del <body>, e il padding di un <div> a scelta.

Esercizio w232

Prendi il codice dell’esempio “Tema chiaro/scuro con solo CSS” e aggiungi una terza variabile, --colore-bordo, con un valore diverso nei due temi. Usala per colorare il border dell’header.

Esercizio w233

Nel seguente CSS il tema scuro non si attiva mai: manca la pseudo-classe :checked nel selettore. Correggi il problema:

:root {
    --colore-sfondo: white;
}

.interruttore-tema ~ * {
    --colore-sfondo: #222;
}

body {
    background-color: var(--colore-sfondo);
}

Esercizio w234

Nella pagina della scheda prodotto (Progetto 1), definisci almeno 3 variabili CSS in :root (colore principale, colore di sfondo, colore del testo) e usale per stilizzare header, sfondo e testo della pagina — senza ancora aggiungere il toggle tema, solo le variabili.