Prerequisiti: Ereditarietà delle proprietà.
Valori globali di ripristino
Valori globali di ripristino: fondamenti.
inherit richiede il valore calcolato del genitore. È utile anche su proprietà normalmente non ereditate, se vuoi un comportamento esplicito. initial richiede invece il valore iniziale definito dalla proprietà in CSS. Quel valore non coincide necessariamente con l’aspetto che il foglio del browser assegna a un elemento: per esempio il grassetto di un titolo può derivare da una regola del browser, non dal valore iniziale di font-weight.
Come funziona: valori globali di ripristino
Valori globali di ripristino: comportamento nel browser.
unset sceglie inherit per una proprietà ereditata e initial per una proprietà non ereditata. revert torna al risultato che la cascata avrebbe senza le dichiarazioni del livello di origine interessato. Nel caso dell’autore permette di far riemergere stili dell’utente o del browser, quando applicabili, invece di forzare il valore iniziale. Non è un comando generico per tornare alla riga CSS precedente.
Scelte di utilizzo e limiti
Valori globali di ripristino: progetto e verifica.
Scegli la parola chiave chiedendoti se vuoi seguire il genitore, tornare al valore iniziale della proprietà oppure lasciare spazio agli stili di un’altra origine. La stessa parola può produrre risultati diversi su proprietà differenti. Prova una sola proprietà per volta e controlla Computed per vedere il valore calcolato.
Esempio commentato
Valori globali di ripristino: HTML e CSS.
Esempio con stile esterno. Il documento index.html collega il file stile.css mediante il tag link nella head.
Documento HTML completo
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>inherit, initial, unset e revert</title>
<link rel="stylesheet" href="stile.css">
</head>
<body>
<section class="scheda"><h2>Un titolo</h2><p>Un paragrafo.</p></section>
</body>
</html>
File stile.css
.scheda { color: navy; }
h2 { font-weight: initial; color: inherit; }
Risultato nel browser
Il titolo eredita navy dalla sezione. font-weight: initial imposta il valore iniziale normal, invece del tipico grassetto del browser.
| Proprietà | Valore nell’esempio | Significato |
|---|---|---|
color | navy | Colore del testo; non imposta lo sfondo. |
font-weight | initial | Peso del carattere. |
LABORATORIO
Sperimentare: Valori globali di ripristino
Il titolo eredita navy dalla sezione. font-weight: initial imposta il valore iniziale normal, invece del tipico grassetto del browser.
Obiettivo: Comprendere e applicare valori globali di ripristino attraverso esempi e verifica nel browser.
Software: editor di testo e browser con DevTools; Tempo: 15 minuti.
Preparazione: scarica l’esempio completo e estrai lo ZIP. Apri index.html nel browser. Puoi anche aprire l’esempio online.
Apri il file stile.css nell’editor. Le lezioni iniziali usano un documento già preparato per concentrarsi sulle regole; il collegamento esterno e lo stile interno vengono spiegati nelle lezioni dedicate. Le modifiche nei DevTools sono normalmente temporanee.
Procedura passo passo
- Osserva il punto di partenza: apri l’esempio, confronta markup e regole e individua il selettore o il contesto di layout rilevante.
- Esegui la modifica: Cambia solo font-weight: initial in font-weight: revert.
- Salva e ricarica la pagina dopo ogni modifica. Confronta gli elementi che devono cambiare con quelli che devono restare invariati.
- Ispeziona il risultato: usa il menu Ispeziona e controlla Styles/Regole e Computed/Calcolato. Per layout Flex o Grid attiva l’overlay, se disponibile.
- Annota causa ed effetto: scrivi il valore o la struttura iniziale, il cambiamento e il risultato. Ripristina il punto di partenza prima dell’esercizio autonomo.
In un browser con il normale foglio predefinito il titolo torna grassetto, perché può riemergere lo stile del browser.
Il font e alcuni dettagli dell’interfaccia dipendono dal browser. Valuta la proprietà e il comportamento descritti, non una corrispondenza perfetta con uno screenshot.
Verifica del risultato
| Controllo | Criterio |
|---|---|
| Effetto specifico | In un browser con il normale foglio predefinito il titolo torna grassetto, perché può riemergere lo stile del browser. |
| Corrispondenza del codice | Individua la dichiarazione o la relazione HTML responsabile della differenza. |
| Persistenza | Riporta la modifica nel file e verifica dopo un ricaricamento. |
| Spiegazione | Motiva la differenza senza affidarti soltanto a uno screenshot. |
Esercizio autonomo
Fai seguire esplicitamente al paragrafo il colore del genitore usando unset.
Consegna: file modificati e una breve spiegazione di selettore, proprietà e risultato. Criterio di riuscita: il cambiamento richiesto funziona dopo il ricaricamento e non taglia informazioni indispensabili.
p { color: unset; }Integra la soluzione nel punto pertinente: modifica o sostituisci le regole coinvolte invece di accumulare dichiarazioni contraddittorie. Le altre parti dell’esempio restano necessarie.
Verifica dei concetti
Valori globali di ripristino: interpretazione e applicazione.
Seleziona una domanda per visualizzare la risposta e confrontarla con la tua.
1. Che cosa fa unset su color, proprietà ereditata? ▾
2. Come si interpreta il codice dell’esempio? ▾
3. Quale risultato permette di verificare la modifica del laboratorio? ▾
4. Quale attenzione evita un’interpretazione sbagliata? ▾
Riferimento tecnico: MDN — riferimento CSS. Cerca le proprietà o i selettori utilizzati nell’esempio.