Salta al contenuto principale

Aiutaci a migliorare il sito: rispondi al questionario

CSS: una sigla misteriosa?

Come gestire l'impaginazione dei siti web secondo gli standard internazionali e la normativa italiana sull'accessibilità.

Se state pensando ad autopsie e analisi balistiche siete fuori strada: quello è CSI, sigla della Polizia scientifica americana, nonché titolo di una fortunata serie televisiva. I Css sono qualcosa di assolutamente non cruento, ma ugualmente appassionante. Quantomeno coi Css vi potete confrontare in prima persona e non restare semplici spettatori passivi.

Cominciamo a conoscerli dal nome: Css è l'acronimo di Cascade Style Sheet, cioè fogli di stile a cascata. Chi ha qualche dimestichezza con programmi di impaginazione (quali per esempio Quark Xpress o Adobe InDesign) o anche semplicemente con i comandi di formattazione di un programma di scrittura (da Microsoft Office e OpenOffice) sa che attraverso gli stili si possono definire le caratteristiche tipografiche di un paragrafo o di singole lettere, parole, titoli; e sa anche che questi comandi sono molto utili per impaginare un documento, una serie di documenti o un libro in maniera corretta, omogenea e coerente.

I fogli di stile del web (Css), pur rispondendo allo scopo di una corretta e coerente impaginazione, hanno peculiarità e differenze rispetto a quelli usati dai programmi di videoscrittura o impaginazione. D'altronde, una pagina web è proprio un'altra cosa rispetto a una pagina stampata (benché questo concetto sia ancora difficile da far digerire a molti).

Per prima cosa non si limitano a definire corpi, caratteri, colori e interlinea, ma anche bordi, sfondi, dimensioni e posizioni di blocchi di contenuto (testuale o visivo), nonché cambiamenti dati dall'azione del mouse; inoltre sono combinabili in maniera plurima: un elemento caratterizzato da uno stile ne può contenere una serie con altri stili che a loro volta ne possono contenere altri; e ogni elemento eredita alcune proprietà dallo stile di quello che lo contiene: ecco perché si chiamano fogli di stile "a cascata".

Altra fondamentale differenza è che sono esterni al documento: da una parte ci sono le pagine web (html, asp, php, ecc.) con i loro contenuti; dall'altra i fogli di stile, che contengono le istruzioni per la visualizzazione da parte del browser di quei contenuti; e possono anche essercene di diversi, a seconda del modo in cui quei contenuti vengono fruiti: un foglio di stile per la visione a schermo, un foglio di stile per la stampa, un altro per i browser vocali; e naturalmente è possibile definire presentazioni grafiche diverse di stessi contenuti semplicemente cambiando il foglio di stile. In questo modo un unico contenuto si adatta a esigenze diverse . In siti di grandi dimensioni, con centinaia di pagine, questo significa un risparmio enorme di tempo sia nello scrivere il codice (per chi fa il sito), sia per i browser che devono caricare e interpretare file meno pesanti (le pagine web senza lunghe r ripetitive istruzioni sui caratteri, corpi e colori), oltre a garantire, come si diceva prima, coerenza e omogeneità grafica, nonché una maggiore accessibilità ai contenuti.

È per questo che i Css sono l'oggi e il domani di Internet.

Indirizzi utili

Per avere una idea di quanto si possa fare con i Css, vi consiglio quattro siti, fra i molti dedicati ai Css, abbastanza ricchi da perderci un pomeriggio. Il primo è un classico da cui è stato tratto anche un libro: CSS Zen Garden; si tratta di uno stesso contenuto (una sola pagina web che descrive i vantaggi dei fogli di stile) che centinaia di web designer in tutto il mondo si sono divertiti a "vestire" e impaginare nei modi più diversi; visitatelo pure nella sua traduzione italiana. L'altro sito, invece, è di un ragazzo inglese (Stu Nicholls) che si è davvero divertito a sfruttare ogni comando sino a stravolgere proprio, in alcuni casi, il senso dei Css (separare il contenuto dalla sua presentazione); nel suo sito, oltre a mostrare esempi di menu e layout, presenta immagini e addirittura giochi realizzati con l'uso dei Css: buon divertimento!

Gli utlimi due, invece, sono raccolte di bei siti realizzati coi Css: Web Standard Awards, il sito del premio per i siti web realizzati nel rispetto delle regole standard (che, per esempio, escludono l'uso delle tabelle e richiedono l'uso dei Css); mensilmente vengono segnalati uno o più siti giudicati meritevoli dalla commissione, e l'archivio è molto corposo; mentre un'ampia raccolta (senza premi) è disponibile su CSSBeauty.

Ottime lezioni e guide in italiano si possono trovare su Html.it e su Constile.org