HTML5 e CSS3: tecniche essenziali per il web designer

Per formare un web designer, in creatività e con una certa efficienza, potrebbero non essere sufficienti decine di corsi di web design…

E nemmeno diversi anni di esperienza se non dispone di alcune tecniche essenziali per il web design moderno…
Gli ultimi due anni hanno trasformato il web: sono migliorati gli standard e nuovi standard hanno visto la luce. Fortunatamente nessuno ha avuto il coraggio ti chiamarlo web 3.0 (altrimenti sarebbe in giro il 6.0): anche il termine “moderno” è abusato, ma riassume meglio le novità del momento.

HTML5 e Google Chrome Frame

Due anni fa, quando ne abbiamo parlato per la prima volta (leggi il post) era una novità assoluta, spinta attraverso browser aperti come Opera, Chrome, Safari e Firefox. Da ieri, pur non avendo ancora il fiocco rosa del W3C, è una realtà anche su Internet Explorer 10. Per aver un’idea dello stato dell’arte sulla compatibilità delle nuove specifiche vi rimando a questo link: html5readiness.
Oggi è disponibile su tutti i browser (comprese le versioni IE7,8 e 9) attraverso la Google Chrome Frame: un plug-in che permette di visualizzare i siti web, che ne fanno uso, con una versione leggera di Google Chrome, indipendentemente dal motore di render del browser.

Per implementare il frame di Chrome basta aggiungere il seguente tag all’interno del tag head:

Per facilitare all’utente il download del plug-in è meglio aggiungere questo codice Javascript, in coda al tag body.




Per una guida completa di questo plug-in rimando a questo link: How to get started. Non bisogna comunque dimenticare che l’utente può sempre scegliere di non scaricare il plug-in… e se questo è il vostro utente “tipico” bisogna cercare soluzioni da fornire in modalità cross-browser.

Basi di HTML5

HTML5 è più immediato e semplice delle precedenti versioni di HTML, a partire dalla Document Type Declaration o DOCTYPE:



Una volta definito il documento, i browser moderni completano la pagina come HTML5, mentre le versioni di IE6,7,8 come XHTML.
Nel suo cuore, HTML5 introduce nuovi elementi semantici: in poche parole permette di evitare una zuppa di elementi DIV, in favore di elementi che assegnano un ruolo preciso ai contenuti della pagina. Prendiamo questo esempio:

In HTML5, lo possiamo scrivere in questo modo:




Come riferimento, ma anche come ottimo framework di partenza (i.e. se la ruota è già stata inventata, non occorre re-inventarla), vi consiglio di seguire questo link: html5boilerplate.

Layout immediati con CSS3: Clearfix e Box-sizing

Prima o poi ogni web designer si è scontrato con le proprietà di floating. Uno dei più grandi problemi era quello di mantenere le dimensioni e la posizione del genitore quando ai figli veniva assegnata una proprietà di float.
Per risolvere questo problema è stata creata una tecnica chiamata clearfix. Prendiamo questo esempio di codice:

Con le pseudo-classi after e before, Nicolas Callagher ha rimosso qualsiasi inconsistenza del contenitore principale (wrapper) rispetto ai contenitori posizionati al suo interno, attraverso questa regola di stile:

.clearfix:before,
.clearfix:after {
content:" ";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}

Quante volte avete ripreso in mano la calcolatrice (del pc) per verificare le dimensioni di un elemento, aggiungendo i valori di padding (margine interno) e di border (bordo esterno) ? Per anni ci si è chiesti per quale motivo margini e bordi incidessero anche sull’attributo di larghezza (width) di un elemento, ma nel frattempo una soluzione è stata fornita da una nuova specifica di CSS3: il box-sizing.
Attivando su tutti i selettori la seguente specifica (con il valore border-box), il browser comprenderà i valori di margine e di bordo all’interno della larghezza dell’elemento. In alternativa, con il valore content-box, tutto tornerà come prima.

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

Per approfondire e conoscere tutti gli aspetti del web design scopri tutti i dettagli del nostro corso.