Uno dei problemi più diffusi tra i Web designer è quello di garantire uguale visualizzazione delle pagine realizzate, per tutti i browser in circolazione.
Fino a qualche anno fa Internet Explorer rappresentava la stragrande maggioranza degli utenti della rete, quindi si poteva anche non prendere in considerazione l’argomento. Attualmente la situazione è radicalmente cambiata, browser come Firefox o Chrome (il mio preferito) stanno conquistando fette di mercato sempre maggiori, rendendo il problema non più trascurabile.
Il rendering della pagina viene influenzato dalle impostazioni di default dei browser web, che non sempre sono uguali, soprattutto riguardo ad alcune proprietà (margin, padding etc..). Ecco quindi che una pagina visualizzata con un browser può avere un aspetto diverso vista con un’altro browser.
Una tecnica molto in voga (la moda del momento) per risolvere il guio è qualla dei CSS reset che consiste il pratica nel resettare tutte le proprietà del foglio di stile, partendo da una situazione uniforme per tutti.
In rete si trovano vari esempi di css reset, ne posto uno che funziona bene (ispirato a quelli del maestro Eric Meyer), l’importante è che lo mettiate nell’head della pagina davanti al vostro foglio di stile, affinchè prima vengano resettati tutti gli stili e dopo applicati i vostri.
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: "" "";
}
select, .submit {
cursor:pointer;
}
Conclusioni
Esistono varie scuole di pensiero riguardo ai css reset, c’è chi sostiene la loro utilità, chi li considera troppo pesanti e consiglia di utilizzare il “reset” soltanto per gli stili effettivamente utilizzati nel sito e chi invece li considera addirittura sconsigliati. Personalmente penso non esista (come in tutte le cose) una verità assoluta, ognuno in base alle proprie esigenze e conoscenze sceglierà l’approccio più congeniale al problema 😉
Risorse
http://meyerweb.com/eric/thoughts/2007/04/12/reset-styles/
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/