CSS Reset, azzerare gli stili di default dei browser

Corso online Responsive Design
Realizzare siti responsivi con HTML5 e CSS3.

Scritto da Luca Ruggiero nella sezione Css

Con il termine CSS Reset si intende la tecnica per azzerare gli stili di default dei browser. Data la definizione ufficiosa di CSS Reset, proviamo adesso a capire meglio di cosa stiamo parlando: i vari elementi HTML vengono nativamente gestiti in maniera differente dai browser Web e, per questa ragione, si corre il rischio di disegnare layout che si visualizzano in maniera diversa, ad esempio, su Chrome piuttosto che su Firefox, Explorer e così via.

La tecnica di base consiste nell'azzerare le spaziature degli elementi (padding: 0; e margin: 0;) ed i bordi (border: 0;) degli elementi che utilizziamo per la costruzione dei layout del nostro sito.

Esistono molti listati di codice già pronti ed utilizzabili messi a disposizione dai più celebri guru dei fogli di stile (ad esempio Eric Meyer) ed è sufficiente effettuare una ricerca in rete per i termini "css reset" per trovarne di ottimi.

Personalmente li trovo sin troppo completi, nel senso che vanno a gestire una serie di caratteristiche che non sempre rientrano nelle mie esigenze di design, per cui - avendo compreso la tecnica - preferisco scrivere da me il mio CSS Reset a seconda di quel che so che andrò ad utilizzare, ovvero:

  • Elementi di base della pagina
    • <html>
    • <body>
  • Elementi strutturali della pagina
    • <div>
    • <table>
    • <td>
  • Titoli
    • <h1>
    • <h2>
  • Elementi di testo ed elenchi
    • <p>
    • <ul>
    • <ol>
    • <li>
  • Altri elementi
    • <img>
    • <form>
    • <input>
    • <select>
    • <textarea>
    • <iframe>

Il mio listato utile ad azzerare gli stili di default dei browser si articola pressappoco così:

html, body, div, td, h1, h2, p, ul, ol, li, img, form, input, select, textarea, iframe
{
    padding: 0;
    margin: 0;
    border: 0;
}
table
{
    border-collapse: collapse;
    border-spacing: 0;
}
ul, ol
{
    list-style-type: none;
}
input:focus, select:focus, textarea:focus
{
    outline: 0;
}
iframe
{
    overflow: hidden;
}

Esaminiamo il listato.

Nel primo blocco azzeriamo le spaziature ed i bordi a tutti gli elementi sopra indicati (facenti parte delle mie esigenze di base). Nel secondo gestiamo le tabelle. Nel terzo gli elenchi. Nel quarto gestiamo il focus sugli elementi dei form e, in fine, nell'ultimo eliminiamo la barra di scorrimento dagli iframe che, personalmente, trovo comodissimi per gestire alcuni elementi, come quelli pubblicitari.

Su questo sito potete trovare delle forme completissime dei CSS Reset da utilizzare a seconda delle vostre esigenze.

Suggerisco, in fine, di separare il foglio di stile del sito da quello che azzera gi stili di default del browser, includendoli separatamente.

Ad esempio:

<html>
    <head>
        <title>Titolo della pagina</title>
        <meta http-equiv="content-language" content="it">
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
        <link rel="stylesheet" type="text/css" href="reset.css">
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
<body>

<h1>Titolo della pagina</h1>

<p>Primo paragrafo della pagina, bla bla bla bla bla bla bla bla bla bla ...</p>
<p>Secondo paragrafo della pagina, bla bla bla bla bla bla bla bla bla bla ...</p>
<p>Terzo paragrafo della pagina, bla bla bla bla bla bla bla bla bla bla ...</p>

</body>
</html>

Nel foglio di stile del sito inizieremo a stilizzare i nostri elementi come abbiamo sempre fatto, agendo sui singoli margini e/o bordi che ci interessa gestire:

body
{
    background: #FFF;
}
h1, h2
{
    color: #AAA;
    font: bold 15px verdana;
    margin: 0 0 10px 0;
}
p, li
{
    text-align: justify;
    line-height: 20px;
    color: #000;
    font: normal 13px verdana;
    margin: 0 0 10px 0;
}

E così via.

TAGS - css reset
I più cliccati della sezione Css

:: Effetto testo barrato con con i Css (46.306)

:: Referenze dei fogli di stile Css (41.553)

:: Menu ad effetto mouseover con i Css (38.747)

:: Effetti sui link con i Css (28.771)

:: Testo verticale coi Css (19.611)

:: Angoli smussati in un box coi Css (18.695)

:: Posizionare un layer centrato rispetto alla risoluzione con i Css (15.970)

:: Box con effetto ombra con i CSS3 (15.876)

:: Stilizzare i form Html con i Css (15.562)

:: CSS Expression, ovvero: integrare Javascript in un foglio di stile (15.258)

IN EVIDENZA
DOWNLOAD