Come effettuare il reset degli stili CSS

L’utilizzo dei CSS nelle pagine web ormai è una cosa normale.  Ormai anche il webmaster ai primi stadi utilizza i CSS per separare l’architettura del sito dall’aspetto grafico.
I CSS aiutano molto,  tanto che se un sito è fatto bene per fargli cambiare grafica basta intervenire solo su di esso senza toccare una riga di HTML.

Purtroppo però non è tutto oro ciò che luccica…
In un mondo perfetto le specifiche dei CSS sarebbero interpretate allo perfettamente allo stesso modo da tutti i browser in circolazione. In un mondo perfetto però… In questo ognuno fa più o meno quello che gli pare.

Come ovviare in parte  a questo problema? Utilizzando i CSS Reset!

Cosa sono i CSS reset

I CSS reset sono delle semplici regole iniziali che cercano di livellare le differenze fra i vari browser, rimuovendo anche eventuali bug o specifiche errate, in modo che tutti i stili successivi vengano interpretati alla stessa maniera.
Questo intervenendo solamente nel CSS! Senza javascript, codici condizionali o altri hack più o meno validi.

Inoltre tali CSS reset possono essere ovviamente riutilizzati per ogni sito, in modo da avere un punto di partenza comune ovunque, e ciò semplifica notevolmente il lavoro, risparmiando tempo e quindi denaro…

Ma cominciamo a descrivere i vari metodi che ho trovato in giro per la rete:

Il più banale possibile

*{padding:0; margin:0; border:0; outline:0;}

Prima o poi tutti ci arrivano da soli: azzerare margini e padding di tutti gli elementi in un colpo!
Spulciando il CSS a diversi siti si scopre che è un metodo molto diffuso.
L’unica cosa che può creare un po’ di curiosità è l’outline. A che serve? Vi rimando ad un mio post precedente  che parla di come rimuovere certi i bordi tratteggiati 😛

Vantaggi: Semplice e veloce
Svantaggi: Fin troppo banale 🙂

Metodo Mayerweb

Il metodo di mayerweb.com, come si può notare più sotto, è un tantino più complesso!
Innanzitutto al momento questo è il primo metodo che trovate cercando CSS Reset in google. Questo non vuol dire certo che sia il migliore, ma sicuramente è il più usato.

Come vedete questo non utilizza l’asterisco ma specifica ogni singolo tag.

/* v1.0 | 20080212 */

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, font, 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 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Ecco la versione compressa:

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,font,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{margin:0;padding:0;border:0;outline:0; font-size:100%;vertical-align:baseline;background:transparent;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
:focus{outline:0;}
ins{text-decoration:none;}
del{text-decoration:line-through;}
table{border-collapse:collapse;border-spacing:0;}

Vantaggi:  Molto completo, semplice e molto usato
Svantaggi: Bisogna specificare in seguito ogni  dimensione

Metodo Yahoo:

Anche Yahoo ha il suo CSS Reset e come vedete è molto simile al precedente, ma tralascia alcuni tag

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, form,fieldset,input,textarea,p,blockquote,th,td {
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img {
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}

e la sua versione compresa:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form, fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;}

Vantaggi:  Molto completo, semplice e soprattutto testato da Yahoo :-). Inoltre può essere completato con YUI CSS Base
Svantaggi: Gli stessi di Mayer

Metodo Tripoli

Per finire parliamo del titanico Tripoli! Per prima cosa ricaviamo le sue specifiche direttamente dalla home page:

• crea degli standar generici per i tag HTML 4
• resetta e ricostruisce tutti i default per ogni browser per una massima compatibilità
• intercetta i tag deprecati nell’HTML 4 e le disabilita via CSS
• separa il contenuto dal layout,  consentendo semplici modifiche per un design dinamico
• aumenta la leggibilità e la tipografica web
• aiuta coloro che hanno poca dimestichezza con i CSS a scrivere del buon HTML
• aumenta l’usabilità e l’impatto visivo dei controlli dei form
• abbraccia le linee guida del W3C e segue le regole tipografiche
• esistono  delle estensioni che facilitano di molto il lavoro

Poi scendiamo più nello specifico:

• aggiunge il white-space in tutti i tag
• disabilita l'<hr>
• imposta le dimensioni del testo in modo che 1em sia uguale a 10px
• disattivazione mirata degli elementi deprecati come  <marquee> , <blink> e <nobr>
• inclusione degli elementi deprecati come  <listing> , <xmp> e <plaintext>
• disattivazione del tag  <font> e di altri elementi deprecati
• …e molto altro ancora!

Da menzionare anche i suoi plugin associati:

• Visual, che aggiunge degli effetti visivi basilari (bordi alle tabelle, colorazione del testo di certi font, ecc)
• Type, che aggiunge le classi .alt (uno stile alternativo) e .dquo (una indentazione a sinistra)
• Negative, che inverte i colori per quei siti dallo sfondo nero.

Per vedere Tripoli ed i suoi plugin  in azione andate alla sua pagina di dimostrazione, mentre per il codice completo vi rimando alla pagina di documentazione, poiché sono vari file tra cui uno specifico per ie.

/*
 *   Tripoli is a generic CSS standard for HTML rendering.
 *   Copyright (C) 2007-2008 David Hellsing
 *
 *   http://devkick.com/lab/tripoli/
 *
 *   You should have received a copy of the GNU General Public License
 *   along with this program.  If not, see .
**
_______________________________
RESET */
*{text-decoration:none;font-size:1em;outline:none;margin:0;padding:0}code,kbd,samp,pre,tt,var,textarea,input,select,isindex,listing,xmp,plaintext{font:inherit;white-space:normal}a,img,a img,iframe,form,abbr,acronym,object,applet,table,a abbr,a acronym{border-width:0}dfn,i,cite,var,address,em{font-style:normal}th,b,strong,h1,h2,h3,h4,h5,h6,dt{font-weight:400}caption,th,td{text-align:left}html{background:#FFF;color:#000;line-height:1;font-family:arial, sans-serif}/* \*/html{font-family:sans-serif}/* */q{quotes:"\201C""\201D""\2018""\2019"}ul,ol,dir,menu{list-style:none}sub,sup{vertical-align:baseline}a{color:inherit}/*
_______________________________
DISABLE DEPRECATED HTML */
font,basefont{color:inherit;font:inherit;font-size:100%}center,*[align]{text-align:inherit}s,strike,u{text-decoration:inherit}img{border:none;margin:0}ol{list-style-type:decimal}body{background-color:transparent}tr,th,td{width:auto;height:auto;background-color:transparent;vertical-align:inherit;border:none}table[border],.content table[border]{border-collapse:separate;border-spacing:0}nobr{white-space:normal}marquee{overflow:visible;-moz-binding:none}blink{text-decoration:none}/*
_______________________________
GENERAL */
html{font-size:125%}body{font-size:50%}a{text-decoration:underline}strong,th,thead td,h1,h2,h3,h4,h5,h6,dt{font-weight:700}cite,em,dfn{font-style:italic}code,kbd,samp,pre,tt,var,input[type='text'],input[type='password'],textarea{font-size:100%;font-family:mono-space,monospace}pre{white-space:pre}pre *{font-size:100%;white-space:pre}del{text-decoration:line-through}ins,dfn{border-bottom:1px solid #000}small,sup,sub{font-size:85%}big{font-size:125%;line-height:80%}abbr,acronym{text-transform:uppercase;font-size:85%;letter-spacing:.1em}abbr[title],acronym[title],dfn[title]{cursor:help;border-bottom:1px dotted #000}sup{vertical-align:super}sub{vertical-align:sub}blockquote{padding-left:2.2em}hr{display:none/* We will re-reset it later for content */}:lang(af),:lang(nl),:lang(pl){quotes:'\201E' '\201D' '\201A' '\2019'}:lang(bg),:lang(cs),:lang(de),:lang(is),:lang(lt),:lang(sk),:lang(sr),:lang(ro){quotes:'\201E' '\201C' '\201A' '\2018'}:lang(da),:lang(hr){quotes:'\00BB' '\00AB' '\203A' '\2039'}:lang(el),:lang(es),:lang(sq),:lang(tr){quotes:'\00AB' '\00BB' '\2039' '\203A'}:lang(en-GB){quotes:'\2018' '\2019' '\201C' '\201D'}:lang(fi),:lang(sv){quotes:'\201D' '\201D' '\2019' '\2019'}:lang(fr){quotes:'\ab\2005' '\2005\bb' '\2039\2005' '\2005\203a'}*[lang|='en'] q:before{content:'\201C'}*[lang|='en'] q:after{content:'\201D'}*[lang|='en'] q q:before{content:'\2018'}*[lang|='en'] q q:after{content:'\2019'}input,select,button{cursor:pointer}input[type='text'],input[type='password']{cursor:text}input[type='hidden']{display:none}/*
_______________________________
CONTENT */
.content{font-size:1.2em;line-height:1.6em}.content h1{font-size:1.6em;line-height:1;margin:1em 0 .5em}.content h2{font-size:1.5em;line-height:1;margin:1.07em 0 .535em}.content h3{font-size:1.4em;line-height:1;margin:1.14em 0 .57em}.content h4{font-size:1.3em;line-height:1;margin:1.23em 0 .615em}.content h5{font-size:1.2em;line-height:1;margin:1.33em 0 .67em}.content h6{font-size:1em;line-height:1;margin:1.6em 0 .8em}.content hr{display:block;background:#000;color:#000;width:100%;height:1px;border:none}.content ul{list-style:disc outside}.content ol{list-style:decimal outside}.content table{border-collapse:collapse}.content hr,.content p,.content ul,.content ol,.content dl,.content pre,.content address,.content table,.content form{margin-bottom:1.6em}.content p+p{margin-top:-.8em}.content fieldset{margin:1.6em 0;padding:1.6em}/* \*/.content legend{padding-left:.8em;padding-right:.8em}/* *//* for Opera 8 */@media all and min-width 0px{.content legend{margin-bottom:1.6em}.content fieldset{margin-top:0}.content[class^='content'] fieldset{margin-top:1.6em}}.content fieldset>*:first-child{margin-top:0}.content textarea,.content input[type='text']{padding:.1em .2em}.content input{padding:.2em .1em}.content select{padding:.2em .1em 0}.content select[multiple]{margin-bottom:.8em}.content option{padding:0 .4em .1em}.content button{padding:.3em .5em}.content input[type='radio']{position:relative;bottom:-.2em}.content dt{margin-top:.8em;margin-bottom:.4em}.content ul,.content ol{margin-left:2.2em}.content caption,.content form div{padding-bottom:.8em}.content ul ul,content ol ul,.content ul ol,content ol ol{margin-bottom:0}/*
_______________________________
VISUAL PLUG */
blockquote{color:#666}blockquote > *:first-child:before /* Tripoli bonus: pure CSS blockquote */{content:"\201C";font-size:2.5em;margin-left:-.62em;font-family:georgia,serif;padding-right:.2em;color:#aaa;line-height:0}abbr[title],acronym[title],dfn[title]{border-bottom:1px solid #ccc}ins,dfn{border-bottom-color:#666}del{color:#666}fieldset{border-color:#ccc}textarea,input[type='text'],input[type='password'],select{border:1px solid #ccc;background:#fff}fieldset{border:1px solid #ccc}textarea:hover,input[type='text']:hover,input[type='password']:hover,select:hover{border-color:#aaa}textarea:focus,input[type='text']:focus,input[type='password']:focus,select:focus{outline:2px solid #e4e4e4;border-color:#888}.content hr{background:#aaa;color:#aaa}.content table{border-top:1px solid #ccc;border-left:1px solid #ccc}.content th,.content td{border-bottom:1px solid #ddd;border-right:1px solid #ccc}.content th,.content td{padding:.8em}a:link{color:#36c}a:visited{color:#99c}a:hover,code,pre{color:#c33}a:active,.a:focus{color:#000}/*
_______________________________
TYPE PLUG */
.alt{font-family:"baskerville italic","Warnock Pro","Goudy Old Style","Palatino","palatino linotype","Book Antiqua",Georgia, serif;font-style:italic;font-weight:400}.dquo{margin-left:-.55em}/*
_______________________________
END */

Codice specifico per ie, da inserire in un commento condizionale:

textarea{white-space: pre;}
.content legend{margin-bottom:1.6em;}
.content fieldset{padding-top:0;}
sup,sub{font-size:100%;}
.content legend:first-child{margin-top:0;}
a abbr,a acronym{text-decoration:underline;}
* html .content blockquote *{margin:.8em 0;}
* html input{cursor:expression(this.type=='text' || this.type=='password' ? 'text' : 'pointer');display:expression(this.type=='hidden' ? 'none' : 'inline');}
* html .content textarea,* html .content input,.content input[type='submit'],.content input[type='button']{padding:0;}
/*
 *   @notes
 *   To use png as background images in IE6, use this filter: (don't forget to hack out IE5)
 *     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="image.png",sizingMethod="scale");
 *   To use transparency IE ( and Opera<9 ), use this filter:
 *     filter:alpha(opacity=[0-100]);
 */

Vantaggi:  Esauriente, completo e veramente ben fatto
Svantaggi: Andando a toccare tutto così in profondo forse fa più cose di quelle che effettivamente servirebbero 🙂

Conclusioni

Questi sono solo alcuni CSS reset che la rete ci fornisce. Si passa dal primo di una sola riga all’ultimo di diversi kb.

Qual’è il migliore? Quale utilizzare? La risposta non è semplice e non è ovvia. Dipende da ogni singolo caso.

Conoscete altri metodi o ritenete quest’ultimi inutili?