HTML5 & CSS3 - Parte 3 Stampa
Scritto da Enrico Battuello   
Domenica 20 Febbraio 2011 13:30

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.

Leggi articolo

 

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.

Leggi articolo


 

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:

 

Media Queries Le media queries CSS 3 sono un'aggiunta alle normali regole @media in grado di assegnare stili in base a nuovi parametri quali la dimensione dello schermo e le proporzioni di quest'ultimo. Attualmente sono allo stadio di Candidate Recommendation. CSS Line Layout Viene qui definito con maggiore precisione il layout degli elementi inline all'interno di una riga. Working Draft.
Selectors I selettori CSS 3 sono stati pensati per funzionare anche con complessi documenti XML. Sono in grado di attraversare la gerarchia ad albero di un documento e di selezionare gli elementi in base a nuove relazioni tra essi (come ad esempio il fatto di essere l'n-esimo figlio del proprio genitore. Attualmente sono allo stadio di Candidate Recommendation. CSS Lists Questo modulo affronta con maggior dettaglio e precisione il layout delle liste (ordinate e non-ordinate). Working Draft.
CSS Template Layout Questo modulo, precedentemente noto come Advanced Layout, specifica nuovi modi per posizionare gli elementi in base alle relazioni intercorrenti tra di loro al fine di garantire la massima flessibilità. Attualmente è allo stato di Working Draft. CSS Multi-column Layout Vengono qui definite nuove proprietà e valori per gestire i layout su più colonne. Last Call.
CSS Backgrounds and Borders Questo modulo descrive nuove funzionalità per gli sfondi e i bordi, tra cui la possibilità di estendere le immagini di sfondo e di arrotondare gli angoli dei bordi. Attualmente è allo stato di Last Call. CSS Namespaces Vengono qui definiti i modi per selezionare gli elementi in base alla presenza di un determinato namespace. Indispensabile per la formattazione di documenti XML. Candidate Recommendation.
CSS Basic User Interface In questo modulo vengono introdotti nuovi metodi e proprietà per assegnare degli stili all'interfaccia utente di un documento web (come ad esempio i form). Il suo stadio attuale è di Candidate Recommendation. CSSOM View Module Questo modulo consente agli autori di reperire informazioni sugli elementi senza far ricorso allo scripting. Working Draft.
CSS Basic Box Model Questo modulo tiene conto delle differenze esistenti tra scritture orizzontali e verticali all'atto di definire il box model degli elementi. È nello stadio di Working Draft. CSS Paged Media Si estendono le proprietà CSS per la stampa al fine di ottenere header, footer e numeri di pagina. Working Draft.
CSS Marquee Questo modulo propone una soluzione CSS per evitare l'uso del proprietario elemento marquee. Attualmente è allo stadio di Proposed Recommendation. CSS Presentation Levels Questo modulo introduce il concetto di presentazioni multiple di uno stesso documento, al fine di facilitare particolari layout come quelli delle slide di una presentazione. Working Draft.
CSS Cascading and Inheritance Vengono qui descritti i modi con cui gli stili vengono assegnati agli elementi tramite la cascata e la specificità. Working Draft. Grid Positioning Nel nuovo modello di layout CSS 3, un elemento posizionato viene a formare una griglia di presentazione. Questo modulo propone un insieme di coordinate per il posizionamento degli elementi flottati e posizionati in modo assoluto. Working Draft.
CSS Color Vengono introdotti nuovi concetti e valori per descrivere i colori CSS. Last Call. CSS Text Questo modulo tiene conto delle nuove necessità di internazionalizzazione nel definire nuove proprietà e valori per controllare il testo tramite i CSS. Working Draft.
CSS Fonts Nuove proprietà e valori per i font CSS, come l'uso dei font scaricabili tramite la direttiva @font-face. Working Draft. CSS 2D Transforms Module Questo modulo introduce nei CSS i concetti già presenti in SVG di trasformazione, rotazione e scaling degli elementi. Working Draft.
CSS Generated Content for Paged Media Questo modulo estende le comuni proprietà CSS per la stampa con l'introduzione di note a piè di pagina e riferimenti incrociati. Working Draft. CSS 3D Transformations Module Questo modulo estende il CSS 2D Transforms Module tramite nuove specifiche per le trasformazioni. Working Draft.
CSS Generated and Replaced Content In questo modulo viene introdotto il nuovo concetto di sostituzione del contenuto effettivo di un elemento con quello generato dai CSS. Working Draft. CSS Transitions Module Questo modulo introduce il concetto di transizione e ritardo nei passaggi di stato tra gli elementi (per esempio quando un elemento riceve il focus e poi lo perde). Working Draft.
CSS Hyperlink Presentation Questo modulo estende il normale trattamento CSS dei link ipertestuali dando maggior controllo agli autori sullo stato di questi ultimi. Working Draft. CSS Animations Module In questo modulo vengono introdotte nuove proprietà in grado di controllare gli stadi intermedi dell'animazione degli elementi (per esempio in sequenza). Working Draft.

 

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.

Leggi articolo

 

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.

Leggi articolo

 

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.

Leggi articolo

 

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.

Leggi articolo


 

Ultimo aggiornamento Venerdì 07 Dicembre 2012 01:39