Nella prima parte della trattazione del template HTML5 Boilerplate abbiamo visto come personalizzare il file index.html contenuto nel pacchetto custom, oggi andiamo ad analizzare il file style.css che definisce uno dei fogli di stile associati al progetto.

Il codice inizia con il CSS Reset di Eric Meyer che ha la funzione di rendere la visualizzazione di un sito internet uguale in tutti i browser che spesso hanno specifiche differenti.

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; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } 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; } abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; } table { border-collapse: collapse; border-spacing: 0; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } input, select { vertical-align: middle; }

Di cui personalmente non amo l'utilizzo, fatto in questa maniera, per il semplice fatto che dichiarerete molte più cose di quelle che realmente serviranno. Il mio consiglio è quello di snellire notevolmente il CSS Reset iniziando con gli oramai "obbligatori" 

margin: 0; padding: 0;

Proseguendo nel codice viene utilizzato il progetto Yahoo YUI per normalizzare, cioè rendere uguale per tutti i browser, il testo.

body { font:13px/1.231 sans-serif; *font-size:small; } /* Hack retained to preserve specificity */ select, input, textarea, button { font:99% sans-serif; }

Si passa all'utilizzo di altri snippet tratti da Wikipedia e Patrick Lauke per citarne due. Non ci dilungheremo su tutto il codice perché sarebbe superfluo, invito i lettori a scaricare i sorgenti commentati per notare la grande attenzione alla compatibilità con Internet Explorer, ad esempio

.ie7 img { -ms-interpolation-mode: bicubic; }

dove viene cambiato il motore di rendering di default per le immagini in Internet Explorer 7. Quindi tanta attenzione e ottimizzazione in tutte le parti del codice.

Concludiamo commentando i fogli di stile complementari alla fine del file style.css

@media all and (orientation:portrait) { }<br />    @media all and (orientation:landscape) { }<br />    @media screen and (max-device-width: 480px) { }

Il developer che vuole gestire le modalità portait e landscape può inserire delle operazioni condizionali che intervengono solamente in caso di device che supportano questo tipo di visualizzazione. Ad esempio se abbiamo un tablet con risoluzione n x 480 potremo far intervenire il foglio di stile per adattare nel migliore dei modi la visualizzazione del sito creato con Boilerplate anche in questi tipi di device.

Il documento si chiude definitivamente con la parte dedicata alla stampa. 

@media print { * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */ a, a:visited { color: #444 !important; text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */ pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */ tr, img { page-break-inside: avoid; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3{ page-break-after: avoid; } }

Se avete scelto di includere alla versione Custom di Boilerplate anche il foglio di stile per i mobile device allora abrete il file handheld.css

* { float: none; background: #fff; color: #000; } body { font-size: 80%; }

Nel caso in cui il navigatori utilizzi smartphone o tablet verrà eliminato il float, verrà usato uno stile molto contrastato – testo #000 nero e sfondo bianco #fff – e il font verrà rimpicciolito per permettere maggiore visualizzazione sui piccoli schermi.

Con le informazioni che vi abbiamo dato siete pronti a customizzare il progetto Boilerplate secondo le vostre esigenze, ricordandovi che il "contenuto è il sovrano"  vi auguro di creare siti internet HTML5 di successo con questo template HTML5 friendly.

Ecco il link per scaricare e iniziare a "smanettare" con HTML5 Boilerplate di Paul Irish: http://html5boilerplate.com/