TecaLibri: Gianluca Troiani: CSS Guida completa

| << | < | > | >> |

Pagina xix

Introduzione

I CSS (Cascading Style Sheets, Fogli di Stile a Cascata) sono il meccanismo definito dal W3C (World Wide Web Consortium; http://www.w3.org/) per definire l'aspetto (caratteri, colori e impaginazione) delle pagine Web.

Definiti per la prima volta nel dicembre 1996 (CSS livello 1) e rivisti poi nel gennaio 1999, potenziati nel maggio 1998 (CSS livello 2) e in via di ridefinizione dal febbraio 2004 (CSS livello 2.1), solo di recente i fogli di stile sono divenuti un argomento di grande interesse, poiché per diversi anni i browser disponibili non sono stati in grado di gestire correttamente questa tecnologia.

Con la crescente diffusione di browser come Internet Explorer versione 5 e superiori per Windows, Mozilla e i browser da esso derivati, Safari, Opera versione 7 e successive, Netscape versione 7 e successive, e con la conseguente scomparsa dei browser più datati, gli autori di pagine Web dispongono finalmente di uno strumento potente e duttile per gestire l'aspetto delle pagine indipendentemente dai contenuti.

Sebbene non recenti, i fogli di stile sono ancora poco noti e non perfettamente supportati dai browser disponibili.

Lo scopo di questa guida è quello di introdurre il lettore ai fogli di stile agendo come filtro tra le specifiche ufficiali e il mondo reale: saranno illustrati e approfonditi i meccanismi che sono in grado di funzionare sui browser più diffusi evidenziando anche le differenze tra i comportamenti reali e quello che in effetti è previsto dalle specifiche W3C, mentre saranno soltanto accennati i meccanismi che non funzionano o funzionano solo in parte.

Saranno inoltre affrontati i problemi che si devono risolvere nella quotidiana realizzazione di pagine Web, illustrando tecniche e soluzioni innovative o consolidate per ottenere dalle specifiche ciò che esse non prevedono esplicitamente (come, per esempio, i layout a colonne multiple).

La guida assume dunque un duplice aspetto teorico e pratico, illustrando dettagliatamente qual è il reale comportamento dei meccanismi previsti nelle specifiche e come, partendo da tali comportamenti, sia possibile ottenere la soluzione dei problemi che la realizzazione di una pagina Web comporta, anche attraverso numerosi esempi pratici.

Organizzazione dell'opera

Il libro è diviso in dieci capitoli, suddivisibili in tre gruppi.

1. I Capitoli 1-3 sono introduttivi e dovrebbero essere letti per primi e nell'ordine in cui sono presentati, poiché definiscono le basi teoriche su cui sono costruiti i successivi capitoli.

2. I Capitoli 4-9 illustrano tecniche avanzate per implementare le soluzioni necessarie alla realizzazione di una pagina Web completa: questi capitoli possono essere letti con una certa indipendenza.

3. Il Capitolo 10, infine, presenta due progetti completi che riassumono quanto illustrato precedentemente attraverso la ricostruzione tramite XHTML e CSS di pagine Web esistenti; questo capitolo dovrebbe essere letto per ultimo.

I capitoli

Capitolo I. Vedremo che cosa sono i CSS e gli standard, perché sono nati, perché è bene conoscerli e utilizzarli e perché possono ormai essere considerati il presente e il futuro delle pagine Web.

Capitolo 2. Vedremo come sono strutturate le regole CSS, che cosa sono e come funzionano i selettori, quali sono le proprietà supportate e i possibili valori.

Capitolo 3. Dopo aver visto come sono strutturate le regole CSS, quali siano le possibili proprietà e i rispettivi valori vedremo, in modo approfondito, come funzionano concretamente le proprietà CSS.

Capitolo 4. Vedremo come realizzare griglie di impaginazione senza l'utilizzo di tabelle per impaginazione.

Capitolo 5. Vedremo come realizzare menu orizzontali e verticali a partire da liste a uno e due livelli formattate attraverso i CSS. Attraverso la combinazione di CSS e JavaScript vedremo, inoltre, come realizzare menu dinamici accessibili e di facile implementazione.

Capitolo 6. Vedremo come utilizzare gli sfondi per disegnare parte del layout, per aggiungere elementi grafici, per inserire icone, per arrotondare i bordi, per sostituire porzioni di testo con immagini.

Capitolo 7. Vedremo alcune possibili applicazioni dei contenuti generati direttamente attraverso le regole CSS.

Capitolo 8. Saranno illustrate alcune tecniche, generalmente note con il nome di filtri o hack, che consentono di inviare specifiche istruzioni CSS a browser distinti in modo da correggere e sopperire a difetti di implementazione CSS caratteristici di alcuni browser.

Capitolo 9. Vedremo come inviare fogli di stile specifici per i differenti tipi di dispositivi utilizzati dagli utenti (PC, palmari, cellulari, stampanti) e come consentire all'utente la personalizzazione della navigazione attraverso la scelta di stili alternativi.

Capitolo 10. Questo capitolo è dedicato all' applicazione di quanto appreso nei precedenti attraverso la realizzazione di alcune pagine complete. Per rendere più utile e concreta la trattazione, gli esempi saranno basati sui layout di siti esistenti. Vedremo come sarà possibile ottenere pagine dall'aspetto del tutto conforme a quelle di riferimento, utilizzando CSS e codice XHTML in modo conforme agli standard, realizzando un codice meglio strutturato, organizzato e snello.

Materiale online

Gli esempi utilizzati nei capitoli sono disponibili presso un archivio ZIP rintracciabile all'indirizzo Web http://www.apogeonline.com/ libri/88-5O3-2369-7/scheda.

All'indirizzo Web http://www.constile.org/css_guida_completa/ è disponibile una sezione "errata corrige" del libro. Per segnalare errori o imprecisioni scrivete a: errata@constile.org.

A chi si rivolge il libro

Questo manuale si rivolge sia al web designer che non abbia mai utilizzato i CSS, sia a chi abbia già una buona conoscenza della materia.

I web designer inesperti troveranno una guida completa che parte dall'illustrazione di che cosa sono e come funzionano i CSS, prosegue con l'analisi dei principi teorici che sono alla base dei CSS e termina con numerose applicazioni pratiche (spesso pronte per l'uso) che mostrano come passare dalla (poca) teoria dei CSS alla (molta) pratica del loro utilizzo nella realizzazione di siti Web.

I web designer più esperti nell'utilizzo dei CSS troveranno invece sia approfondimenti teorici sia una raccolta ragionata e ordinata di esempi, soluzioni ai problemi più comuni, hack e tecniche che, anche qualora risultassero già note, saranno subito disponibili in un unico volume.

Prerequisiti

Per leggere e comprendere il libro non è necessaria alcuna conoscenza riguardo i CSS, tuttavia è necessario avere una conoscenza di base del codice HTML poiché è su tale codice che i CSS agiscono.

I numerosi esempi contenuti in questo manuale poggiano su documenti HTML di cui è illustrato il senso semantico e strutturale, però concetti come tag e attributo, la sintassi e il significato dei vari elementi HTML non sono argomento di questo manuale e devono essere già noti, almeno a grandi linee, al lettore.

| << | < | > | >> |

Pagina 3

Le "zuppe di codice"

Prima dell'introduzione dei CSS, e prima che i browser li supportassero, i web designer non potevano modificare i criteri utilizzati dai browser nella rappresentazione della pagina. Per venire incontro alle necessità grafiche dei web designer, sono stati introdotti nuovi elementi (come per esempio ) e attributi (come bgcolor) il cui scopo non è quello di strutturare i contenuti, ma di determinarne l'aspetto.

Per realizzare impaginazioni complete, gli autori di pagine Web si sono affidati a tabelle (il cui reale scopo è quello di tabulare, appunto, dati), a immagini trasparenti e a una serie di trucchi che hanno portato il codice a diventare sempre più pesante, sempre meno strutturato e sempre meno fedele al suo ruolo. I diversi elementi sono stati utilizzati senza alcun rispetto per il loro valore strutturale e semantico, ma con il solo intento di determinare l'aspetto della pagina.

La coerenza strutturale dei documenti è stata sacrificata in favore della grafica e il peso delle pagine, anziché dai contenuti e dai tag necessari per marcarli opportunamente, veniva determinato da elementi inseriti al solo scopo di controllare l'aspetto finale della pagina.

A queste pratiche, poi, si sono aggiunti i danni provocati dai programmi per la realizzazione di pagine Web che si dichiarano di tipo WYSIWYG (What You See Is What You Get). Questi programmi, editor visuali, permettono di creare pagine Web senza editare direttamente (e quindi conoscere) i tag (X)HTML. I contenuti vengono marcati, troppo spesso con poca cognizione di causa, preoccupandosi principalmente del layout finale, dell'aspetto della pagina, e questo ha contribuito alla realizzazione di un gran numero di "zuppe di codice" (termine molto in voga ultimamente, specialmente nella versione anglofona tag soup). L'utilizzo di editor WYSIWYG comporta quindi la rinuncia a vedere che cosa si trova realmente dietro la pagina Web che si sta costruendo e, se questo è accettabile da parte di un programmatore esperto e quindi consapevole delle proprie scelte, è estremamente pericoloso quando lo sviluppatore è una persona che ancora non ha avuto modo di riflettere sul reale significato dei marcatori (X)HTML.

Il risultato finale è quasi sempre un codice estremamente complesso e poco leggibile, difficile da controllare e modificare, che può arrivare a pesare tre o quattro volte più del necessario (elemento che comporta un aumento dei costi per la banda necessaria per inviare le pagine agli utenti).

Le pagine che si ottengono sono costruite per essere visualizzate e utilizzate solo su computer desktop o laptop, con browser di tipo grafico in grado di interpretare e rappresentare un codice divenuto del tutto estraneo alle specifiche formali.

Il codice HTML, nato per strutturare i contenuti ed esplicitarne il valore semantico, è talmente stravolto da risultare del tutto snaturato. I contenuti e la loro rappresentazione grafica sono irrimediabilmente mescolati.

Tuttavia, questo degrado del codice è la naturale conseguenza della mancanza di strumenti che permettessero, a chi aveva il compito di realizzare le pagine Web, di separare i contenuti dalla loro formattazione.

L'introduzione dei CSS

Nel 1996 il W3C ha rilasciato le specifiche CSS1 che, assieme alle specifiche CSS2 pubblicate nel 1998, hanno messo a disposizione dei web designer lo strumento che consente di scrivere codice (X)HTML ben strutturato, leggero, semanticamente valido, separato dall'impaginazione finale e, nel contempo, di controllare l'aspetto della pagina.

Dal punto di vista concettuale, i CSS sono semplicemente un insieme di regole il cui compito è istruire il browser su come debbano essere rappresentati i contenuti inseriti nel documento (X)HTML. In pratica, i CSS permettono agli autori di specificare il modo in cui il browser deve rappresentare un oggetto, o elemento, (X)HTML.

Nonostante i CSS2 siano disponibili ormai da sette anni, soltanto negli ultimi tempi i browser hanno raggiunto un'evoluzione tale da consentirne l'utilizzo.

Con la comparsa delle versioni 5 di Internet Explorer, la diffusione di Mozilla e dei browser che da esso derivano, la distribuzione di Opera 7 e Netscape Navigator 7 e la progressiva scomparsa delle versioni più datate, i CSS possono finalmente diventare lo strumento d'elezione per l'impostazione grafica delle pagine, mentre il codice (X)HTML può riappropriarsi del proprio ruolo di linguaggio di marcatura per la trasmissione strutturata di contenuti.

Con la comparsa e la diffusione dei browser in grado di interpretare i CSS2, quasi di colpo il 99% dei siti Web è divenuto obsoleto, come diceva, giustamente, Jeffrey Zeldman già nel 2002 in un suo articolo apparso sulla nota Webzine Digital Web (http://www.digital-web.com/articles/ 999_of_websites_are_obsolete/). Da allora, alcune pagine sono state attualizzate, ma quelle non rinnovate sono ormai assolutamente obsolete.

Con la corretta implementazione (seppur a volte ancora parziale) dei CSS da parte dei più comuni browser, oggi finalmente non è più necessario utilizzare le vecchie tecniche per ottenere pagine Web gradevoli dal punto di vista grafico. Oggi è possibile utilizzare i CSS e l'(X)HTML secondo quanto indicato dalle specifiche W3C e, di conseguenza, realizzare le pagine secondo gli standard internazionali ottenendo così tutti i vantaggi relativi.

Il costo di questi vantaggi? Un cambiamento, più o meno radicale, nel modo di lavorare e di concepire la pagina. Ogni vantaggio ha un costo, è un principio fondamentale della natura (ha a che fare con il noto principio di conservazione dell'energia), ma si tratta di un costo ben ripagato.

| << | < | > | >> |

Pagina 5

I vantaggi degli standard

La compatibilità

Gli standard W3C costituiscono la base comune su cui sono stati sviluppati tutti i browser e i dispositivi per la navigazione Internet.

Conseguentemente, un sito rispettoso degli standard sarà compatibile con tutti i browser passati e, soprattutto, con quelli futuri.

La compatibilità non implica l'uniformità di rappresentazione. Un palmare (allo stato attuale della tecnologia) non è assolutamente in grado di rappresentare una pagina Web allo stesso modo di un PC, tuttavia una pagina standard può essere visualizzata con tutti i browser (indipendentemente dal dispositivo) in grado di leggere l'(X)HTML, siano essi installati su computer desktop, palmari, cellulari o televisori di ultima generazione. Le prime versioni dei browser più diffusi avevano comportamenti proprietari lontani dagli standard, per cui le pagine in passato venivano sviluppate per assecondare tali comportamenti. Le versioni ora disponibili sono invece orientate verso la massima aderenza agli standard; quindi, pagine che già oggi faticano a funzionare in modo efficace sui diversi browser, in futuro funzioneranno ancora peggio.

La strada per lo sviluppo del Web passa oggi dagli standard sviluppati dal W3C, comunemente accettati e riconosciuti.

La compatibilità con i diversi browser si raggiunge costruendo il proprio codice su una base comune ai browser disponibili, sugli standard universalmente riconosciuti, piuttosto che sulla combinazione di differenti soluzioni proprietarie.

Indipendenza dal dispositivo

Le pagine basate sugli standard si adattano naturalmente ai diversi programmi utente, indipendentemente dal tipo di dispositivo (PC, palmare, cellulare, televisore) e dal tipo di browser (grafico, testuale, sintetizzatore vocale, braille).

Attraverso i CSS è addirittura possibile creare versioni appositamente strutturate per i diversi dispositivi utilizzabili.

L'accessibilità

Gli standard non implicano piena accessibilità, né la garantiscono. Nondimeno, la compatibilità con le specifiche sulle quali sono basati i programmi utente e l' indipendenza dal dispositivo contribuiscono pesantemente all'accessibilità finale di una pagina; non è possibile ritenere accessibile una pagina che non sia in grado di adattarsi al dispositivo, al browser e agli eventuali strumenti di ausilio utilizzati dall'utente.

Gli standard garantiscono soltanto una sorta di "accessibilità zero", un livello minimo di accessibilità che consente all'utente il pieno utilizzo della pagina, anche se questo potrebbe significare (ma non è affatto detto che ciò sia necessario) disabilitare i CSS e JavaScript.

Sviluppo e manutenzione

Il codice standard è più semplice e ordinato delle vecchie "zuppe di codice". Ogni oggetto viene inserito sulla base della sua funzione strutturale o del suo significato semantico. Risulta più semplice produrre codice aderente agli standard ed è più facile effettuare la manutenzione di un codice che, già a prima vista, rivela tutte le sue implicazioni sul risultato finale. Effettuare modifiche o aggiornamenti, aggiungere o rimuovere elementi diventano operazioni molto semplici, poiché il codice è più chiaro e comprensibile, in quanto non mischia in maniera caotica elementi di struttura e presentazione.

Leggerezza del codice

Il codice standard è sempre più leggero del codice non standard. Spesso la differenza può raggiungere un fattore pari al 200% e oltre (è bene, a questo proposito, sapere che i CSS, come le immagini, sono memorizzati nella cache del browser).

Pagine più leggere significano non solo siti più veloci da scaricare e visualizzare per l'utente, ma anche minori costi per la banda necessaria a servire il traffico generato dal sito.

Dimezzare il peso di una pagina significa dimezzare i costi e migliorare l'esperienza dell'utente.

Oltre al peso, ciò che favorisce la velocità di navigazione, è la rapidità con cui un browser è in grado di rappresentare la pagina dopo averla scaricata. Una pagina ben strutturata, che si appoggia ai CSS per la formattazione e l'impaginazione, è più rapida da rappresentare rispetto a una pagina il cui codice è mal organizzato, ridondante e con qualche errore (che il browser dovrà correggere, se ne è in grado, attraverso calcoli che aumentano ulteriormente il tempo necessario alla visualizzazione).

Motori di ricerca

I motori di ricerca, com'è noto, indicizzano il testo presente nelle pagine. Quanto più la parte di contenuto è prevalente rispetto al peso della pagina, ovvero, quanto più testo è presente rispetto al codice di marcatura, tanto meglio la pagina sarà indicizzata.

Gli standard e i CSS, permettendo di ridurre notevolmente il peso delle pagine e snellendo la marcatura dei contenuti, favoriscono un buon posizionamento delle pagine nei motori di ricerca.

Inoltre i CSS consentono di utilizzare il codice di marcatura per definire la semantica dei contenuti, anziché il loro aspetto: anche la semantica è importante per un buon posizionamento nei motori di ricerca.

In pratica, l'adozione degli standard e dei CSS permette di migliorare, senza necessità di interventi specifici, il posizionamento delle pagine Web attraverso contenuti semanticamente ricchi e validi, preminenti rispetto al codice necessario per la marcatura dei contenuti stessi.

Standard come filosofia

Gli standard cui si è accennato in questo capitolo, e che saranno la linea guida dei capitoli successivi, non devono essere confusi con la mera validità del codice. Una pagina che abbia codice valido non necessariamente è anche rispettosa degli standard; si tratta soltanto di un documento il cui codice rispetta la sintassi formale del linguaggio dichiarato nella DTD adottata.

Spesso, infatti, capita di vedere pagine che risultano formalmente valide, ma il cui codice non rispetta affatto la semantica del documento: paragrafi realizzati con l'elemento <div>, titoli marcati con gli elementi e , liste formate da una serie di tag sono solo alcuni esempi di violazione degli standard che, tuttavia, non inficiano la validità del codice.

Una pagina può essere valida se presenta tutti i tag annidati in modo corretto e tutti gli attributi chiusi tra apici o doppi apici ed è priva di elementi o attributi non riconosciuti dal linguaggio dichiarato; tuttavia, potrebbe non essere realmente aderente agli standard facendo un uso errato, dal punto di vista semantico, strutturale e concettuale, di quegli elementi e attributi scritti correttamente.

Al contrario, una pagina può essere pienamente aderente agli standard e utilizzare tutte le diverse tecnologie nel rispetto delle specifiche ma, tuttavia, risultare non formalmente valida per un banale errore, come una '&' non sostituita da '&' negli indirizzi, o un apostrofo o un altro carattere non rientrante nel set di caratteri in uso. Ancora diverso è il caso di un errore dovuto a un elemento, o attributo, utilizzato laddove non previsto o consentito come, per esempio, un elemento contenuto in un elemento <a>.

La validità del codice non implica il rispetto degli standard e il rispetto degli standard non ha come presupposto la validità del codice. Seppure distinte, validità del codice e aderenza agli standard non hanno valore se prese singolarmente, poiché è solo dalla loro unione che si ottengono pagine Web conformi agli standard definiti dal W3C.

CSS

Nei capitoli seguenti saranno illustrati i CSS sia dal punto di vista teorico sia dal punto di vista pratico.

Verranno discussi sintassi e possibilità di utilizzo, con un occhio di riguardo per le reali possibilità di applicazione e per i problemi di compatibilità con i diversi browser, in questo modo vedremo come sia possibile utilizzare i Fogli di Stile a Cascata (i CSS appunto) per fornire l'aspetto desiderato a pagine realizzate in conformità agli standard definiti dal W3C.

| << | < | > | >> |

Indice

| << | < | > | >> |

Pagina xix

| << | < | > | >> |

Pagina 3

| << | < | > | >> |

Pagina 5

| << | < |