Reset delle proprietà dei CSS

15 04 2007

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
body{font: 76% arial,sans-serif;color:#000000;background-color:#ffffff;}
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 utilizzaremo in un ipotetico template per un CMS nei prossimi post.

Annunci

Azioni

Information

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...




%d blogger hanno fatto clic su Mi Piace per questo: