CSS Academy · Lezione

CSS Reset e Normalize

Rimuovete gli stili predefiniti incoerenti dei browser con i CSS reset e i fogli di stile normalize.

CSS Reset e Normalize è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.

Il problema: valori predefiniti incoerenti dei browser

Ogni browser dispone di un foglio di stile dell'user agent integrato, con stili predefiniti per titoli, margini, spaziature interne, liste ed elementi dei moduli. Questi valori predefiniti differiscono tra i browser e causano un aspetto incoerente.

CSS reset

Un CSS reset rimuove tutti i valori predefiniti del browser, fornendo una base vuota. Il celebre reset di Eric Meyer imposta su zero o none i margini, le spaziature interne e molte altre proprietà.

<h1>Title</h1>
<p>Paragraph with reset margins.</p>
<ul><li>Item</li><li>Item</li></ul>
<ol><li>Step</li><li>Step</li></ol>

CSS Normalize

Normalize.css adotta un approccio diverso: invece di rimuovere tutti i valori predefiniti, li rende coerenti tra i browser e corregge i bug noti, preservando al contempo valori utili come le dimensioni dei titoli.

Compromessi tra reset e normalize

Confronto:

Reset: base vuota, occorre definire tutto, più lavoro
Normalize: base coerente con i valori predefiniti utili preservati, meno codice personalizzato

Reset CSS moderno

Un diffuso reset moderno, realizzato da Josh Comeau, interviene sui valori predefiniti più rilevanti:

<h1>Reset Demo</h1><h2>Sub</h2><h3>Sub</h3><h4>Sub</h4><h5>Sub</h5><h6>Sub</h6>
<p>Body text with smooth font rendering.</p>
<picture><img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='120'><rect width='300' height='120' fill='%234f8fdb'/></svg>" alt="demo" /></picture>
<video controls></video>
<canvas></canvas>
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="20" cy="20" r="18" fill="tomato"/></svg>

Immagini come elementi block

Impostare display: block per le immagini rimuove lo spazio inline predefinito, causato da line-height, nella parte inferiore delle immagini all'interno dei contenitori:

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='160'><rect width='400' height='160' fill='%23ff6347'/></svg>" alt="block image" />

Schema per il reset delle liste

Rimuova i marcatori delle liste e il rientro quando applica stili personalizzati alle liste di navigazione o dell'interfaccia:

<ul class="nav-list"><li>Home</li><li>Shop</li><li>About</li></ul>

Reset degli elementi dei moduli

In molti browser, gli elementi dei moduli (input, button, textarea) non ereditano il font per impostazione predefinita. Una soluzione comune è:

<input type="text" placeholder="Name" />
<button>Submit</button>
<textarea placeholder="Message"></textarea>
<select><option>Choice A</option></select>

Preflight di Tailwind

Tailwind CSS include un proprio reset chiamato Preflight, basato su modern-normalize. Se utilizza Tailwind, il reset viene già applicato automaticamente.

Dove inserire il reset

Inserisca sempre il foglio di stile di reset/normalize per primo, prima di qualsiasi stile dei componenti o delle utility. L'ordine della cascata garantisce che i suoi stili sovrascrivano il reset senza conflitti di specificità.

Considerazioni sul reset personalizzato

Crei un reset minimo personalizzato in base al progetto, invece di includere un reset completo di terze parti. Includa solo le regole necessarie per mantenere ridotto il payload CSS.

<p>Base font-size and line-height set on the root element affect the whole page.</p>

Verifica rapida

Qual è la differenza fondamentale tra un CSS reset e CSS normalize?

Riepilogo

I valori di stile predefiniti dei browser non sono coerenti. I CSS reset rimuovono tutti i valori predefiniti; normalize.css li rende coerenti. I reset moderni si concentrano sulle regole più rilevanti, come box-sizing: border-box, immagini con larghezza massima e font ereditati per gli elementi dei moduli. Carichi sempre il reset per primo.

Domande Frequenti

La lezione «CSS Reset e Normalize» è gratuita?

Sì — il testo completo di «CSS Reset e Normalize» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.

Cosa imparerò in «CSS Reset e Normalize»?

Rimuovete gli stili predefiniti incoerenti dei browser con i CSS reset e i fogli di stile normalize. Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare CSS Academy?

Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «CSS Reset e Normalize»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione CSS Academy?

Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a CSS Academy