Prerequisiti: Specificità dei selettori.
Ordine delle dichiarazioni concorrenti
Ordine delle dichiarazioni concorrenti: fondamenti.
Nel semplice foglio dell’autore senza livelli e senza dichiarazioni importanti, due dichiarazioni della stessa proprietà con pari specificità vengono risolte dall’ordine: prevale quella che compare dopo. L’ordine conta soltanto quando i criteri precedenti sono equivalenti. Una regola di classe scritta all’inizio può quindi prevalere su una regola di tipo scritta alla fine.
Come funziona: ordine delle dichiarazioni concorrenti
Ordine delle dichiarazioni concorrenti: comportamento nel browser.
Il confronto avviene proprietà per proprietà. Due regole p possono contribuire insieme: la prima imposta color e line-height, la seconda cambia solo color. L’interlinea della prima non scompare. Anche due dichiarazioni della stessa proprietà dentro un unico blocco vengono confrontate secondo validità e cascata. Un valore non valido non diventa vincente soltanto perché è l’ultimo.
Scelte di utilizzo e limiti
Ordine delle dichiarazioni concorrenti: progetto e verifica.
Con più fogli esterni, la posizione dei link nel documento contribuisce all’ordine dei fogli dell’autore, indipendentemente da quale download finisce prima. Non usare la velocità di caricamento come modello del conflitto. Prima di riordinare un foglio controlla se il cambiamento influisce su altri componenti.
Esempio commentato
Ordine delle dichiarazioni concorrenti: 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>Ordine delle dichiarazioni</title>
<link rel="stylesheet" href="stile.css">
</head>
<body>
<p>Due regole possono contribuire allo stesso elemento.</p>
</body>
</html>
File stile.css
p { color: navy; line-height: 1.6; }
p { color: darkred; }
Risultato nel browser
Il colore finale è darkred; line-height resta 1.6 perché la seconda regola non lo ridefinisce.
| Proprietà | Valore nell’esempio | Significato |
|---|---|---|
color | navy | Colore del testo; non imposta lo sfondo. |
line-height | 1.6 | Altezza della riga; un numero senza unità è un fattore. |
LABORATORIO
Sperimentare: Ordine delle dichiarazioni concorrenti
Il colore finale è darkred; line-height resta 1.6 perché la seconda regola non lo ridefinisce.
Obiettivo: Comprendere e applicare ordine delle dichiarazioni concorrenti 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: Scambia l’ordine delle due regole senza modificarne il contenuto.
- 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.
Il colore diventa navy; line-height resta 1.6. Il confronto riguarda la proprietà concorrente.
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 | Il colore diventa navy; line-height resta 1.6. Il confronto riguarda la proprietà concorrente. |
| 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
Mantieni il colore navy e aggiungi in una regola successiva soltanto font-size: 22px.
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: navy; line-height: 1.6; }
p { font-size: 22px; }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
Ordine delle dichiarazioni concorrenti: interpretazione e applicazione.
Seleziona una domanda per visualizzare la risposta e confrontarla con la tua.
1. Con pari criteri di cascata e specificità, quale dichiarazione prevale? ▾
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.