Skip to topic | Skip to bottom
Home

Tesi
Tesi.LinguaggioCssr1.21 - 01 Dec 2005 - 11:54 - AlessandroCalvaresitopic end

Start of topic | Skip to actions

CSS (Cascading Style Sheets)

(1) Introduzione
(2) Caratteristiche del linguaggio CSS

(1) Introduzione

Il linguaggio CSS (Cascading Style Sheets) rappresenta senza dubbi uno dei più necessari tra gli standard introdotti dal W3C. Sebbene la sua diffusione risulta ancora oggi alquanto travagliata, esso costituisce di certo un mezzo indispensabile per intraprendere una coscienziosa inversione di rotta verso un’effettiva divisione dei contenuti del web dalla loro presentazione.

Progettato dallo svedese Håkon Wium Lie e dal belga Bert Bose, introdotto ufficialmente nel 1996 (CSS Level 1) ed ampliato nel 1998 (CSS Level 2), il linguaggio CSS nasce con l’intento di garantire una migliore visualizzazione delle pagine web, permettendo di controllarne in modo dettagliato l’aspetto tipografico e presentazionale. Esso si rivela oggi, con non poche difficoltà, uno strumento potente e flessibile, attraverso il quale è possibile produrre complessi layout destinati, almeno nelle intenzioni, a media differenti (browser, stampanti, tv, palmari, cellulari, dispositivi aurali, etc.).

Attraverso un particolare meccanismo di cascading, combinato con l’utilizzo di fogli di stile, si ha la possibilità di definire in modo indipendente, le diverse regole di formattazione di un documento. Questo comporta la duplice possibilità di poter gestire in un unico file, lo stile di un intero sito, ma anche, di poter definire per uno stesso documento, differenti stili di presentazione. Una duttilità progettuale certamente da non sottovalutare.

Elaborare siti basati su layout CSS, implementando un’effettiva separazione tra contenuti e visualizzazione, comporta infatti tempi di sviluppo e di manutenzione notevolmente ridotti, pagine più leggere e veloci da caricare ed un conseguente risparmio di banda. Ciò, innegabilmente, introduce vantaggi, anche economici, sia per gli utenti, che per gli sviluppatori ed i loro clienti.

Vantaggi che possono essere verificati, ad esempio, se si prova a passare da un design table-based (che utilizza tabelle per strutturare il layout del documento e tag html per l’aspetto tipografico) ad un design table-less (basato esclusivamente sull’utilizzo combinato di contenuti html e fogli di stile). La differenza si noterà soprattutto se il codice di partenza è particolarmente "sporco", nel quale cioè, bisogna districarsi tra giungle di tabelle annidate e ridondanze di formattazioni (così facilmente prodotte dai tanto amati/odiati editor WYSIWYG). Scenario, questo, per niente inusuale

Va detto, comunque, che a compromettere la "purezza" del codice HTML, almeno rispetto alle sue specifiche iniziali, hanno contribuito pesantemente, fin dagli albori del web, i due browser per lungo tempo più diffusi: Netscape ed Explorer. Questi, difatti, permettevano l’utilizzo di tag proprietari, pensati appositamente per controllare l’aspetto del documento, e che furono in seguito introdotti nelle successive versioni di HTML. Si cercava, comprensibilmente, di venire incontro alle allora crescenti esigenze comunicative dei designer, frustrati dal fatto che, inizialmente, non venivano offerti mezzi adeguati per l’impaginazione. In questo modo, invece, si potevano finalmente realizzare complessi ed articolati layout, utilizzando tuttavia l’HTML per scopi, in fondo, per i quali non era stato di certo progettato. Il linguaggio CSS, voleva quindi essere anche un mezzo prezioso per recuperare un’indispensabile pulizia del codice HTML.

Tuttavia, nonostante la prima specifica di CSS sia stata introdotta già nel 1996, i fogli di stile (e le relative tecniche di sviluppo), sono stati oggetto di un lentissimo processo di diffusione, che vedeva da una parte browser che offrivano grossolane implementazioni del linguaggio, e dall’altra diffidenti designer, scoraggiati sia dalla disomogeneità di visualizzazione dei documenti, che dallo sforzo di dover apprendere nuove, e apparentemente più complicate, tecniche di sviluppo.

Per un lungo periodo, quindi, il diffondersi di questa tecnologia è stato rallentato dallo scarso interesse dei produttori di browser a supportare in modo adeguato e completo un nuovo linguaggio definito da un’organizzazione esterna. È indubbio però che, sebbene nel corso degli anni ci si fosse poi avvicinati ad un supporto apprezzabile da parte di quasi tutti i browser, la maggioranza dei web designer, dopo anni di HTML presentazionale, hanno continuato a non avere fiducia in uno strumento utilizzato, al limite, soltanto per la formattazione di testi, preferendo invece, per la strutturazione del layout, tecniche largamente diffuse e ben più stabili, basate appunto sull’utilizzo di tabelle HTML.

Se oggi quindi, si incomincia finalmente a vedere una concreta inversione di tendenza a favore dell’utilizzo dei CSS nella progettazione dei siti, lo si deve principalmente allo sforzo di organizzazioni "collaterali" (come ad esempio il WaSP - Web Standards Project) che, più dello stesso W3C, hanno sensibilizzato migliaia di web designer nel mondo ad adottare tecniche di progettazione basate sugli standard web. Promuovendo inoltre singolari campagne per il rinnovo dei browser da parte degli utenti1, hanno fatto pressione sulle stesse case produttrici di browser, affinché si garantisse un supporto adeguato ed uniforme agli standard proposti dal W3C. Potendo contare, inoltre, sul crescente fiorire di risorse, comunità e portali dedicati esclusivamente alla diffusione di tecniche di design basate del tutto su CSS, si sta finalmente dimostrando in modo concreto che è possibile creare design complessi, funzionali ed accessibili, senza nulla togliere alla fantasia di rampanti designer, che possono ora contare su una quasi totale omogeneità di visualizzazione su browser differenti2, con gli enormi vantaggi che ne conseguono, e ne conseguiranno in futuro.

Si noti, infatti, che CSS è un linguaggio indipendente dagli specifici elementi del documento al quale viene applicato, sia esso HTML, il suo successore XHTML, o tutta la famiglia dei linguaggi XML. Questo fa sperare in una piena compatibilità con tecnologie future, e in una corretta visualizzazione attraverso browser e dispositivi di prossima generazione: una sorta di post-compatibilità.

Tuttavia, paradossalmente, dato il deludente o nullo supporto fornito invece dai browser più datati (e neanche tanto), i fogli di stile sembrano trascinarsi dietro un imbarazzante problema di retro-compatibilità, intesa come una corretta fruizione e visualizzazione di un sito, tramite appunto i browser di cui sopra3. In realtà, questo è un falso problema, legato piuttosto ad un ambiguo concetto di compatibilità: un’errata visualizzazione dei contenuti su vecchi browser non rappresenta, dopotutto, un problema definitivo ed irreversibile, perché, mentre il design viene infelicemente interpretato, i contenuti restano invece gli stessi. È proprio adottando tecniche di progettazione basate sull’utilizzo di CSS, che risulta facile fare in modo che i contenuti HTML siano, sempre e comunque, pienamente fruibili, anche su browser che non supportano affatto i fogli di stile4 .

Alla fine comunque, nonostante i numerosi e dimostrati vantaggi, ad alimentare ancora qualche dubbio e preoccupazione, rimane il fatto che, nonostante da tempo si stia lavorando ad una nuova specifica del linguaggio (CSS Level 3), nessuno dei browser oggi in circolazione fornisce ancora una totale implementazione di CSS Level 2. Sicuramente quindi, si dovrà aspettare molto tempo prima che la nuova specifica possa vedere luce, e chissà quanto tempo, visti i precedenti, prima che tutti i browser riescano ad implementarla in modo adeguato ed uniforme.

(2) Caratteristiche del linguaggio CSS

Quello che segue non vuole essere un manuale dettagliato del linguaggio CSS, ma piuttosto una panoramica sui principali aspetti che interessano la produzione di fogli di stile, e si rimanda pertanto alla consultazione delle specifiche ufficiali del linguaggio5, per approfondire maggiormente gli argomenti trattati.

La struttura di un documento

I fogli di stile CSS, va precisato, sono nati per modificare la rappresentazione degli elementi strutturali contenuti in un documento, sia esso HTML, XHTML che XML. Prima di affrontare i meccanismi alla base del loro funzionamento, è bene quindi fare mente locale su alcuni concetti legati alla struttura dei documenti ai quali i fogli di stile vengono applicati.

Ogni documento (X)HTML6 (come anche XML), può essere infatti rappresentato strutturalmente secondo un modello ad albero, nel quale è possibile individuare una gerarchia ordinata tra i nodi che lo compongono.Volendo usare la metafora dell’albero genealogico, tutti gli elementi hanno tra di loro relazioni del tipo genitore-figlio o antenato-discendente, a partire dall’unico elemento che racchiude tutti gli altri, il capostipite, normalmente chiamato radice dell’albero.

Figura 2.1: Un esempio di albero derivato dalla struttura di un semplice documento (X)HTML. L’elemento h1 è quindi figlio dell’elemento body e discendente di html, che è la radice dell’albero.

Tenendo bene a mente un modello strutturale di questo tipo, sarà più facile comprendere a fondo i concetti ed i meccanismi che garantiscono un corretto funzionamento del linguaggio CSS.

Collegare lo stile al documento

Esistono diverse modalità per associare uno stile CSS al codice di un documento (X)HTML, a seconda delle varie esigenze progettuali. Secondo le specifiche, infatti, sono previsti stili:

  • In linea: lo stile viene definito direttamente nel tag (X)HTML che si vuole modificare, specificando nell’attributo style le diverse regole CSS. Questa tecnica, ovviamente, non ha alcun grado di generalità, in quanto lo stile rimane associato soltanto a quello specifico elemento.

    Esempio: il codice <h1 style="color: red"> Titolo</h1> produce un titolo rosso, ma lo stile risulta associato esclusivamente a quello specifico h1.

  • Incorporati: lo stile viene definito fuori dal contenuto del documento, ma inserito comunque all’interno dell’elemento head, attraverso il tag style, che andrà a contenere le diverse regole CSS. L’elemento style prevede l’attributo type (obbligatorio), che identifica il tipo di dati da collegare (il valore ammesso è text/css), e l’attributo media (opzionale) che specifica il supporto cui è destinato il documento (all, screen, print, aural, etc.).

    Esempio: il codice <style type="text/css"> h1 { color: red } </style> applica un colore rosso al testo contenuto in tutti gli elementi h1 del documento.

  • Linkati: lo stile viene definito in un file esterno, ed incluso nel documento attraverso il tag link, all’interno comunque dell’elemento head. L’elemento link prevede l’attributo rel (obbligatorio) che descrive il tipo di relazione tra il documento ed il file collegato (generalmente stylesheet), l’attributo href (obbligatorio) che specifica l’indirizzo assoluto o relativo del foglio di stile, e gli attributi type e media (già introdotti). È possibile, inoltre, linkare più fogli di stile nello stesso documento.

    Esempio: il codice <link rel="stylesheet" type="text/css" href="stile.css" media="screen"> permette di collegare il file esterno stile.css nel quale viene definito lo stile per il documento.

  • Importati: lo stile viene definito in un file esterno, ed incluso nel documento attraverso la particolare direttiva @import inserita nel tag style, all’interno dell’elemento head. L’elemento style prevede, come nell’altro metodo, sia l’attributo type che l’attributo media. Anche in questo caso, è possibile, importare più fogli di stile nello stesso documento. Va detto, comunque, che questo metodo non è supportato dai browser più datati, ed il suo utilizzo nasconde totalmente, a questi ultimi, i fogli di stile: un buon metodo per risolvere, radicalmente, problemi di retro-compatibilità.

    Esempio: il codice <style type="text/css" media="screen"> @import url('stile.css'); </style> permette di collegare il file esterno stile.css nel quale viene definito lo stile per il documento.

Adottare una tecnica piuttosto che un’altra dipende, naturalmente, da situazione a situazione. Senza dubbio, è preferibile utilizzare di fogli di stile esterni (quindi linkati o importati), rispetto a quelli interni (in linea o incorporati), soprattutto se non si vuole rinunciare ad alcuni dei più importanti vantaggi dei CSS: avere pagine più leggere e facili da gestire, e prevedere fogli di stile multipli per uno stesso documento.

Le regole e la sintassi

Un foglio di stile, come già accennato, non è altro che un insieme di regole che permettono di stabilire l'aspetto presentazionale degli elementi strutturali di un documento. Ogni regola viene definita per mezzo di selettori, proprietà e valori, raggruppati nella forma sintattica di base:

selettore { proprietà: valore; }

Il selettore identifica l’elemento (o gli elementi) del documento a cui la regola verrà applicata, e la proprietà definisce quale aspetto dell’elemento (dimensioni, margine, colore, etc.) verrà impostato con il valore indicato.

Esempio: la regola p { font-size:14px; } imposta per tutti gli elementi p del documento una grandezza del testo pari a 14 pixel.

La coppia proprietà:valore viene anche detta dichiarazione, ed in generale, una stessa regola potrà contenere più dichiarazioni o anche più selettori.

Esempio: la regola h1, h2 { color: white; background: red; } andrà a stabilire che tutti gli elementi h1 ed h2 del documento avranno un colore del testo bianco, ed uno sfondo rosso.

Esiste inoltre la possibilità di utilizzare, in alcuni casi, una sintassi abbreviata per assegnare, in un’unica dichiarazione, valori a più proprietà logicamente correlate.

Esempio: la regola div { margin-top: 10px; margin-right: 5px; margin-bottom: 20px; margin-left: 5px } può essere abbreviata nella forma div { margin: 10px 5px 20px 5px; } ottenendo lo stesso risultato.

I fogli di stile prevedono, infine, delle strutture sintattiche particolari, le @-rules, che permettono di realizzare alcune specifiche funzioni: @import (già introdotta), @media (per specificare il tipo di supporto cui è destinato il foglio di stile), @charset (per indicare la codifica dei caratteri di un documento), @font-face (per includere un particolare font nel documento) e @page (per impostare layout destinati alla stampa).

I selettori

Il linguaggio CSS, mette a disposizione diversi tipi di selettori, per individuare con precisione le parti di un documento da sottoporre ad una specifica regola:

  • Selettore universale: espresso per mezzo di un asterisco *, permette di applicare la regola a tutti gli elementi del documento.

    Esempio: la regola * { color: red; } imposta a rosso il colore del testo di tutti gli elementi del documento.

  • Selettore di tipo: espresso nella forma semplice E, permette di applicare la regola a tutti gli elementi E che vengono incontrati nel documento.

    Esempio: la regola table { width: 500px; } imposta una larghezza di 500 pixel a tutti gli elementi di tipo table contenuti nel documento.

  • Selettore di discendenti: espresso nella forma E F, permette di selezionare gli elementi F che sono discendenti di elementi E contenuti nel documento.

    Esempio: la regola p em { color: red; } imposta a rosso il colore del testo di tutti gli elementi em discendenti di p.

  • Selettore di figli: espresso nella forma E > F, permette di selezionare gli elementi F che sono figli diretti di elementi E contenuti nel documento.

    Esempio: la regola p > em { color: red; } imposta a rosso il colore del testo di tutti gli elementi em figli diretti di p.

  • Selettore di adiacenza: espresso nella forma E+F, permette di selezionare gli elementi F che sono adiacenti (immediatamente successivi) ad elementi E contenuti nel documento.

    Esempio: la regola h1+p { font-size: 12px; } imposta a 12 pixel la grandezza del testo di tutti gli elementi p che seguono un elemento h1.

  • Selettore di attributi: espresso nella forma E[attr] o E[attr = "value"], permette di selezionare, rispettivamente, gli elementi E che abbiano un attributo attr (con qualsiasi valore), e gli elementi E il cui attributo attr valga value.

    Esempio: la regola a [target] { color: green; } specifica che tutti gli elementi a del documento che abbiano l’attributo target dichiarato (non importa con quale valore), vengano rappresentati con il colore del testo verde, mentre la regola a [target = "_blank"] { color: green; } specifica che essa deve essere applicata soltanto se l’attributo target vale _blank.

  • Selettore di pseudo-classi: espresso nella forma E:condition, permette di selezionare gli elementi E solo nel caso in cui condition sia verificata. In particolare è possibile utilizzare E:first-child (vera se E è il primo figlio di un qualche elemento), E:link (vera se E è un link non ancora visitato), E:visited (vera se E è un link già visitato), E:hover (vera se il mouse è sopra l’elemento E), E:focus (vera se l’elemento E riceve il focus), E:active (vera se l’elemento E è stato selezionato).

  • Selettore di pseudo-elementi: espresso nella forma E:pseudo-element, permette di applicare una regola ad elementi fittizi in qualche modo relazionati con E. In particolare è possibile utilizzare E:first-line (la prima riga di testo contenuta nell’elemento E), E:first-letter (la prima lettera del testo contenuto nell’elemento E), E:before (definisce il contenuto che deve comparire prima dell’elemento E), E:after (definisce il contenuto che deve comparire dopo dell’elemento E).

A dispetto delle chiare potenzialità che questi selettori introducono, è opportuno precisare che, purtroppo, non vi è da parte di tutti i browser un completo supporto, ed è pertanto consigliato controllarne la compatibilità prima dell’utilizzo7.

ID e Classi

In un documento (X)HTML si ha la possibilità di utilizzare due particolari attributi, che possono essere associati a qualsiasi elemento del documento: questi sono id e class, ma la loro presenza, tuttavia, non ha alcun effetto se non vi è una qualche corrispondenza in un foglio di stile. Il linguaggio CSS mette infatti a disposizione due particolari selettori di attributi, pensati proprio per questi casi specifici:

  • Selettore di ID: espresso nella forma E#value, permette di individuare, in modo univoco, l’elemento E nel documento per il quale l’attributo id valga value. Può essere utilizzato anche nella forma generica #value.

    Esempio: la regola #container { font-size: 12px; } imposta a 12 pixel la grandezza del testo contenuto nell’elemento (unico) che abbia l’attributo id="container".

  • Selettore di classi: espresso nella forma E.value, permette di individuare tutti gli elementi E nel documento per i quali l’attributo class valga value. È consigliato utilizzarlo nella forma generica .value che lo rende indipendente da uno specifico elemento.

    Esempio: la regola .red { color: red; } imposta a rosso il colore del testo contenuto in tutti gli elementi (qualunque essi siano) che abbiano l’attributo class="red".

L'importanza di questi due selettori è dovuta principalmente al fatto che il loro impiego permette di definire agevolmente stili per elementi (X)HTML generici (come DIV e SPAN), indispensabili se si vuole produrre documenti basati su layout CSS, che siano privi di specifici elementi strutturali e presentazionali.

Trattamento tipografico

Uno degli intenti dichiarati del linguaggio CSS, è stato, fin da subito, quello di fornire degli strumenti che garantissero, almeno in parte, una resa tipografica delle pagine web che si avvicinasse, in potenza e flessibilità, a quella di un normale word-processor. Per questo motivo, nei fogli di stile, possono essere incluse un gran numero di proprietà (alcune delle quali, tuttavia, non sempre supportate dai browser) che permettono di definire dettagliatamente i diversi aspetti legati alla gestione dei testi contenuti nel documento (X)HTML.

Tra le più importanti, certamente, vi sono proprietà che interessano la tipologia di carattere utilizzato (font-family), la sua dimensione (font-size), il suo stile ed il suo spessore (font-style e font-weight). Proprietà che riguardano l' allineamento e l' interlinea del testo (text-align e line-height), la sua indentazione e decorazione (text-indent e text-decoration), nonché la spaziatura tra lettere e parole (letter-spacing e word-spacing).

Vi sono, infine, proprietà che permettono di manipolare alcuni aspetti di liste e tabelle: nel primo caso potendo agire sul marcatore degli elementi (list-style), e nel secondo, sull’aspetto di bordi e celle (border-collapse, border-spacing, empty-cells).

Il modello visuale

I fogli di stile, come già anticipato, possono essere utilizzati per scopi che vanno ben oltre la semplice gestione delle caratteristiche tipografiche del testo. Essi permettono infatti di stabilire con precisione l’impaginazione grafica degli elementi di un documento, attraverso proprietà che si basano su un particolare modello di astrazione: il box-model.

Figura 2.2: La figura mostra come viene interpretato, secondo il box-model, un elemento contenente del testo, e per il quale siano state impostate le proprietà border, padding e margin.

Ogni elemento del documento viene infatti visto come una sorta di contenitore (Figura 2.2), per il quale possono essere manipolati:

  • Contenuto: l’area che racchiude il contenuto vero e proprio dell’elemento (testo, immagini, etc.). Le sue dimensioni, larghezza ed altezza, possono essere modificate rispettivamente con le proprietà width ed height, in modo indipendente dalle impostazioni di bordi, padding, e margini8 .

  • Padding: lo spazio di dimensioni variabili che può essere creato tra il contenuto ed il bordo dell'elemento. Può essere specificato in modo uniforme attraverso la proprietà padding, oppure singolarmente, per ciascun lato del contenitore.

  • Bordo: la linea che circonda la zona del padding e l'area del contenuto. Dimensioni, stile e colore vengono dichiarati, normalmente, nella forma abbreviata { border: width style color }. È possibile specificarne l'aspetto anche per ogni singolo lato del contenitore.

  • Margine: lo spazio di dimensioni variabili che separa l’elemento da quelli adiacenti. Può essere specificato in modo uniforme attraverso la proprietà margin, oppure singolarmente, per ciascun lato del contenitore.

Esempio: L’effetto di questa astrazione, lo si può notare già quando un documento (X)HTML viene interpretato dal browser: di fatto, il suo foglio di stile predefinito, va ad impostare automaticamente alcune delle proprietà legate al box-model degli elementi mostrati a video (come accade per H1, P, DIV etc.).

La collocazione di questi contenitori, salvo modifiche, segue il normale flusso del documento: da sinistra a destra, e dall’alto in basso (proprio come le parole di un testo), tenendo conto, inoltre, del tipo di elementi contenuti9.

Una prima alterazione del flusso, infatti, può essere apportata modificando la proprietà display di un contenitore, che ne cambia, difatti, la tipologia (inline, block, list-item, etc.).

Esempio: con la regola em { display: block; } l'elemento em viene visualizzato come fosse un elemento di tipo blocco, mentre con la regola .hide { display: none; } il contenitore di classe "hide" non verrà proprio creato.

Attraverso i fogli di stile si ha, inoltre, la possibilità di agire direttamente sul flusso del documento, andando a modificare, di conseguenza, la posizione degli elementi. Ne risulta infatti un posizionamento che può essere:

  • Statico: si ottiene assegnando il valore static alla proprietà position, oppure tralasciando la dichiarazione in quanto già valore di default. Il contenitore segue il normale flusso del documento.

  • Relativo: si ottiene assegnando il valore relative alla proprietà position. Il contenitore viene deviato dal normale flusso, nella misura dichiarata con le proprietà top, bottom, right e left. Gli altri elementi reagiscono come se il contenitore si trovasse ancora nella posizione originaria.

  • Assoluto: si ottiene assegnando il valore absolute alla proprietà position. Il contenitore viene spostato completamente dal normale flusso, e posizionato attraverso le proprietà top, bottom, right e left, riferite all’elemento che lo contiene (il genitore). Gli altri elementi si comportano come se fosse stato rimosso dal flusso.

  • Fisso: si ottiene assegnando il valore fixed alla proprietà position, ed ha lo stesso effetto del posizionamento assoluto. La differenza sta nel fatto che lo spostamento è riferito al punto zero del viewport (e non all’elemento che lo contiene), ossia all’area di visualizzazione della pagina10.

  • Flottante: si ottiene assegnando i valori left o right alla proprietà float. Il contenitore viene tolto dal normale flusso, e posto all’estremità sinistra o destra dell’elemento che lo contiene, lasciandosi però circondare dagli altri elementi. Se si vuole evitare questo effetto, occorre applicare la proprietà clear (con valori left, right o both) all'elemento che nel flusso segue quello flottante.

Ad ogni modo, eventuali sovrapposizioni dei contenitori possono essere gestite attraverso la proprietà z-index, che può assumere valori interi: il valore più alto determina il contenitore più "vicino" all’utente che guarda la pagina, in una visione a livelli del documento.

Il modello visuale appena introdotto, rappresenta dunque un potente strumento di impaginazione di un documento, ma occorre tenere conto, come al solito, di possibili implicazioni a livello di rendering, tra browser differenti.

Ereditarietà e Cascading

Il funzionamento dei fogli di stile è disciplinato da un complesso ed efficace sistema di "propagazione" delle regole, che si basa principalmente sui concetti di ereditarietà e di cascading.

Ricordando il modello strutturale ad albero di un documento (Figura 2.1), è presto spiegato il concetto di ereditarietà dei fogli di stile, per effetto del quale, in sostanza, le caratteristiche presentazionali applicate ad un elemento, ricadono anche su tutti i suoi discendenti, a meno che, per qualcuno di essi, non venga esplicitamente ridefinito lo stile.

Esempio: facendo riferimento all’albero mostrato in Figura 2.1, se viene definito un certo stile di formattazione per l’elemento body, questo verrà applicato automaticamente a tutti gli elementi in esso contenuti, quindi anche ad h1 a p e a span. Se invece per h1 fosse stato definito qualche altro stile, l’ereditarietà verrebbe interrotta, almeno per quel che riguarda le proprietà ridefinite per h1.

Va precisato, che esistono alcune eccezioni al meccanismo di ereditarietà, legate principalmente alla definizione di proprietà di formattazione del box model (bordi, sfondi, margini, padding, etc.) che, comprensibilmente, non avrebbe molto senso ereditare.

Il concetto di cascading stabilisce invece precisi meccanismi di priorità che regolano la concatenazione di diverse regole o, più in generale, di diversi fogli di stile, in un unico risultato. In particolare, eventuali conflitti tra le diverse definizioni, vengono risolti a favore della regola considerata più importante, stabilita in base a:

  • Peso: viene determinato, in generale, dall’origine del foglio di stile che contiene la regola. Questo può essere, in ordine di importanza, dell'autore, dell'utente o predefinito del browser.

  • Specificità: rappresenta il peso di una regola all’interno di un foglio di stile, e stabilisce priorità tra i selettori, attribuendo maggiore rilevanza agli identificatori, poi alle classi e pseudo-classi, ed infine agli elementi.

In pratica, un browser che interpreta un foglio CSS, dopo aver scartato tutti gli stili riferiti a media alternativi, andrà quindi a calcolarne il peso (controllando la sua origine), e poi la specificità delle diverse regole che lo compongono. Se non vi sono conflitti, o se peso, origine e specificità coincidono, viene infine applicato un criterio di vicinanza, che attribuisce maggiore rilevanza a quelle regole che più sono vicine all’elemento al quale si riferiscono: ne consegue quindi che gli stili in linea prevalgono su quelli incorporati, e questi su quelli collegati o importati 12.

Il cascading, quindi, costituisce indubbiamente il punto di forza dei CSS, e può essere visto, in definitiva, come un preciso algoritmo che permette di coordinare complesse concatenazioni tra stili, con tutti i vantaggi che ne conseguono.




1 Famosa quella denominata BrowseHappy (http://browsehappy.com) che invita appunto ad utilizzare browser alternativi quali Firefox, Mozilla, Opera e Safari, che meglio supportano CSS.

2 Internet Explorer si ostina ancora oggi a perpetrare fastidiosi errori concettuali di interpretazione dei layout CSS, che promette tuttavia di eliminare con l’uscita doverosa, e da tempo attesa, di una nuova versione 7 del browser di casa Microsoft (sidponibile in versione beta).

3 In particolare le temute versioni che precedono Netscape6 ed Explorer5. Informazioni dettagliate sono disponibili nel sito http://www.w3schools.com/browsers/, dove è possibile avere un quadro sempre aggiornato sui sistemi, ed i browser nello specifico, che gli utenti utilizzano per navigare nel web.

4 Questo, tra l'altro, rientra in un problema più generale di accessibilità dei siti web, che può essere garantita esclusivamente basandosi su un tipo di progettazione che preveda, appunto, una netta divisione tra contenuti e forma.

5 All'indirizzo http://www.w3.org/Style/CSS/ è possibile reperire sia le specifiche ufficiali del linguaggio suddivise per CSS Level, che altre risorse utili all’apprendimento e alla produzione di fogli di stile.

6 Con la notazione (X)HTML si vuole intendere sia documenti HTML che XHTML. In questo caso, il discorso può essere esteso a generici documenti XML.

7 A tale scopo può essere utile consultare la tabella di compatibilità proposta da Eric A. Mayer, reperibile sul sito http://www.ddj.com/webreview/style/css2/charts/selectors.shtml

8 Questo secondo le specifiche del W3C. Purtroppo Explorer per Windows non interpreta correttamente il box-model, considerando width ed height come dimensioni totali del contenitore (comprensivo quindi di bordo, padding e margine). Gli effetti di questa personale (ed arrogante) interpretazione si possono facilmente immaginare.

9 Mentre, ad esempio, gli elementi di tipo inline (SPAN, A, EM, etc.) non influiscono in alcun modo, gli elementi di tipo blocco (DIV, P, H1, etc.) vanno a capo, e mandano a capo ciò che li segue, alterando il flusso del documento.

10 Questo tipo di posizionamento ha come effetto principale, quello di lasciare un elemento fisso nello schermo, nonostante vi sia, ad esempio, uno scrolling di pagina. Potrebbe essere usato, quindi, per emulare l'effetto degli ormai obsoleti frame, con il grosso vantaggio però di gestire un unico documento. Scandalosamente, Explorer 5.x (ancora largamente diffuso) non ne supporta l'utilizzo, mentre Explorer 6 lo supporta soltanto se il documento è un XHTML (ma non se è HTML).

11 Sempre che le dichiarazioni siano state fatte seguendo l’ordine logico più corretto, che è appunto quello menzionato.

-- AlessandroCalvaresi - 05 Nov 2005
to top


You are here: Tesi > ArgomentiDiTesi > OsservatorioDecoratingTheWeb > LinguaggioCss

to top

Copyright © 1999-2019 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding Fabio's Wiki? Send feedback