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
I am surе this piece of writing Һas touched аll the internet users,
іts гeally гeally pleasant piece օf writing on building
սp new blog.
Hey just wanted to give you a brief heads up and let you know a
few of the pictures aren’t loading correctly. I’m not sure why but I think its a linking issue.
I’ve tried it in two different internet browsers and both show
the same results.
Very good post! We will be linking to this great article on our website.
Keep up the good writing.
My family always say that I am wasting my
time here at net, however I know I am getting experience all the time by reading such pleasant content.
Hi would youu mind letting me know which hosting company you’re using?
I’ve loaded your blog in 3 different internet browsers and I
must say thiis blog loads a lot faster then most. Can you recommend a good web hhosting provider at a reasonable price?
Kudos, I appreciqte it!
I know this website presents quality based articles and extra material, is there any other web site which
presents such data in quality?
There is definately a lot to find ouut about this subject.
I like all of the plints you have made.
When I initially commented I clicked thee “Notify me when new comments are added” checkbox
and now each time a comment is added I get three emails with the same comment.
Is there any way you can remove people from that
service? Thanks a lot!
Hey there! I just wanted to ask if you ever have any trouble with hackers?
My last blog (wordpress) was hacked and I ended up losing a few months of hard work due to no
data backup. Do you have any solutions to prevent hackers?
Hi there, its fastiddious piece of writing regarding medja
print, wwe all understand media is a enormous source of data.
Cercate di comprare un di buone qualità e duri a lungo.
Very useful to increase knowledge, thank you share it.
Great post which contains very useful information
If some one needs expert view on the topic of blogging afterward i recommend him/her to pay
a quick visit this webpage, Keep up the good work.
TalkBack is an accessibility service that helps blind and vision-impaired users interact with their devices. TalkBack adds spoken, audible, and vibration feedback to your device. TalkBack comes pre-installed on most Android devices.
Thanks for sharing. Useful