Nelle lezioni precedenti di questo tutorial abbiamo parlato di HTML5, abbiamo presentato alcuni dei nuovi tag introdotti con esso ed abbiamo creato la parte di codice HTML che costituisce il progetto d'esempio che abbiamo deciso di realizzare, ovvero la creazione della pagina di un blog.

A partire da questa lezione, invece, parliamo di CSS3 ed introduciamo il codice necessario ad impaginare e formattare il nostro markup.

Per chi volesse rivedere gli argomenti già discussi può consultare i link presenti nella sezione "Articoli precedenti".

Articoli precedenti:

HTML5 & CSS3 - Parte 1

In questo tutorial creeremo la pagina di un Blog usando tecniche di ultima generazione basate su HTML5 e CSS3.

Il tutorial mira a mostrare il modo in cui saranno costruiti i siti web lato frontend allorché le software house avranno integrato le nuove specifiche HTML e CSS nei loro programmi di navigazione. Difatti gran parte dei più noti browser web, non supporta appieno le nuove specifiche di questi linguaggi, a cominciare da Internet Explorer 8. Tuttavia, la versione 9 di quest'ultimo browser, giunta ormai in fase di beta test, dovrebbe colmare il gap presente rispetto software di navigazione dii altri produttori.

HTML5 & CSS3 - Parte 2

Nella prima parte di questo tutorial abbiamo introdotto alcuni concetti chiave legati alle nuove specifiche di HTML5, abbiamo introdotto alcuni nuovi tag per la costruzione di pagine web ed abbiamo parlato dell fatto che questi nuovi tag sono semanticamente significativi per i motori di ricerca e per gli screen reader.

Successivamente, abbiamo introdotto il progetto d'esempio che desideriamo realizzare che consiste nell'implementazione dell'interfaccia di frontend di un ipotetico Blog, abbiamo presentato una bozza della struttura della pagina e una sua prima conversione in codice HTML5.

CSS3 basa il suo funzionamento sui concetti di stili, selettori e cascata che conosciamo bene e che sono comuni alle versioni precedenti del linguaggio. Ad essi aggiunge diverse nuove funzionalità, tra cui nuovi selettori, nuove pseudo-classi e nuove proprietà. Ma la novità più grande introdotta con i CSS3 è quella di fornire una specifica modulare. In pratica, invece di fornire un unico documento di specifica suddiviso in capitoli e paragrafi si è proceduto a creare una serie di moduli separati e a dare la specifica per ciascun modulo. In questo modo i browser non sono più costretti ad implementare le intere specifiche in toto, ma possono supportare questo o quel modulo in base alle loro esigenze. L'unica limitazione è che quando un browser dichiara di supportare un modulo, il suo supporto deve essere completo. Questo fa si che anche le specifiche dei vari moduli viaggino in modo separato e difatti, al momento, non tutti i moduli hanno specifiche definitive e complete.

Tanto per avere un'idea di quanti siano i moduli che compongono le definizioni CSS3 si osservi la seguente tabella non esaustiva:

Noi in questo tutorial non tratteremo questi moduli ma ci limiteremo ad usare dei fogli di stile in cui alcuni elementi saranno definiti secondo lo standard CSS3. Per chi volesse approfondire uno o più dei suddetti moduli rimando al sito ufficiale sulle specifiche CSS del World Wide Web Consortium (W3C).

Passiamo, quindi, al codice. Per prima cosa definiamo il "setup di base" del nostro CSS, ovvero definiamo la sezione di inizializzazione del nostro foglio di stile.

CSS - Sezione di reset ed inizializzazione

Per iniziare definiamo alcune regole di base relative ai font, all'ampiezza ed al colore di sfondo della pagina, al rendering di alcuni elementi, ecc.. Tutto ciò appartiene già alle specifiche CSS 2.1.

/* Inizio sezione reset ed inizializzazione */

/* CSS Reset */
html, body {
	margin: 0;
	padding: 0;
}

/* Da' al browser la direttiva di renderizzare ciascun elemento HTML 5 come blocco */
header, footer, aside, nav, article {
	display: block;
}

/* imposta margini, ampiezza, colore di sfondo e fonts del documento html */
body {
	margin: 0 auto;
	width: 940px;
	font: 13px/22px Helvetica, Arial, sans-serif;
	background: #f0f0f0;
}

h2 {
	font-size: 28px;
	line-height: 44px;
	padding: 22px 0;
}

h3 {
	font-size: 18px;
	line-height: 22px;
	padding: 11px 0;
}

p {
	padding-bottom: 22px;
}

/* Fine sezione reset ed inizializzazione */

Analizziamo, quindi, quello che abbiamo fatto.

Per prima cosa abbiamo eseguito un "reset leggero" reimpostando a zero i margini ed il padding del documento. Normalmente in un ambiente di produzione si utilizza uno script di inizializzazione più completo ma per i inostri scopi il reset che abbiamo applicato può bastare.

Un reset migliore, ad esempio, avrebbe potuto essere il seguente:

td, th, tr, thead, tfoot, tbody, caption, table, legend, label, form, fieldset, li, ul, ol, dd, dt, dl, var, tt, sup, sub, strong, strike, small, samp, s, q, kbd, ins, img, font, em, dfn, del, code, cite, big, address, acronym, abbr, a, pre, blockquote, p, h6, h5, h4, h3, h2, h1, iframe, object, applet, span, div, body, html {
border:0;
outline:0;
vertical-align:baseline;
background:transparent;
margin:0;
padding:0;
}

ed ancora migliore sarebbe risultato l'utilizzo del famoso YUI Reset CSS, giunto alla versione 2, che è il foglio di stile usato da Yahoo! nel suo framework e che viene rilasciato sotto licenza BSD.

Comunque, tornando al nostro CSS, abbiamo poi dato al browser la direttiva di renderizzare gli elementi HTML5 come blocchi.

Questo è necessario principalmente per i browser che non conoscono i nuovi tag HTML5 e tantomeno il rendering da applicare su di essi come default.

Abbiamo inoltre definito la dimensione e la famiglia dei fonts da usare nel "body" e negli header "h2" ed "h3", l'ampiezza e lo sfondo del body, dei "padding" ed altre impostazioni "secondarie".

Per poter vedere il risultato dell'applicazione di questi stili sugli elementi che compongono la pagina del nostro blog salviamo il codice css appena visto in un file con nome "mainstyle.css" ed aggiungiamo al nostro html, nella sezione "head", le istruzioni necessarie a caricare il foglio di stile appena creato.

Pertanto, supponendo che il file CSS venga salvato in una sottocartella "css" del percorso in cui è collocata la nostra pagina html, modifichiamo la sezione "head" di quest'ultima in:

<head>
	<title>The Car Blog</title>
	<link rel="stylesheet" href="/css/mainstyle.css" type="text/css" media="screen" />
</head>

Il risultato è comunque osservabile clickando su questo link.

Passiamo ora a stilizzare la sezione di navigazione della pagina del nostro blog.

CSS - Stilizzazione della navigazione

E' importante osservare che il "body" della nostra pagina è stato allineato centralmente e che la sua ampiezza è stata definita di 940px. La barra di navigazione, invece, deve estendersi per tutta l'ampiezza della finestra e, per questo motivo, dobbiamo applicare alcuni stili aggiuntivi:

nav {
	position: absolute;
	left: 0;
	width: 100%;
	background: url("/images/nav_background.png");
}

Come si può osservare dal codice abbiamo posizionato l'elemento "nav" in modo assoluto, allineandolo al bordo sinistro della finestra ed estendendolo per tutta l'ampiezza della medesima.

Ora centriamo all'interno dell'elemento "nav" la lista che contiene l'elenco degli elementi navigabili in modo da visualizzarla dentro i limiti del layout:

nav ul {
	margin: 0 auto;
	width: 940px;
	list-style: none;
}

Definiamo, quindi, alcuni stili aggiuntivi per rendere più piacevole l'aspetto delle voci della barra di navigazione e per allinearle alla griglia su cui si basa il layout. Aggiungiamo anche uno stile per evidenziare il link in cui si trova l'utente ed uno stile personalizzato per il link di sottoscrizione del feed RSS; in codice:

nav ul li {
	float: left;
}

	nav ul li a {
		display: block;
		margin-right: 20px;
		width: 140px;
		font-size: 14px;
		line-height: 44px;
		text-align: center;
		text-decoration: none;
		color: #777;
	}

		nav ul li a:hover {
			color: #fff;
		}

		nav ul li.selected a {
			color: #fff;
		}

		nav ul li.subscribe a {
			margin-left: 22px;
			padding-left: 33px;
			text-align: left;
			background: url("/images/rss_piccolo.png") left center no-repeat;
		}

Per chi lo desiderasse, il risultato finale dell'applicazione degli stili appena definiti alla barra di navigazione è visibile su questo link.

Tuttavia, mi interessa evidenziare il fatto che con browser come Internet Explorer 8 l'effetto non è quello atteso (per i motivi citati nelle parti precedenti di questo tutorial). Per una corretta visualizzazione, pertanto, consiglio di utilizzare le utlime versioni dei browser Google Chrome, Safari e Mozilla Firefox. La visualizzazione dovrebbe essere corretta anche nel nuovo browser Internet Explorer 9 di casa Microsoft.

Nelle prossime lezioni, comunque, vedremo come avere un layout perfettamente funzionante con tutti i browser più conosciuti (IE8 incluso).

(Fine terza parte).

Vengono allegati a questo articolo le due versioni dei sorgenti presentati (solo per utenti registrati).

Articoli successivi:

HTML5 & CSS3 - Parte 4

Nelle prime due lezioni di questo tutorial abbiamo parlato di HTML5, abbiamo presentato alcuni dei nuovi tag introdotti con esso ed abbiamo creato la parte di codice HTML che costituisce il progetto d'esempio che desideriamo realizzare, ovvero la pagina di un blog.

Nella terza lezione, poi, abbiamo iniziato a "stendere" il foglio di stile CSS per impaginare i diversi elementi della pagina. In particolare, abbiamo visto la sezione di reset ed inizializzazione del CSS e la sezione di formattazione della barra di navigazione.

HTML5 & CSS3 - Parte 5

Nelle prime due lezioni di questo tutorial abbiamo parlato di HTML5, presentando alcuni dei nuovi tag introdotti con esso ed abbiamo creato la parte di codice HTML che costituisce il progetto d'esempio che desideriamo realizzare, ovvero la pagina di un blog.

Nella terza e quarta lezione, poi, abbiamo iniziato a trascrivere il codice del foglio di stile necessario ad impaginare le diverse sezioni del nostro documento HTML. In particolare, siamo partiti dalla definizione di una rapida sezione di reset nel CSS, per poi passare alla stilizzazione della barra di navigazione e della sezione "intro" della nostra pagina, facendo particolare riferimento ad alcuni tag nuovi, introdotti con le specifiche CSS3, necessari per posizionare, formattare e impaginare le immagini di sfondo di una specifica sezione.

HTML5 & CSS3 - Appendice Speciale (Parte 1)

In questo articolo, che costituisce un'appendice al tutorial su HTML5 e CSS3 postato nei mesi scorsi, vedremo come modificare la pagina del blog precedentemente analizzata in modo da renderla fruibile e visivamente gradevole sia sotto Internet Explorer 8/9, che sotto Google Chrome, Safari e Mozilla Firefox.

Quello che ci interessa, in particolare, è raggiungere una buona compatibilità del nostro codice con le versioni 8 e 9 del browser di casa Microsoft.

HTML5 & CSS3 - Appendice Speciale (Parte 2)

Nella prima parte di questa appendice al tutorial su HTML5 e CSS3 abbiamo introdotto gli script che utilizziamo per rendere la nostra pagina di blog compatibile con tutti i principali browser web in circolazione (Internet Explore 8 o superiore, Google Chrome, Mozilla Firefox, Safari).

Inoltre, abbiamo visto il codice HTML univoco della nostra pagina web.

Ora ci apprestiamo ad esaminare il codice sorgente dei due fogli di stile utilizzati.