I CSS3 rappresentano il complemento ideale per formattare una struttura di contenuti realizzata con il nuovo linguaggio di marcatura di HTML5, e in questo articolo allestiremo graficamente il template per un blog realizzato per la guida HTML5, utilizzando quelle proprietà CSS3 che sono state implementate nei browser più moderni.
Gli esempi presentati (prima e seconda demo) costituiscono un ottimo banco di prova per testare la compatibilità delle varie tecniche: nello specifico, i browser meglio supportati sono Internet Explorer 9, Firefox 4, Safari 5, Chrome 9 e Opera 11.
Una delle novità più importanti dei CSS3 è che non sono più inglobati in una unica specifica monolitica in cui spingere tutti gli aggiornamenti del team di sviluppo del W3C; al contrario, essi consistono in una serie di moduli progettati per essere implementati separatamente e indipendentemente gli uni dagli altri. Questa suddivisione permette ad alcune parti delle nuove specifiche di muoversi più velocemente di altre, incoraggiando da un lato i produttori dei browser, e dall'altro gli sviluppatori di applicazioni Web, ad utilizzare e implementare da subito quei moduli che sono più avanti prima che l'intero processo di sviluppo dei CSS3 sia considerato finito.
Il vantaggio per noi web designer è che è possibile utilizzare molte proprietà CSS3 già oggi, invece di attendere forse anni, fino a che queste divengano raccomandazioni ufficiali.
Alcune delle nuove proprietà CSS3 sono state talvolta implementate nei browser tramite dei prefissi proprietari, diversi a seconda del produttore. Questo, come vedremo, ci obbliga a ripetere la dichiarazione di una stessa regola per ogni browser con il suo prefisso, che fondamentalmente crea un namespace della proprietà sperimentale. Gli altri browser ignoreranno infatti le regole contenenti prefissi non riconosciuti.
Il layout del blog
La struttura del template ricalca un modello tipicamente utilizzato nei blog:
- un header contente l'intestazione e il menu di navigazione principale;
- un footer con informazioni generali;
- una sidebar con il modulo di ricerca e il menu per la navigazione tra le varie categorie dei post;
- due sezioni principali, una contente l'ultimo post con i relativi commenti e il form di inserimento, l'altra con i post meno recenti.
Riguardo le specifiche funzionalità dei nuovi elementi strutturali utilizzati, queste sono state già ampiamente analizzate nella guida HTML5.
Per azzerare tutti i valori che i vari browser applicano di default alle proprietà dei vari tag è stato incorporato anche il CSS di reset disponibile su HTML5 Doctor, che è utilissimo per ripristinare il corretto comportamento di visualizzazione dei nuovi elementi sui diversi browser.
article, aside, figcaption, figure, footer, header, hgroup, nav, section {
display:block;
}Tutte le regole necessarie alla presentazione del documento sono invece contenute nel foglio di stile monitor.css, che analizzaremo in alcuni dei frammentii più significativi.
È previsto anche un foglio di stile specifico per la stampa, con delle regole minimali prelevate dal completissimo HTML5 Boilerplate.
Per l'assegnazione degli stili ai vari elementi, non sono stati utilizzati attributi di id o classe, ma è stato fatto uso dei nuovi selettori CSS3 (e anche di qualche selettore CSS 2.1), in modo da ridurre al minimo il markup aggiuntivo. Ad esempio, nel codice seguente, tramite le peseudoclassi strutturali :first-of-type e :last-of-type è stata differenziata la larghezza dei due contenitori principali, selezionando l'elemento del documento che è il primo (o l'ultimo) fratello del suo tipo.
body > section:first-of-type { width: 420px; }
body > section:last-of-type { width: 280px; }Un box model su misura
Grazie alla proprietà CSS3 box-sizing, è possibile modificare il comportamento standard del browser nel calcolo della larghezza di un elemento. Per impostazione predefinita, box-sizing è impostata sul valore content-box con il quale si calcola la larghezza e l'altezza seguendo le specifiche CSS 2.1, aggiungendo in più lo spessore per i bordi e il padding. Settando invece il valore su border-box, è possibile forzare il browser a lavorare secondo il comportamento che era tipico di Internet Explorer 6, in modo che il padding e il border specificati per l'elemento siano considerati e disegnati all'interno della larghezza o altezza dichiarate. La sidebar del template occuperà quindi nel documento uno spazio effettivo di 220px, compresivi della somma del padding destro e sinistro (20px + 20px):
aside {
width:220px;
float:left;
display:inline;
padding:20px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}Libertà tipografica
Con il nuovo modulo CSS3 dedicato ai font, e in particolare con la regola @font-face, è possibile utilizzare nelle pagine web qualunque tipo di carattere, senza il vincolo dato del ristretto numero delle famiglie di font di sistema. Nel caso del template per il blog, sono stati incluse due varianti di uno stesso carattere, utilizzate per le intestazioni, il menu di navigazione e anche per i semplici contenuti testuali. Un'ottima risorsa online dove trovare font gratuiti liberamente utilizzabili è il sito Font Squirrel, da cui è possibile prelevare comodi pacchetti pronti per l'uso, corredati delle regole CSS necessarie e dei tipi di font adatti ad ottenere un supporto cross-browser completo.
@font-face {
font-family: 'SansationBold';
src: url('Sansation_Bold.eot?'), /* IE 6-7-8 */
url('Sansation_Bold.woff') format('woff'), /* IE 9, Chrome 5+, Firefox 3.6, Opera 10+ */
url('Sansation_Bold.ttf') format('truetype'), /* Safari e varie versioni di altri browser */
url('Sansation_Bold.svg#id34') format('svg'); /* vecchie versioni di Android e di browser Webkit */
}Nuove modalità per i colori
Tra le novità introdotte con i CSS3, alcune riguardano l'uso del colore: accanto alle definizioni tradizionali tramite il modello esadecimale e RGB, è possibile specificare i colori tramite diverse modalità. In particolare, per il colore di sfondo degli elementi principali del template, è stata utilizzata la dichiarazione rgba(0,0,0,α), dove tra le parentesi sono definite le quantità percentuali o numeriche dei colori, rispettivamente: rosso, verde e blu. Il quarto parametro alfa serve a specificare il valore di opacità e permette di creare trasparenze accattivanti, in modo simile alla proprietà opacity, con una importante differenza: la proprietà rgba non si trasmette infatti agli elementi figli dell'elemento cui è applicata, come è possibile vedere dall'esempio.
header > nav {
background: rgba(0,0,0,0.6); /* colore nero 60% di opacità */
}Grafica "cool” con i fogli di stile
Tramite le proprietà introdotte con il modulo CSS3 "Border & Background" è possibile ottenere degli effetti grafici che fino a poco tempo fa richiedevano l'impiego di immagini e di software di editing grafico come Photoshop per la loro realizzazione. I vantaggi sono indubbi: minori tempi di download delle pagine web per i visitatori, minore tempo di lavorazione e migliore mantenibilità del codice per i web designer.
Box con ombreggiatura e angoli arrotondati
Nei template di esempio, sono state applicate due particolari proprietà (sugli elementi, strutturali, sui pulsanti del menu di navigazione, anche ai campi input del form):
box-shadow, che permette di aggiungere un effetto di ombreggiatura agli elementi selezionati: possiamo specificarne il posizionamento, il raggio di sfumatura ed il colore;border-radius, che permette di creare angoli arrotondati sugli elementi, attraverso valori specificati in unità di misura o valore percentuale.
Da notare la particolare sintassi che richiede l'utilizzo dei prefissi proprietari e la ripetizione della regola per ottenere il supporto alla proprietà sui diversi browser: è importante l'ordine delle dichiarazioni, perché probabilmente un determinato browser può in futuro implementare il supporto per la proprietà standard, ed è bene che questa sia l'ultima delle dichiarazioni ad essere applicata e interpretata.
section {
-webkit-box-shadow: 0 2px 3px #000000;
-moz-box-shadow: 0 2px 3px #000000;
box-shadow: 0 2px 3px #000000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}Approfondimenti: Aggiungere un'ombra a un box con box-shadow, Bordi con i CSS3.
Multiple backgrounds: un effetto parallax
Con i CSS3 c'è la possibilità di impostare più immagini di background su uno stesso elemento, specificandone il tipo di posizionamento, la ripetizione e le coordinate attraverso la consueta sintassi. Nel primo esempio dell'articolo possiamo vedere un interessante effetto applicato al body: le immagini di sfondo utilizzate (delle png trasparenti) si sovrappongono in base all'ordine delle dichiarazioni, ed essendo posizionate in percentuale si spostano e scorrono al resize della finestra del browser. La proprietà background-color, essendo l'ultima dichiarazione, è l'unica regola ad essere interpretata dai browser che non supportano gli sfondi multipli.
body {
background:
url(images/clouds.png) repeat fixed 40% 40%,
url(images/clouds2.png) repeat fixed 25% 55%,
url(images/clouds.png) repeat fixed 15% 15%,
url(images/sun.png) no-repeat fixed 95% 5%;
background-color:#b6dffd;
}Full page backround image
Nel secondo esempio è in opera una proprietà introdotta per la gestione degli sfondi, background-size, che permette di specificare le dimensioni di un'immagine di background. I valori possibili sono misure assolute con unità di misura, percentuali o le parole chiave cover e contain. contain fa sempre stare l'intera immagine all'interno del viewport. cover riempie la finestra del browser, tagliando quando necessario un po' di dettagli ma coprendo interamente l'area di sfondo dell'elemento cui è applicata la proprietà background. Sfruttando la proprietà background-size sull'elemento body è possibile allungare l'immagine di sfondo fino ad ottenere un effetto fullscreen, con un buon supporto sui nuovi browser e senza ricorre a Javascript.
body {
background: url(images/sky.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}Approfondimenti: Immagini di sfondo multiple con i CSS3, Nuove proprietà per gli sfondi nei CSS3.
Effetti di animazione senza Javascript!
Utilizzando in accoppiata i nuovi moduli CSS3 2D Trasform e Transitions, le cose si fanno interessanti! Vediamo come ottenere un interessante effetto per il menu del blog.
La proprietà transform permette, come dice il nome stesso, addirittura la trasformazione degli elementi in uno spazio bidimensionale, secondo il sistema di coordinate stabilito nella specifica SVG 1.1. In questo caso è stata applicata la funzione di trasformazione scale allo stato hover dei pulsanti del menu:
header > nav a:hover {
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}Con l'applicazione della proprietà transition, l'ingrandimento del pulsante al passaggio del mouse avviene con un movimento graduale molto piacevole, come avessimo applicato uno dei metodi di animazione di JQuery (esempio 2). Al momento attuale Microsoft ha deciso di non implementare in Internet Explorer 9 questo modulo comunque ancora sperimentale.
header > nav li a {
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}Approfondimenti: Trasformazioni 2D con i CSS3, Effetti di transizione con i CSS3.
Un layout per ogni dispositivo
Visualizzando gli esempi dell'articolo con un moderno smartphone (demo testate su iPhone), potrete notare che il layout del blog appare diverso da quello visibile attraverso il monitor di un normale computer. Non solo, il sito si adatta anche alla modalità di visualizzazione, panoramica o verticale. Tutto grazie al modulo CSS3 sulle Media Queries che rende possibile applicare dei fogli di stile personalizzati in base a determinate condizioni del device: risoluzione, larghezza o altezza del viewport, aspect-ratio, orientation, etc. Un'ottima linea guida per la creazione di layout dedicati per diversi dispositivi di navigazione è sicuramente il leggerissimo Less Framework.
<link rel="stylesheet" href="phone_landscape.css"
media="screen and (max-device-width: 480px) and (orientation: landscape)">
<link rel="stylesheet" href="phone_portrait.css"
media="screen and (max-device-width: 480px) and (orientation: portrait)">Conclusioni
Altre proprietà delle nuove specifiche avrebbero meritato attenzione, putroppo però il supporto nei browser di fatto non è ancora uniforme e sono state volutamente tralasciate: ad esempio le proprietà text-shadow e border-image e il modulo sul multi-column layout
che promette interessanti evoluzioni tipografiche.
Il codice CSS e gli esempi dell'articolo sono disponibili per il download.
