This is an old article, from a time I thought I’d be writing this blog in Italian. Now I’ve changed my mind and everything new is supposed to be in English. Since there is nothing particularly interesting or original in these old posts, I’ll just leave them here in Italian. If you can’t read Italian, you’re not missing much.
Torniamo a parlare del Boilerplate HTML5. L’altra volta avevo parlato delle dichiarazioni condizionali del tag <html> per poter capire se stiamo usando Internet Explorer, oggi invece parliamo di un argomento di cui si è discusso parecchio ultimamente grazie a un articolo che ne racconta la storia: Il reset CSS. Il Boilerplate include un reset CSS come prima parte del suo foglio di stile e, come giustamente ricordato nei commenti all’inizio del CSS, il codice in questione è comunque un aggiornamento della versione “storica” di Eric Meyer. Se vi interessa sapere come si è giunti al reset attuale vi consiglio l’articolo di cui sopra.
Un reset CSS serve ad azzerare tutti i valori che i vari browser applicano di default ai vari tag. Questo perché ogni browser applica valori differenti e rimane quindi più comodo azzerare tutto per poter decidere poi noi questi valori. In alternativa si può sempre ridefinire questi valori ogni singola volta che si aggiunge una regola a un tag, un id o una classe, ma personalmente (e come me molti altri) lo ritengo più scomodo e fonte di errori.
Principalmente nel reset si parla di margini, padding, bordi e allineamenti. Di questo si occupa la prima delle voci, azzerandoli in tutti i tag che fanno attualmente parte dell’HTML5:
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent
}
Essendo poi questo un reset per una pagina in HTML5, bisogna forzare a “block” i nuovi elementi semantici che devono essere block per definizione (non tutti, naturalmente… per esempio <time> no):
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block
}
Si procede poi ad azzerare l’aspetto delle liste. Tenendo conto che la maggior parte delle volte le liste vengono utilizzate per menù e altri elementi simili di navigazione, è naturale rimuovere il comportamento di default in questi casi (da cui la regola nav ul) e riaggiungerlo nei casi particolari in cui servissero davvero delle liste puntate/numerate. Allo stesso modo azzeriamo le eventuali decorazioni (virgolette) che alcuni browser aggiungono ai tag <blockquote> e <q>:
nav ul { list-style:none }
blockquote, q { quotes:none }
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none
}
Nell’elenco generale di prima, non c’era il tag <a>. Questo perché è giusto, per motivi di usabilità, che non perda il suo outline. Dobbiamo però azzerare tutti gli altri valori, quindi:
a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent
}
Ci sono poi tre tag (due vecchi, <ins> e <del> e uno nuovo, <mark>) che non hanno tanto bisogno di un azzeramento quanto di uno stile specifico. A <del> assegniamo normalmente una bella “riga sopra”, mentre per gli altri diamo colori e/o stili diversi di visualizzazione. Quelli indicati qui, in questo caso, sono solo degli esempi, ognuno li può personalizzare come crede!
ins {
background-color: #ff9;
color: #000;
text-decoration:none
}
mark {
background-color: #ff9;
color: #000;
font-style: italic;
font-weight: bold
}
del {
text-decoration: line-through
}
E per far vedere ai nostri utenti che abbiamo una spiegazione per i valori degli <abbr> e dei <dfn> che usiamo, mettiamoci una sottolineatura a trattini (anche qui, si può mettere quello che ci pare) e un cursore con il punto di domanda. La regola si applica solo quando è presente l’attributo title:
abbr[title], dfn[title] {
border-bottom: 1px dotted;
cursor: help
}
Se usiamo le tabelle (per dati tabulari, non per il layout del sito, non siamo nel 1820! 
) e vogliamo liberarci del loro orribile aspetto di default, basta usare:
table {
border-collapse: collapse;
border-spacing: 0
}
Infine, se vogliamo usare degli <hr>, diamo loro l’aspetto di “riga” e un minimo di spaziatura. E allineamo al testo circostante gli <input> e i le <select>:
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0
}
input, select {
vertical-align:middle
}
Ci sarebbe un’altra riga che il Boilerplate aggiunge più avanti, ma che forse fa più parte della sezione reset:
.ie6 legend, .ie7 legend {
margin-left: -7px
}
Sembra strano, ma in realtà Internet Exporer 6 e 7 (e quindi applichiamo la regola solo a loro, con le loro rispettive classi) spostano il tag <legend> di 7 pixel, pur mantenendo un margine uguale a zero! L’unico modo per resettarlo realmente (e farlo quindi apparire come in tutti gli altri browser) è quello di assegnarli un margine sinistro negativo di sette pixel. <legend> non è un tag molto usato, ma se vi capiterà di usarlo questo piccolo “trucchetto” vi eviterà di perdere un sacco di tempo per capire perché IE6 e 7 si comportano male.
Se volete saperne di più sui reset, oltre all’articolo con la loro storia vi consiglio di dare un’occhiata all’HTML5 Reset Stylesheet, al classico Reset CSS di Eric Meyer e al Reset CSS di Yahoo.
Infine, tenete presente che, come sempre, questa è una base da cui partire. Per esempio, difficilmente utilizzerete
