Sommario
I fogli di stile rappresentano una svolta di rilievo per i progettisti di pagine web, poiché espandono le possibilità di migliorare l'aspetto delle loro pagine. Negli ambienti scientifici in cui il Web fu concepito, le persone erano più interessate ai contenuti dei loro documenti che alla loro presentazione. Ma non appena gente della più varia estrazione sociale scoprì il Web, le limitazioni dell'HTML divennero una sorgente di continua frustrazione e gli autori furono costretti ad eludere in ogni modo le limitazioni stilistiche dell'HTML. Benché le intenzioni fossero buone -- migliorare la presentazione delle pagine web -- le tecniche per riuscirci hanno avuto effetti collaterali infelici. Queste tecniche funzionano per alcune persone, per un certo tempo, ma non per tutte le persone né a tempo indeterminato. Esse includono:
Queste tecniche aumentano considerevolmente la complessità delle pagine web, offrono una limitata flessibilità, soffrono di problemi di interoperabilità e creano difficoltà alle persone con disabilità.
I fogli di stile risolvono questi problemi nel mentre soppiantano la limitata gamma di meccanismi di presentazione dell'HTML. Con i fogli di stile è facile specificare la quantità di spazio bianco tra righe di testo, la misura dei rientri di riga, i colori usati per il testo e per lo sfondo, la grandezza e lo stile dei caratteri, ed una moltitudine di altri dettagli.
Per esempio, il seguente breve foglio di stile (archiviato nel file "speciale.css") imposta a verde il colore del testo di un paragrafo e lo circonda con un bordo rosso continuo:
P.speciale {
color : green;
border: solid red;
}
Gli autori possono collegare questo foglio di stile al loro documento sorgente HTML tramite l'elemento LINK:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<LINK href="speciale.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<P class="speciale">Questo paragrafo dovrebbe avere uno speciale testo verde.
</BODY>
</HTML>
HTML 4 fornisce il supporto per le seguenti caratteristiche dei fogli di stile:
All'opposto, i fogli di stile si applicano a specifici media o gruppi di media. Un foglio di stile orientato all'uso per i monitor può essere applicabile alla stampa, ma risulta di scarsa utilità per i browser basati sulla sintesi vocale. Queste specifiche vi consentono di definire le categorie generali di media a cui un dato stile risulta applicabile. Ciò permette ai programmi utente di evitare lo scaricamento di fogli di stile inappropriati. I linguaggi per fogli di stile possono includere caratteristiche che descrivono le dipendenze dai media all'interno di un medesimo foglio di stile.
La presente proposta risolve questi problemi, permettendo agli autori di includere istruzioni per la riproduzione all'interno di ciascun elemento HTML. Le informazioni per la riproduzione sono quindi sempre disponibili, a partire dal momento in cui il programma utente decide di riprodurre ciascun elemento.
In molti casi gli autori trarranno vantaggio dalla presenza di un solo foglio di stile comune ad un gruppo di documenti. In questo caso, distribuire le regole di stile per tutto il documento condurrà in realtà ad un peggioramento delle prestazioni rispetto all'uso di un foglio di stile collegato, dal momento che per la maggior parte dei documenti il foglio di stile sarà già presente all'interno della cache locale. La pubblica disponibilità di fogli di stile ben fatti incoraggerà questo pratica.
Nota. Il foglio di stile esemplificativo predefinito per l'HTML 4, che è incluso in [CSS2], esprime delle informazioni di stile predefinite generalmente accettate per ciascun elemento. Autori ed implementatori potrebbero parimenti trovare questa come una utile risorsa.
I documenti HTML possono contenere direttamente al loro interno regole di fogli di stile oppure possono importare dei fogli di stile.
Con l'HTML può essere usato un qualsiasi linguaggio per fogli di stile. Un linguaggio per fogli di stile semplice può bastare per i bisogni della maggior parte degli utenti, ma altri linguaggi possono essere più idonei nel caso di necessità altamente specializzate. Queste specifiche usano per i propri esempi il linguaggio di stile "Cascading Style Sheets" ([CSS1]), abbreviato in CSS.
La sintassi dei dati di stile dipende dal linguaggio per fogli di stile.
Gli autori devono specificare il linguaggio per fogli di stile delle informazioni di stile associate con un documento HTML.
Gli autori dovrebbero usare l'elemento META per impostare il linguaggio per fogli di stile predefinito di un documento. Per esempio, per impostare CSS come linguaggio predefinito, gli autori dovrebbero inserire la seguente dichiarazione nell'HEAD dei loro documenti:
<META http-equiv="Content-Style-Type" content="text/css">
Il linguaggio per fogli di stile predefinito può anche essere impostato per mezzo di intestazioni HTTP. La precedente dichiarazione META è equivalente all'intestazione HTTP:
Content-Style-Type: text/css
I programmi utente dovrebbero determinare il linguaggio per fogli di stile predefinito di un documento in conformità con i seguenti passi (dalla priorità più alta alla più bassa):
I documenti che includono elementi che impostano l'attributo style ma non definiscono un linguaggio predefinito per fogli di stile sono errati. Gli strumenti autoriali dovrebbero generare informazioni sul linguaggio predefinito per fogli di stile (tipicamente una dichiarazione META), così che i programmi utente non siano costretti a basarsi su un "text/css" assunto per difetto.
Definizioni di attributo
La sintassi del valore dell'attributo style è determinata dal linguaggio predefinito dei fogli di stile. Ad esempio, per lo stile in riga [[CSS2]], si usi la sintassi del blocco di dichiarazione descritta nella sezione 4.1.8 (senza le parentesi graffe come delimitatori).
Questo esempio di CSS imposta le informazioni sul colore e la grandezza dei caratteri per il testo di uno specifico paragrafo.
<P style="font-size: 12pt; color: fuchsia">Non sono meravigliosi i fogli di stile?
In CSS, le dichiarazioni di proprietà hanno la forma "nome : valore" e sono separate tramite un punto e virgola.
Per specificare le informazioni di stile per più di un elemento, gli autori dovrebbero servirsi dell'elemento STYLE. Per una flessibilità ottimale, gli autori dovrebbero definire gli stili in fogli di stile esterni.
<!ELEMENT STYLE - - %StyleSheet -- informazioni di stile --> <!ATTLIST STYLE %i18n; -- lang, dir, per l'uso con title -- type %ContentType; #REQUIRED -- tipo di contenuto del linguaggio di stile -- media %MediaDesc; #IMPLIED -- progettato per l'uso con questi media -- title %Text; #IMPLIED -- titolo di avvertimento -- >
Marcatore iniziale obbligatorio, Marcatore finale: obbligatorio
Definizioni di attributo
Attributi definiti atrove
L'elemento STYLE consente agli autori di inserire regole per fogli di stile nell'intestazione del documento. L'HTML ammette un qualsiasi numero di elementi STYLE nella sezione HEAD di un documento.
I programmi utente che non supportano i fogli di stile, o che non supportano lo specifico linguaggio per fogli di stile usato da un elemento STYLE, devono nascondere i contenuti dell'elemento STYLE. È un errore riprodurre il contenuto come parte del testo di un documento. Alcuni linguaggi per fogli di stile supportano una sintassi per nascondere il contenuto ai programmi utente non conformi.
La sintassi dei dati di stile dipende dal linguaggio per fogli di stile.
Alcune implementazioni dei fogli di stile possono consentire una più ampia varietà di regole nell'elemento STYLE che nell'attributo style. Ad esempio, con i CSS, è possibile dichiarare regole all'interno dell'elemento STYLE per:
Le regole per la precedenza e l'eredità degli stili dipendono dal linguaggio per fogli di stile.
La seguente dichiarazione di STYLE CSS aggiunge un bordo intorno ad ogni elemento H1 nel documento e lo centra nella pagina.
<HEAD>
<STYLE type="text/css">
H1 {border-width: 1; border: solid; text-align: center}
</STYLE>
</HEAD>
Per specificare che queste informazioni di stile dovrebbero essere applicate soltanto agli elementi H1 di una specifica classe, le modifichiamo come segue:
<HEAD>
<STYLE type="text/css">
H1.miaclasse {border-width: 1; border: solid; text-align: center}
</STYLE>
</HEAD>
<BODY>
<H1 class="miaclasse"> Questo H1 è influenzato dal nostro stile </H1>
<H1> Quest'altro non è influenzato dal nostro stile </H1>
</BODY>
Ed infine, per limitare la sfera d'influenza delle informazioni di stile ad una singola occorrenza di H1, impostiamo l'attributo id:
<HEAD>
<STYLE type="text/css">
#mioid {border-width: 1; border: solid; text-align: center}
</STYLE>
</HEAD>
<BODY>
<H1 class="miaclasse"> Questo H1 non è influenzato </H1>
<H1 id="mioid"> Questo H1 è influenzato dallo stile </H1>
<H1> Questo H1 non è influenzato </H1>
</BODY>
Benché sia possibile impostare informazioni di stile per la quasi totalità degli elementi HTML, due elementi, DIV e SPAN, risultano particolarmente utili per il fatto che non impongono alcuna semantica di presentazione (a livello di blocco contro in riga a parte). Quando combinati con i fogli di stile, questi elementi consentono agli utenti di estendere indefinitamente l'HTML, in particolare se adoperati con gli attributi class e id.
Nell'esempio successivo, adoperiamo l'elemento SPAN per impostare come maiuscoletto lo stile dei caratteri di alcune delle parole iniziali di un paragrafo.
<HEAD>
<STYLE type="text/css">
SPAN.sc-ex { font-variant: small-caps }
</STYLE>
</HEAD>
<BODY>
<P><SPAN class="sc-ex">Alcune delle parole</SPAN> iniziali di questo
paragrafo appaiono in maiuscoletto.
</BODY>
<HEAD>
<STYLE type="text/css">
DIV.Compendio { text-align: justify }
</STYLE>
</HEAD>
<BODY>
<DIV class="Compendio">
<P>La gamma di prodotti Capotribù è il nostro
articolo di punta per l'anno venturo. Questo
rendiconto spiega come posizionare Capotribù rispetto
ai prodotti antagonisti.
<P>Capotribù rimpiazza la gamma Comandante, che rimarrà
sul listino prezzi fino ad ulteriore avviso.
</DIV>
</BODY>
L'HTML consente agli autori di progettare documenti che possono avvantaggiarsi delle caratteristiche del mezzo da cui il documento deve essere riprodotto (ad es. monitor grafici, schermi televisivi, periferiche palmari, browser vocali, periferiche tattili basate sul sistema Braille, ecc.). Specificando l'attributo media, gli autori consentono ai programmi utente di caricare ed applicare selettivamente i fogli di stile. Si consulti per favore l'elenco dei descrittori di media riconosciuti.
Le successive dichiarazioni esemplificative si applicano ad elementi H1. Se proiettate durante una riunione d'affari, tutte le occorrenze saranno blu. Se stampate, tutte le occorrenze saranno centrate.
<HEAD>
<STYLE type="text/css" media="projection">
H1 { color: blue}
</STYLE>
<STYLE type="text/css" media="print">
H1 { text-align: center }
</STYLE>
Questo esempio aggiunge effetti sonori alle ancore, per l'uso nella sintesi vocale:
<STYLE type="text/css" media="aural">
A { cue-before: uri(trillo.aiff); cue-after: uri(campana.wav)}
</STYLE>
</HEAD>
Il controllo dei media è particolarmente interessante quando applicato a fogli di stile esterni, dal momento che i programmi utente possono risparmiare tempo recuperando dalla rete soltanto quei fogli di stile che sono appropriati per la periferica corrente. Ad esempio, i browser vocali possono evitare lo scaricamento di fogli di stile progettati per la riproduzione visuale. Per maggiori informazioni si veda la sezione sulle cascate dipendenti dal mezzo.
Gli autori possono separare i fogli di stile dai documenti HTML. Ciò offre numerosi benefici:
L'HTML consente agli autori di associare ad un documento un qualsiasi numero di fogli di stile esterni. Il linguaggio per fogli di stile definisce l'interazione tra molteplici fogli di stile esterni (ad esempio, le regole "a cascata" CSS).
Gli autori possono specificare un certo numero di fogli di stile che si escludono a vicenda, chiamati fogli di stile alternativi. Gli utenti possono selezionare i loro favoriti tra questi, in base alle proprie preferenze. Ad esempio, un autore può specificare un foglio di stile progettato per gli schermi piccoli ed un altro per gli utenti ipovedenti (ad es. con caratteri grandi). I programmi utente dovrebbero consentire agli utenti di scegliere tra i fogli di stile alternativi.
L'autore può specificare che uno dei fogli di stile alternativi è preferenziale. I programmi utente dovrebbero applicare il foglio di stile preferenziale dell'autore, a meno che l'utente abbia selezionato un'alternativa differente.
Gli autori possono raggruppare una serie di fogli di stile alternativi (inclusi i fogli di stile preferenziali dell'autore) sotto un singolo nome di stile. Quando un utente seleziona uno stile denominato, il programma utente deve applicare tutti i fogli di stile con quel nome. I programmi utente non devono applicare fogli di stile alternativi che abbiano un differente nome di stile. La sezione su come specificare fogli di stile esterni spiega come attribuire un nome ad un gruppo di fogli di stile.
Nell'applicare un qualsiasi foglio di stile i programmi utente devono rispettare i descrittori dei media.
I programmi utente dovrebbero anche consentire agli utenti di disabilitare completamente i fogli di stile dell'autore, nel qual caso il programma utente non deve applicare né fogli di stile preferenziali né alternativi.
Gli autori specificano fogli di stile esterni tramite i seguenti attributi dell'elemento LINK:
I programmi utente dovrebbero fornire agli utenti un sistema per esaminare un elenco di stili alternativi e scegliere da esso. Si raccomanda il valore dell'attributo title come nome di ciascuna scelta.
In questo esempio, specifichiamo dapprima un foglio di stile persistente, posto nel file miostile.css:
<LINK href="miostile.css" rel="stylesheet" type="text/css">
L'impostazione dell'attributo title ne fa il foglio di stile preferenziale dell'autore:
<LINK href="miostile.css" title="compatto" rel="stylesheet" type="text/css">
L'aggiunta della parola chiave "alternate" all'attributo rel lo rende un foglio di stile alternativo:
<LINK href="miostile.css" title="intermedio" rel="alternate stylesheet" type="text/css">
Per maggiori informazioni sui fogli di stile esterni, si consulti per favore la sezione su collegamenti e fogli di stile esterni.
Gli autori possono adoperare anche l'elemento META per impostare il foglio di stile preferenziale di un documento. Ad esempio, per impostare il foglio di stile preferenziale su "compatto" (si veda l'esempio precedente), gli autori possono includere la seguente riga nell'HEAD:
<META http-equiv="Default-Style" content="compatto">
Il foglio di stile preferenziale può essere anche specificato tramite intestazioni HTTP. La precedente dichiarazione META è equivalente all'intestazione HTTP:
Default-Style: "compatto"
Se due o più dichiarazioni META o intestazioni HTTP specificano il foglio di stile preferenziale, l'ultima ha la precedenza. A questo scopo si considerano le intestazioni HTTP come precedenti rispetto all'HEAD del documento.
Se due o più elementi LINK specificano un foglio di stile preferenziale, il primo ha la precedenza.
I fogli di stile preferenziali specificati tramite META o intestazioni HTTP hanno la precedenza su quelli specificati tramite l'elemento LINK.
Linguaggi per fogli di stile a cascata come CSS fanno sì che informazioni di stile provenienti da differenti fonti possano essere fuse insieme. Tuttavia, non tutti i linguaggi per fogli di stile supportano i collegamenti a cascata. Per definire una cascata, gli autori specificano una sequenza di elementi LINK e/o STYLE. Le informazioni di stile sono collegate a cascata nell'ordine in cui gli elementi compaiono nell'HEAD.
Nota. Queste specifiche non descrivono come fogli di stile scritti con differenti linguaggi di stile si colleghino a cascata. Gli autori dovrebbero evitare di mescolare differenti linguaggi per fogli di stile.
Nell'esempio seguente, specifichiamo due fogli di stile alternativi chiamati "compatto". Se l'utente seleziona lo stile "compatto", il programma utente deve applicare entrambi i fogli di stile esterni, come pure il foglio di stile persistente "comune.css". Se l'utente seleziona lo stile "grande stampa", saranno applicati soltanto il foglio di stile alternativo "grandestampa.css" ed il persistente "comune.css".
<LINK rel="alternate stylesheet" title="compatto" href="piccolo-base.css" type="text/css"> <LINK rel="alternate stylesheet" title="compatto" href="piccolo-extra.css" type="text/css"> <LINK rel="alternate stylesheet" title="grande stampa" href="bigprint.css" type="text/css"> <LINK rel="stylesheet" href="comune.css" type="text/css">
Ecco un esempio di cascata che coinvolge entrambi gli elementi LINK e STYLE.
<LINK rel="stylesheet" href="aziendale.css" type="text/css">
<LINK rel="stylesheet" href="docutecnico.css" type="text/css">
<STYLE type="text/css">
p.speciale { color: rgb(230, 100, 180) }
</STYLE>
Una cascata può includere fogli di stile applicabili a media differenti. Sia LINK sia STYLE possono essere usati con l'attributo media. Il programma utente è allora responsabile dell'eliminazione filtrata di quei fogli di stile che non si applicano al mezzo corrente.
Nell'esempio successivo, definiamo una cascata nella quale il foglio di stile "aziendale" è fornito in numerose versioni: una adatta per la stampa, una per l'uso a schermo ed una per i browser vocali (utile, diciamo, per leggere la posta elettronica in auto). Il foglio di stile "docutecnico" si applica a qualsiasi mezzo. La regola di colore definita dall'elemento STYLE è usata per la stampa e lo schermo ma non per la riproduzione acustica.
<LINK rel="stylesheet" media="aural" href="aziendale-sonoro.css" type="text/css">
<LINK rel="stylesheet" media="screen" href="aziendale-schermo.css" type="text/css">
<LINK rel="stylesheet" media="print" href="aziendale-stampa.css" type="text/css">
<LINK rel="stylesheet" href="docutecnico.css" type="text/css">
<STYLE media="screen, print" type="text/css">
p.speciale { color: rgb(230, 100, 180) }
</STYLE>
Quando il programma utente deve riprodurre un documento, ha bisogno di reperire i valori per le proprietà di stile, ad es. per la famiglia di caratteri, lo stile e la grandezza del carattere, l'interlinea, il colore del testo e così via. L'esatto meccanismo dipende dal linguaggio per fogli di stile, ma la seguente descrizione è generalmente applicabile:
Il meccanismo del collegamento a cascata è usato quando più regole di stile si applicano tutte direttamente ad un elemento. Il meccanismo consente al programma utente di ordinare le regole in base alle specificità, allo scopo di determinare quale regola applicare. Se non può essere trovata alcuna regola, il passo successivo dipende da se la proprietà di stile possa essere ereditata oppure no. Non tutte le proprietà sono ereditabili. Per queste proprietà il linguaggio per fogli di stile fornisce valori predefiniti, da adoperare quando non sono presenti regole esplicite in riferimento ad un particolare elemento.
Se la proprietà è ereditabile, il programma utente esamina l'elemento racchiudente più prossimo, per vedere se una regola si applica a quello. Tale processo continua finché non viene trovata una regola applicabile. Questo meccanismo consente ai fogli di stile di essere specificati in modo compatto. Ad esempio, gli autori possono specificare la famiglia di caratteri per tutti gli elementi all'interno di BODY per mezzo di una semplice regola che si applica all'elemento BODY.
Alcuni linguaggi per fogli di stile supportano una sintassi intesa a consentire agli autori di nascondere il contenuto degli elementi STYLE ai programmi utente non conformi.
Questo esempio relativo ai CSS illustra come racchiudere in un commento il contenuto dell'elemento STYLE, in modo da garantire che i programmi utente più vecchi, non conformi, non lo riproducano come testo.
<STYLE type="text/css">
<!--
H1 { color: red }
P { color: blue}
-->
</STYLE>
Questa sezione si applica soltanto ai programmi utente conformi alle versioni di HTTP che definiscono un campo d'intestazione Link. Si noti che HTTP 1.1, come definito da [RFC2616], non include un campo d'intestazione Link (si faccia riferimento alla sezione 19.6.3).
Gli amministratori di server web possono trovare conveniente configurare un server in modo che un foglio di stile possa essere applicato ad un gruppo di pagine. L'intestazione HTTP Link produce le medesime conseguenze dell'elemento LINK con gli stessi attributi e valori. Molteplici intestazioni Link corrispondono a molteplici elementi LINK occorrenti nel medesimo ordine. Per esempio,
Link: <http://www.acme.com/aziendale.css>; REL=stylesheet
corrisponde a:
<LINK rel="stylesheet" href="http://www.acme.com/aziendale.css">
È possibile specificare più stili alternativi usando molteplici intestazioni Link, ed usando poi l'attributo rel per determinare lo stile predefinito.
Nell'esempio successivo, "compatto" è applicato in modo predefinito dal momento che è omessa la parola chiave "alternate" per l'attributo rel.
Link: <compatto.css>; rel="stylesheet"; title="compatto" Link: <grandestampa.css>; rel="alternate stylesheet"; title="grande stampa"
Ciò dovrebbe funzionare anche quando dei documenti HTML sono inviati tramite posta elettronica. Alcuni programmi di posta possono alterare la successione delle intestazioni [RFC822]. Per proteggersi contro ciò che può influenzare l'ordine dei collegamenti a cascata per i fogli di stile specificato dalle intestazioni Link, gli autori possono servirsi della concatenazione delle intestazioni, per fondere più occorrenze del medesimo campo d'intestazione. I punti interrogativi sono richiesti soltanto quando i valori di attributo includono spazi bianchi. Si usino le entità SGML per referenziare caratteri che altrimenti non sono permessi all'interno di intestazioni HTTP o di posta elettronica, o che sono passibili di alterazioni nel passaggio attraverso nodi di smistamento della Rete.
Gli elementi LINK e META sottintesi da intestazioni HTTP sono definiti come occorrenti prima di qualsiasi esplicito elemento LINK e META nell'HEAD del documento.