Reset css, browser

Reset CSS

Rendiamo più omogeneo il comportamento dei vari browser

Chi si trova quotidianamente a lavorare con i fogli di stile sa molto bene che ottenere lo stesso effetto tra i diversi browsers è piuttosto difficile, usando uno solo foglio di stile. Si è spesso costretti a ricorrere a trucchi o istruzioni condizionali che caricano fogli di stile alternativi.

Una soluzione (parziale) a questo problema e quella di resettare alcune delle proprietà di margin, padding, border... che i vari browsers hanno di default. In questo modo il comportamento dei browsers sarà molto più omogeneo e se il foglio di stile è ben fatto.. non è necessario ricorrerre a fogli multipli.Vediamo come fare.

Soluzione semplice

* { margin: 0; padding: 0; } In questo caso si utilizza il selettore universale '*', cioè si resettano le proprietà di tutti gli elementi. Questa soluzione è molto semplice ed efficace ma, secondo alcuni (eric meyer in testa), eccessiva perchè conivolge proprio tutti gli elementi;

Soluzione avanzata

secondo eric meier
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,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
text-align: left;
vertical-align: baseline;
}
a img, :link img, :visited img {
border: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ol, ul {
list-style: none;
}
q:before, q:after,
blockquote:before, blockquote:after {
content: “”;
}

Questa seconda soluzione è più raffinata e consente di controllare i soli elementi (e le proprietà) che si vogliono resettare. Questo pezzo di css è la base di partenza per un foglio di stile "generale" che può essere utilizzata in un template per un CMS.

commenti