CSS  »  Articoli  »  CSS 3 

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.

Figura 1 - Browser vendor prefixes

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; }

Altri articoli

Altre guide

Altre newsletter