XML/CSS

Obiettivi di apprendimento

• conoscere i vantaggi dell'utilizzo dei CSS
• conoscere i limiti dei CSS, in modo da essere in grado di trovare la soluzione migliore per il vostro documento
• saper implementare e utilizzare i CSS su un documento XML

CSS (acronimo di Cascading Style Sheets, cioè "fogli di stile a cascata") è un linguaggio che descrive la forma in cui deve essere presentato un documento strutturato.

Un file XML o un documento basato su HTML non hanno uno stile impostato, ma sono costituiti da testo strutturato senza informazioni di stile. Come apparirà il documento quando sarà stampato su carta o sarà visualizzato in un browser, è determinato da un foglio di stile. Un buon modo per aggiornare un documento un aspetto coerente e facile da aggiornare è utilizzando i CSS.

Storia del CSS

I fogli di stile sono stati usati, in una forma o un'altra, fin dagli albori del codice HTML nei primi anni novanta. Vari browser includevano un proprio linguaggio di stile che poteva essere utilizzato per personalizzare l'aspetto dei documenti web. Originariamente, i fogli di stile erano mirati all'utente finale; le prime revisioni dell'HTML non fornivano molte facilitazioni per la presentazione degli attributi, quindi spesso spettava all'utente decidere come sarebbero apparsi i documenti web.

Man mano che il linguaggio HTML cresceva, tuttavia, è arrivato a comprendere una più ampia varietà di capacità stilistiche per soddisfare le richieste degli sviluppatori web. Con queste funzionalità, i fogli di stile sono diventati meno importanti e un linguaggio esterno ai fini della definizione degli attributi di stile non è stato ampiamente accettato fino allo sviluppo dei CSS.

Il concetto di foglio di stile CSS è stato originariamente proposto in 1994 da Håkon Wium Lie. All'epoca Bert Bos stava lavorando su un browser chiamato Argo, che usava dei fogli di stile propri; i due decisero di collaborare per sviluppare il linguaggio CSS.

Un certo numero di altri linguaggi di fogli di stile erano già stati proposti, ma il linguaggio CSS è stato il primo a incorporare l'idea di "cascata": la capacità cioè per uno stile di un documento per essere ereditato da più di un foglio di stile. Ciò consentiva allo stile preferito di un utente di ignorare lo stile specificato dall'autore del sito in alcune aree, ereditando ("a cascata") in altre lo stile dell'autore. La capacità di cascata in questo modo permette sia agli utenti sia agli autori del sito di aggiungere flessibilità e controllo; ha permesso un mix di preferenze stilistiche.

La proposta di Håkon è stata presentata alla conferenza "Mosaic and the Web" di Chicago nel 1994, e poi di nuovo con Bert Bos nel 1995. In questo periodo è stato istituito il Consorzio del World Wide Web; il W3C si è presto interessato allo sviluppo dei CSS, e a questo scopo ha organizzato un workshop. Håkon e Bert sono stati il principale staff tecnico del progetto, con la partecipazione di altri membri, tra cui Thomas Reardon di Microsoft, che hanno partecipato al progetto. Alla fine del 1996, il CSS era quasi pronto a diventare ufficiale. La raccomandazione di livello 1 del CSS è stata pubblicata nel dicembre 1996.

All'inizio del 1997, al CSS è stato assegnato un gruppo di lavoro dedicato all'interno del W3C. Il gruppo ha cominciato ad affrontare questioni che non erano state affrontate nel CSS 1, con la creazione di CSS 2, che è stato pubblicato come raccomandazione ufficiale nel maggio 1998. Il CSS 3 è ancora in fase di sviluppo.

Perché usare il CSS?

Codice più pulito

Una massa di tag HTML che gestiscono elementi di design in genere oscurano il contenuto di una pagina, rendendo il codice più difficile da leggere e mantenere. Utilizzando i CSS, il contenuto della pagina è separato dal design, rendendo la produzione di contenuti in formati come HTML, XHTML e XML il più semplice possibile.

Le pagine si caricano più velocemente

Il design non CSS in genere richiede più codice rispetto a un sito web progettato da CSS.

In un design non CSS, le informazioni sulla grafica vengono ricaricate ogni volta che un visitatore accede a una nuova pagina. Inoltre, i punti più fini del design vengono eseguiti goffamente. Ad esempio, un metodo comune per definire la spaziatura di una pagina web consiste nell'utilizzare immagini GIF vuote all'interno delle tabelle.

L'utilizzo del CSS mantiene il contenuto e il design separati, così che sarà necessario meno codice. Il file CSS viene caricato una sola volta per sessione e viene salvato localmente nella cache dell'utente. Tutte le informazioni sulle dimensioni sono definite in questo foglio di stile, rendendo inutili le soluzioni scomode come l'uso di immagini GIF vuote.

Sebbene una quantità crescente di utenti di internet disponga di banda larga, la dimensione di una pagina web può essere un aspetto importante per gli utenti che sono limitati da connessioni dial-up. Supponiamo che un utente dial-up acceda al sito web di una società e incontri lunghi tempi di caricamento. È possibile che il visitatore si fermi o che si faccia un'opinione di questa azienda come "lenta". In questo caso, una differenza apparentemente minima potrebbe significare un aumento delle entrate.

Inoltre, la larghezza di banda non è gratuita e la maggior parte delle aziende di webhosting limitano la quantità utilizzata. Infatti, molti host si caricano in base all'utilizzo della larghezza di banda, quindi meno codice potrebbe anche ridurre i costi.

La riprogettazione diventa semplice

Se usato correttamente, CSS è uno strumento molto potente che dà un Web Architect il controllo completo sulla presentazione di un sito. Si tratta di una notazione in cui sono controllate le regole grafiche. Questo è molto utile per un grande sito web che richiede un aspetto coerente per ogni tipo di elemento (ad esempio un titolo, un sottotitolo, un pezzo di codice o un paragrafo).

Ad esempio, supponiamo che una società disponga di un sito web di 1 200 pagine, che ha impiegato molti mesi per completare. L'azienda subisce però un rebranding e quindi il font, lo sfondo, lo stile dei collegamenti ipertestuali e tutto il resto devono essere aggiornati con il nuovo design aziendale. Se il sito è stato progettato correttamente utilizzando il CSS, questa modifica è semplice, perché richiederebbe di modificare le linee appropriate di un solo file CSS (supponendo che ci sia un foglio di stile esterno). Se il CSS non viene utilizzato, il codice che gestisce l'aspetto è memorizzato in ogni singola pagina. Per aggiornare il design, in questo caso, ogni file dovrebbe essere aggiornato singolarmente.

Accessibilità

Le persone con disabilità visive o gli utenti con speciali browser web, ad esempio le persone non vedenti, probabilmente preferiranno un sito web progettato con il CSS rispetto a uno non progettato utilizzando i CSS. Poiché CSS consente di definire l'ordine di lettura separatamente dal layout visivo, rende più facile la lettura di una pagina con i browser speciali.

Molti progettisti bloccano la dimensione del carattere in pixel, impedendo all'utente di modificare la dimensione del carattere. Un buon design CSS consente all'utente di aumentare o diminuire la dimensione del carattere in modo da rendere le pagine più utilizzabili. A un numero significativo di navigatori web piace usare un ingrandimento di 300% o più.

Dare all'utente la possibilità di cambiare la dimensione del carattere non farà alcuna differenza per un utente normale, ma può fare la differenza per le persone che hanno difficoltà visive. Ponetevi la domanda: per chi è fatto il sito? per i visitatori o per il progettista?

I siti web progettati con i CSS tendono a essere visualizzati meglio rispetto a un design basato su tabelle, nei browser web utilizzati su smartphone e tablet. L'uso dei telefoni cellulari per la navigazione sta continuando ad aumentare. Un design basato su tabelle renderà le pagine web inaccessibili a questi utenti.

Fate attenzione con i vostri design CSS. L'uso improprio del posizionamento assoluto e delle dimensioni assolute anziché relative può rendere le pagine web meno accessibili o del tutto inaccessibili.

Migliori risultati nei motori di ricerca

L'uso estensivo di tabelle confonde i motori di ricerca, e si possono effettivamente avere problemi di separazione del contenuto dal codice. I robot dei motori di ricerca iniziano a leggere nella parte superiore della pagina, e vogliono scoprire quanto sia rilevante la pagina web il più velocemente possibile. Anche in questo caso, meno codice renderà più facile per i motori di ricerca trovare il codice che è rilevante, e probabilmente darà alla vostra pagina web un posizionamento migliore.

Svantaggi del CSS

L'uso di CSS per lo styling ha pochi svantaggi. Tuttavia alcuni browser, soprattutto quelli più vecchi, a volte presenteranno la pagina in modo non corretto. Molti esperti pensano che la formattazione XML con CSS non è il futuro del Web. L'opinione principale è che XSL sarà il nuovo standard. Quindi assicuratevi di leggere il capitolo precedente di questo libro ancora una volta. Le parti di formattazione di XSL e CSS sono abbastanza simili. Ad esempio, sarà possibile utilizzare tutte le proprietà e i valori CSS1 e CSS2 in XSL con lo stesso significato di CSS.

Livelli CSS

La prima specifica CSS a essere diventata una raccomandazione ufficiale W3C è stato il CSS 1, pubblicato nel dicembre 1996. Tra le sue funzionalità c'è il supporto per:

• proprietà del font come tipo di carattere e enfasi;
• colore del testo, sfondi e altri elementi;
• attributi di testo come la spaziatura tra parole, lettere e righe di testo;
• allineamento di testo, immagini, tabelle e altri elementi;
• margine, bordo, padding e posizionamento per la maggior parte degli elementi;
• identificazione univoca e classificazione generica di gruppi di attributi.

Il livello CSS 2 è stato sviluppato dal W3C e pubblicato come raccomandazione nel maggio 1998. Un superset di CSS 1, CSS 2 include una serie di nuove funzionalità, tra cui il posizionamento assoluto, relativo e fisso degli elementi, il concetto di tipi di supporto, il supporto per i fogli di stile fonetica e il testo bidirezionale e nuove proprietà del carattere come le ombre. Il W3C mantiene la raccomandazione CSS2.

Il CSS 2 Revisione 1, o CSS 2.1, corregge gli errori in CSS 2, rimuove le funzionalità scarsamente supportate e aggiunge le estensioni del browser già implementate alla specifica.

A differenza delle specifiche CSS 2, che è costituita da un'unica specifica, le specifiche CSS3 sono costituite da sezioni separate dette "moduli". A causa di questa modularizzazione, le specifiche CSS3 hanno differenti stati di avanzamento e stabilità. A novembre 2014, cinque moduli risultano pubblicati formalmente dal W3C come raccomandazioni:

• 2011-06-07: CSS Color Module Level 3
• 2011-09-29: CSS Namespaces Module Level 3
• 2011-09-29: Selectors Level 3
• 2012-06-19: Media Queries
• 2013-11-07: CSS Style Attributes

Sintassi CSS e proprietà

La sezione seguente contiene un elenco di alcune delle proprietà CSS più comuni. La sintassi per l'utilizzo dei CSS in un documento XML è la stessa di quella per HTML. La differenza è nel modo in cui si collega il file CSS al documento XML. Per fare questo è necessario scrivere <?xml-stylesheet href="X.css" type="text/css"?> prima dell'elemento radice del documento XML, dove X.css naturalmente è il nome del file CSS.

Come accennato in precedenza in questo modulo, CSS è un insieme di regole che determina come gli elementi in un documento verranno visualizzati. La regola ha due parti: un selettore e un gruppo di una o più dichiarazioni compresa da parentesi graffe:

selettore { 
dichiarazione;
...
}

Il selettore è normalmente il tag di cui si desidera stabilire lo stile. Ecco un esempio di una semplice regola che contiene una singola dichiarazione:

h1 { 
color: red; 
}

Risultato: tutti gli elementi h1 nel documento vengono mostrati con il colore rosso del testo.

La sintassi generale

Le regole sono di solito definite così:

selettore {
dichiarazione;
...
}

La dichiarazione è così formata:

Proprietà: valore;

Ricordate che ci possono essere diverse dichiarazioni in una regola. Un errore comune è quello di confondere i due punti, che separano la proprietà e il valore di una dichiarazione, con i punti e virgola, che separano le dichiarazioni. Un selettore sceglie gli elementi ai quali si applica la regola, e la dichiarazione imposta il valore per le diverse proprietà degli elementi scelti.

Torniamo al nostro esempio:

h1 {
color: red;
}

Nel nostro esempio:

• selettore è l'elemento h1 (titolo di primo livello)
• dichiarazione del colore: red (rosso)

La proprietà color ha come valore red.

Le dichiarazioni multiple possono essere scritte su una singola riga o su più righe:

h1 { color:red; background-color:white; }

oppure

h1 {
color:red;
background-color:white;
}

I dettagli delle proprietà definite da CSS possono essere trovati nel wikibook CSS.