I fogli di stile di reset (css reset stylesheet) sono utilizzati per uniformare la visualizzazione di una pagina web in modo da ottenere lo stesso risultato in tutti i browser.

Come funzionano i fogli di stile di reset

Ogni browser visualizza i documenti usando una serie di regole contenute in un foglio di stile predefinito, diverso per ciascun browser, a cui si sommano poi le regole stabilite dall’autore.

Nell’esempio, mostrato nella seguente immagine, alcuni elementi della pagina sono diversi dal testo normale (per grandezza del carattere, per lo stile del testo per il margine sinistro e altro ancora) così come previsto dal foglio di stile predefinito del browser utilizzato. 

I fogli di stile di reset: gli stili predefiniti di Internet Explorer

I fogli di stile di reset: gli stili predefiniti di Internet Explorer

I browser però non utilizzano lo stesso foglio di stile predefinito e il risultato sarà che lo stesso documento è visualizzato in modo leggermente diverso in ciascun browser.

Il compito dei fogli di stile di reset è quello di azzerare le regole css predefinite in modo che i documenti siano visualizzati nello stesso modo in tutti i browser.

Il principio su cui si basa un css reset stylesheet può essere compreso meglio analizzando una delle regole del foglio di stile di reset di Eric Meyer.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

Tutti gli elementi selezionati dalla regola avranno impostate a zero le proprietà margin, padding e border. La proprietà font-size sarà impostata per tutti gli elementi allo stesso valore, il 100%, che corrisponde alla grandezza predefinita del carattere nel dispositivo in cui sarà visualizzata la pagina.

I fogli di stile di reset più conosciuti sono:

Puoi vedere la differenza tra i diversi fogli di stile di reset in una serie di esempi: Eric Meyer, Html5 Doctor, YUI CSS Reset.

Normalize.css: normalizzare l’aspetto del documento

Anche normalize.css è un foglio di stile usato per rendere coerente il documento in tutti i browser ma senza azzerare tutte le regole del foglio stile predefinito. Con Normalize gli stili predefiniti vengono sovrascritti da una serie di regole che produrranno un documento coerente in tutti i browser (demo).

Al momento normalize.css è usato da molti framework come, ad esempio, Bootstrap, Pure e HTML5 Boilerplate.