L’HTML5Boilerplate spiegato – parte 1

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.

L’HTML5boilerplate è un “template” HTML5 con cui può essere comodo iniziare a progettare un sito. La parola “template” può però trarre in inganno, facendo magari pensare a un qualcosa di complesso e completo come potrebbe essere per esempio un template di WordPress. Niente di più fuorviante. In realtà sarebbe forse meglio definire il Boilerplate come una semplice raccolta di codice HTML (e non solo) dal quale andare a prendere le cose che servono e ignorare tranquillamente le altre.

Nello specifico il Boilerplate è composto blocchi di codice HTML e CSS, con in più alcuni suggerimenti su come configurare al meglio i file .htaccess sotto Apache e web.config sotto IIS e altri dettagli. In questo e in (diversi) futuri post cercherò di spiegare alcune tecniche all’apparenza strane, ma in realtà molto utili.

Partiamo dall’HTML, e partiamo da una delle tecniche che potrebbe confondere di più:

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->

“Cos’è tutta questa monnezza all’inizio della mia pagina?”, direte?

Intanto quello che fa è abbastanza semplice: a seconda della versione di Internet Explorer, assegna una classe al tag html. Casi limite: nella prima riga assegniamo alla versione 6 (o minore) la classe ie6 e nell’ultima riga, alle future versioni superiori alla 9 (e – importante – a tutti gli altri browser), non assegniamo nulla.

In realtà è una cosa molto furba. Se è un po’ che vi occupate di HTML e CSS conoscerete ormai benissimo i vari hack CSS per personalizzarli secondo le varie versioni dei browser, principalmente Internet Explorer. Da qualche anno ormai la soluzione più pratica è quella dei commenti condizionali che caricano file CSS esterni a seconda della versione del browser. Il Boilerplate porta i commenti condizionali a un livello superiore (letteralmente) utilizzandoli per assegnare una classe al tag html che si potrà poi usare per scrivere normalissime (e valide) regole CSS nel foglio di stile, come (esempio classico):

#article {
    width: 40%;
    min-height: 300px;
}

.ie6 #article {
    height: 300px;
}

Il vantaggio principale è evidente: si evita lo scaricamento di un ulteriore file (o due, nel caso si servano file sia a Internet Explorer 6 che a Internet Explorer 7) e ormai si sa che una richiesta http in più è peggio di qualche byte in più nei file che già abbiamo. Inoltre si evita di avere diversi file CSS e ci si semplifica la vita nella scrittura del codice, potendo tenere tutte le regole che si riferiscono agli stessi oggetti nello stesso posto.

Se siete andati sul sito del Boilerplate, o magari già lo conoscevate, noterete che c’è una lieve differenza perché là i commenti sono applicati al tag body. L’idea è la stessa, ma applicarli al tag html evita di dover inserire il commento vuoto a inizio documento

<!--[if IE]><![endif]-->

presente nel Boilerplate per ovviare a un bug di Internet Explorer 8 che, in breve, si ferma ad attendere che vengano scaricati anche i file che, grazie ai commenti, dovrebbe scaricare solo il 6 (come riportato su Webforscher’s Blog e su phpied.com). Ovviamente questo non dovrebbe succedere, ma spostando il tutto a inizio pagina si risolve il problema.

Se siete patiti della validazione e state già dicendo “Ma questo HTML non è valido!”, tranquillizzatevi. Sarebbe stato vero se fosse stato HTML 4, ma in HTML5 è validissimo. Provate pure a validare le vostre pagine! :-)

Questa modifica (html invece del body) è già programmata (come molte altre) per la prossima versione del Boilerplate [EDIT: la 0.9.5 uscita il 26 ottobre e ora online sul sito ufficiale], e se siete curiosi su come si è giunti a quel punto, potete leggere i commenti in fondo alla pagina del Boilerplate, o andare sul blog di Paul Irish, uno degli autori, e leggervi in dettaglio il post in cui spiega questa tecnica. E se non potete attendere, andate su github e curiosate in anteprima tutte le modifiche che usciranno nella prossima versione.

2 Comments

  1. Pingback: L’HTML5Boilerplate – parte 2 – Reset CSS | accaTiEmmeElle5

  2. This is the first step on the way of how to become a
    Diving Instructor and it teaches you the necessary skills and methods for you to become a competent diver.
    A few hints include avoiding shops that use swimming pools to teach
    you in. They have a great tropical pool,
    a social clubhouse with free Wi – Fi and the required bar
    for divers.

Leave a Reply

Required fields are marked *.