CSS Reset: il tuo stile uguale su tutti i browser

Il classico problema del webdesigner è mantenere la coerenza del proprio design sulla moltitudine di browser in circolazione: il rendering della pagina viene più che altro influenzato dalle impostazioni di default del programma, per questo è nata l’esigenza della tecnica denominata CSS Reset.

Solitamente basta inserire questa riga al nostro CSS in primissima posizione per risolvere la maggior parte dei problemi:

* {margin: 0;padding: 0;}

basta questa riga per dire al browser di azzerare i valori di margine esterno e interno di tutti gli elementi HTML.
Questa semplice ma radicale soluzione di CSS reset ha comunque qualche effetto collaterale come un discreto peso sull’engine del browser (ma ne terrei conto solo in siti veramente pregni di elementi HTML) e l’eliminazione di ogni stile di default.
Per cui eccovi altre 2 soluzioni più complete ed elaborate.

La prima è un CSS da anteporre al vostro elaborato da Eric Meyer, che risolve tutti i problemi conservando i vari stili di default e non pesando troppo sul rendering della pagina.

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,
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-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need ‘cellspacing="0"’ in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

Altrimenti c’è il collauditissimo YUI Reset CSS, il foglio di stile utilizzato da Yahoo! nel suo framework, rilasciato sotto licenza BSD e quindi libero per ogni tipo di utilizzo finchè si mantiene la nota di copyright in testa e la proprietà intellettuale dell’autore.
Questo file, importato prima del nostro CSS, normalizza il rendering di default di tutti gli elementi HTML sui maggiori browser nelle loro versioni più diffuse, settando per esempio margin e padding a zero, tuti i caratteri alla medesima grandezza, italic e bold a normale e il list-style a none.

Ecco il codice del file:

/*
Copyright (c) 2008, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.5.0
*/
html{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,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;}
li{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;font-variant:normal;}
/* to preserve line-height and selector appearance */
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
/*to enable resizing for IE*/
input,textarea,select{*font-size:100%;}
/*because legend doesn’t inherit in IE */
legend{color:#000;}

Per vedere un esempio del suo utilizzo date un’occhiata a questa pagina, andando poi a sbirciarne il codice sorgente.