Queste note di studio si basano sulla Nota W3C del 6 novembre 2000. La traduzione è mia. Per suggerimenti, commenti o altro scrivete a gabriele.romanato@gmail.com.
Questa è la traduzione in italiano del documento W3C che trovate su http://www.w3.org/TR/WCAG10-CSS-TECHS/. L'unica versione normativa è quella inglese. Tutti i diritti riservati al W3C. Gli errori nel presente documento sono da imputarsi al traduttore e non al W3C.
Questo documento si trova su Diodati.org.
Punti di controllo di questa sezione: 14.3 Creare una presentazione di stile che sia coerente nelle varie pagine. [Priorità 3] .
A proposito dell'usare un numero minimo di fogli di stile, sarebbe stato assai opportuno
citare la regola @import, che ci permette di evitare di dover riscrivere regole identiche semplicemente
importando tali regole in un altro foglio di stile.
Leggiamo infatti nelle specifiche CSS2 che:
La regola '@import' permette agli utenti di importare regole di stile da altri fogli di stile. Ogni regola @import deve precedere tutte gli insiemi di regole in un foglio di stile. La parola chiave '@import' deve essere seguita dall'URI del foglio di stile da includere. È permessa anche una stringa; verrà interpretata come se avesse intorno url(...).
Le righe seguenti sono equivalenti nel significato ed illustrano entrambe le sintassi di '@import' (una con "url()" ed una con una semplice stringa):
@import "mystyle.css"; @import url("mystyle.css");Affinchè i programmi utente possano evitare di reperire risorse da tipi di media non supportati, gli autori possono specificare regole @import dipendenti dai media. Queste importazioni condizionali specificano i tipi di media, separati da virgola, dopo l'URI.
Le seguenti regole hanno lo stesso effetto del foglio di stile racchiuso in una regola @media per lo stesso media, ma in questo caso evitano al programma utente un download inutile.
@import url("fineprint.css") print; @import url("bluish.css") projection, tv;In assenza di tipi di media, l'importazione è incondizionale. Specificare 'all' per il medium ha lo stesso effetto.
(CSS2)
Per quanto riguarda i fogli di stile incorporati (ossia quelli contenuti all'interno dell'elemento
style), a volte non è possibile evitarne l'inserimento a causa delle dimensioni del sito
e dei tempi di realizzazione. È infatti molto più semplice creare regole di stile ad hoc per una pagina
piuttosto che creare ogni volta un nuovo foglio di stile, posizionarlo all'interno della cartella stabilita e collegarlo
alla pagina. Questo suggerimento è a mio avviso da leggersi come "usateli con moderazione".
Gli stili inline sono da evitare perchè rendono confusa la pagina, aumentano la complessità della cascata ed in fase di debugging possono creare dei conflitti inaspettati.
Sull'uso dell'attributo class leggiamo nelle specifiche CSS2:
Nota. I CSS danno così tanto potere all'attributo "class", che gli autori potrebbero strutturare un proprio "linguaggio del documento" basato su elementi con quasi nessuna presentazione associata (come DIV e SPAN nell'HTML) e assegnargli informazioni di stile attraverso l'attributo "class". Gli autori dovrebbero evitare questa pratica, poichè gli elementi strutturali del linguaggio del documento hanno spesso significati riconosciuti ed accettati, cosa che le classi definite dagli autori possono non avere.
(CSS2)
È opportuno tenere presente questa nota quando si creano delle classi.
Punto di controllo di questa sezione: 11.2 Evitare caratteristiche deprecate delle tecnologie W3C. [Priorità 2] .
Per assicurare che gli utenti possano controllare gli stili, i CSS2 hanno cambiato la semantica dell'operatore "!important" definito nei CSS1. Nei CSS1, gli autori avevano sempre l'ultima parola sugli stili. Nei CSS2, se un foglio di stile utente contiene "!important", esso ha la precedenza su ogni altra regola applicabile nel foglio di stile dell'autore. Si tratta di una caratteristica importante per gli utenti che vogliono o devono evitare alcune combinazioni o contrasti di colore, o utenti che hanno bisogno di font grandi ecc. Per esempio, la seguente regola specifica una dimensione grande del font per un paragrafo di testo, regola che sovrasciverà un regola dell'autore di ugual peso:
P { font-size: 24pt ! important }
Il valore CSS2 'inherit' - disponibile per ogni proprietà - rende compatte le regole "!important" che governano quasi tutti i documenti. Per esempio, le seguenti regole di stile forzano tutti gli sfondi sul bianco ed i colori di primo piano sul nero:
/* Sets the text color to black
and the background color to
white for the document body. */
BODY {
color: black ! important ;
background: white ! important
}
/* Causes the values of 'color' and 'background'
to be inherited by all other elements,
strengthened by !important. Note that this
may be overridden by other, more specific,
user styles. */
* {
color: inherit ! important ;
background: inherit ! important
}
I CSS2 comprendono anche queste caratteristiche per il controllo da parte dell'utente:
Per esempio, per disegnare una linea spessa nera attorno ad un elemento quando questo ha il focus, e una linea spessa rossa quando è attivo, si possono usare le seguenti regole:
:focus { outline: thick solid black }
:active { outline: thick solid red }
In realtà queste caratteristiche, su cui si faceva molto affidamento ai tempi della stesura della Nota W3C, si sono rivelate fallimentari a lungo andare per la scarsa implementazione avuta. Infatti:
!important. Nondimeno, per stessa ammissione di
Håkon Wium Lie, creatore
dei CSS e CTO di Opera, ben pochi utenti sanno
scrivere un foglio di stile con le proprie preferenze. Credo che in
questo caso sarebbe opportuno fornire all'utente fogli di stile
alternativi, meglio se con un procedimento di scripting che eluda i
limiti dei browser che non supportano i fogli di stile alternativi.
'outline' non è supportata da Internet Explorer per Windows, che attualmente
detiene la maggioranza del mercato. Sarebbe opportuno trovare una soluzione tramite scripting, discreta e non invasiva.Punti di controllo di questa sezione: 3.4 Si usino unità relative in luogo di quelle assolute nei valori degli attributi del linguaggio di marcatura ed in quelli delle proprietà dei fogli di stile. [Priorità 2] .
Tecniche:
Si usi em per le dimensioni dei font, come in:
H1 { font-size: 2em }
piuttosto che
H1 { font-size: 12pt }
Si usino unità di misura relative e percentuali.
BODY {
margin-left: 15%;
margin-right: 10%
}
Si usino unità di misura assolute sono quando le caratteristiche del media di output sono conosciute.
.businesscard { font-size: 8pt }
Qui occorre fare una precisazione a proposito delle unità di misura relative. Attualmente si hanno dei risultati quasi del tutto omogenei tra i vari browser solo per quanto riguarda il dimensionamento relativo dei font. Si raccomanda di non usare unità assolute per i font anche perchè Internet Explorer per Windows non ne permette il ridimensionamento o l'ingrandimento. Risultati quasi omogenei si ottengono anche con le parole chiave assolute ('xx-small', 'x-small', 'small', 'medium', 'large', 'x-large', 'xx-large'), anche se versioni obsolete di alcuni browser possono presentare dei problemi dovuti ad un fattore di scalamento differente (vedi Internet Explorer 5 per Windows).
A tal proposito, presupponendo che 'medium' equivalga a 16px, si ottengono le seguenti approssimazioni:
| Parola chiave | Fattore di scalamento: 1.5 | Fattore di scalamento: 1.2 |
|---|---|---|
| xx-small | 5px | 9px |
| x-small | 7px | 11px |
| small | 11px | 13px |
| medium | 16px | 16px |
| large | 24px | 19px |
| x-large | 36px | 23px |
| xx-large | 54px | 28px |
È da notare come Internet Explorer per Windows permetta il ridimensionamento dei font quando questi sono espressi con parole chiave.
Per quanto riguarda le unità di misura relative applicate al layout, il discorso si complica ulteriormente. In linea
di massima, i browser onorano le dichiarazioni con valori positivi, anche se queste a volte possono causare problemi (tipico
il caso di Internet Explorer 6 - e inferiori - per Windows ed i menu costruiti col 'padding' in percentuale). Per quanto riguarda i
valori negativi come:
h1 {text-indent: -2em;}
span.note {margin-left: -15%;}
possono esservi dei problemi nel calcolo dell'esatta posizione dell'elemento. In generale, i browser devono fare una "congettura" sulla reale posizione dell'elemento, specie se a questi valori si assomma il posizionamento assoluto, relativo o flottante. I problemi maggiori si hanno in Internet Explorer 6 (e inferiori) per Windows, che spesso fa sparire l'elemento dalla finestra di visualizzazione o lo posiziona in modo abnorme.
Infine, c'è da considerare il fatto che gli autori alle prime armi in genere non hanno chiaro il meccanismo delle unità di misura relative, e questo li spinge ad usare dimensioni assolute per i layout. Questo comportamento, a mio avviso, non è da condannare. Semplicemente, si usi l'accortezza di far rientrare il layout nella canonica dimensione di 800x600 e ci si assicuri che anche con forti ingrandimenti del testo tale layout non crolli a livello strutturale.
Punti di controllo di questa sezione:
Tecniche:
I CSS2 comprendono diversi meccanismi che consentono di generare il contenuto con i fogli di stile:
Il contenuto generato può dare dei marcatori per aiutare gli utenti a navigare un documento e a non perdere l'orientamento quando non hanno accesso a suggerimenti visuali come barre di scorrimento orizzontali proporzionali, frame con tavole dei contenuti, ecc.
Per esempio, il seguente foglio di stile utente genererà le parole "End Example" dopo ogni esempio marcato con un valore di classe speciale nel documento:
DIV.example:after {
content: End Example
}
Gli utenti potrebbero anche numerare, ad esempio, i paragrafi per poter localizzare la loro posizione di lettura attuale in un documento:
P:before {
content: counter(paragraph) ". " ;
counter-increment: paragraph
}
Come detto in precedenza, poichè questa caratteristica CSS non viene supportata da Internet Explorer, ha nella realtà un uso assai limitato.
C'è di più: all'epoca della stesura delle specifiche HTML 4
si confidò talmente nelle potenzialità del contenuto generato che si decise di deprecare
l'attributo start delle liste ordinate (ol). Tale attributo permette di far partire la numerazione
da un determinato punto, per esempio 3. Si pensò di sostituirlo con:
ol {list-style: none; counter-reset: item;}
li:before {
counter-increment: item;
content: counter(item) ". ";
}
Usando questo codice in un documento HTML, posso far continuare la numerazione della lista anche se questa è stata
interrotta con la chiusura e poi la riapertura di un nuovo elemento ol. Tuttavia far affidamento sul contenuto generato in questo caso è sbagliato,
poichè:
start, con i CSS disabilitati la numerazione ripartirà da 1.In questo caso la fiducia eccessiva nell'implementazione non è stata ben riposta. A mio avviso, in casi come questo si dovrebbe fare affidamento più sulla struttura HTML che non su quella presentazionale (CSS).
Opera Voice supporta le seguenti proprietà:
cuecue-aftercue-beforepausepause-afterpause-beforePunti di controllo di questa sezione: 11.2 Evitare le caratteristiche deprecate delle tecnologie W3C. [Priorità 2] .
Tecniche:
in luogo dei seguenti elementi e attributi deprecati dei font in HTML:
Specificare sempre un font generico di ripiego:
BODY { font-family: "Gill Sans", sans-serif }
<STYLE type="text/css">
P.important {font-weight: bold }
P.less-important {font-weight: lighter;
font-size: smaller }
H2.subsection {font-family: Helvetica, sans-serif }
</STYLE>
Brevissime considerazioni:
'font-size-adjust' e 'font-stretch' sono state rimosse nella Revisione CSS2.1.larger e smaller portano a risultati diversi in alcuni
browser (per esempio Opera). Si usi invece una dichiarazione CSS di misura relativa (in em).Punti di controllo di questa sezione: 7.2 Finchè i programmi utente consentono agli utenti di controllare il lampeggiamento, si eviti di far lampeggiare il contenuto (ossia cambiare la presentazione ad una velocità regolare, come accendendo o spegnendo). [Priorità 2] .
Le seguenti proprietà CSS2 possono essere usate per dare uno stile al testo:
Alcune considerazioni:
'text-shadow' è stata rimossa nella Revisione CSS2.1.'text-decoration: blink' non è supportata da Internet Explorer.Punti di controllo di questa sezione: 3.3 Si usino i fogli di stile per controllare il layout e la presentazione. [Priorità 2] .
Chi sviluppa contenuti per il Web dovrebbe usare i fogli di stile per il testo invece che rappresentare il testo con immagini. Usare il testo invece di immagini vuol dire che l'informazione sarà disponibile ad un numero maggiore di utenti (con sintetizzatori vocali, display braille, display grafici ecc.). Usare i fogli di stile consente anche agli utenti di sovrascrivere gli stili dell'autore e cambiare le dimensioni dei font o i colori con maggiore facilità.
Se si reputa necessario usare un bitmap per creare un effetto testuale (font speciale, transformazione, ombre, ecc.), il bitmap deve essere accessibile (si vedano le sezioni sugli equivalenti testuali e pagine alternative).
In questo esempio l'immagine inserita mostra la scritta "Example" in grandi caratteri rossi e il suo contenuto è catturato dall'attributo "alt"
<P>This is an <IMG src="BigRedExample.gif" alt="example"> of what we mean. </P>
Questa tecnica entra in crisi quando il contenuto testuale è considerevole. In questo caso useremo una tecnica di sostituzione del testo con immagini tramite i CSS. Esempio:
<p> Lorem ipsum dolor sit amet et ibam forte via sacra sicut meus est mos. </p>
Vogliamo sostituire il testo con un immagine che mostri, poniamo, una scritta gotica antica, ossia con un font molto raro. Creiamo quindi la nostra immagine con un programma come Photoshop con il font scelto. A questo punto ritocchiamo la marcatura:
<p> <span class="hidden">Lorem ipsum dolor sit amet et ibam forte via sacra sicut meus est mos.</span> </p>
Aggiungiamo quindi il CSS:
p {
width: 500px;
height: 500px;
background-image: url("images/scritta-gotica.gif");
background-repeat: no-repeat;
background-position: 0 0;
}
.hidden {position: absolute; top: -1000em;}
La classe hidden può essere usata per nascondere anche altri elementi della pagina. Il beneficio di questa
tecnica è che il contenuto rimane accessibile per i lettori di schermo e i browser testuali. Se disabilitiamo i CSS,
vedremo il contenuto dell'elemento span all'interno del paragrafo, quindi perfettamente leggibile. Se avessimo
invece usato 'display: none' il contenuto sarebbe rimasto inaccessibile per i lettori di schermo, in quanto tale
dichiarazione viene interpretata come 'speak: none', ossia il testo non viene pronunciato. Inoltre con questa tecnica
non violiamo le politiche di alcuni motori di ricerca (come Google) che sconsigliano l'uso di
'display: none' per nascondere gli elementi (viene interpretato come un tentativo di dirottare i robot su un
determinato obiettivo).
Esistono anche altre tecniche di sostituzione del testo con immagini, ma questa è una delle più semplici ed efficaci.
Punti di controllo di questa sezione: 3.3 Si usino i fogli di stile per controllare il layout e la presentazione. [Priority 2] .
Le seguenti proprietà CSS2 possono essere usate per controllare la formattazione e il posizionamento del testo:
Nota: Credo che qui si intendesse la proprietà
'letter-spacing'.
Il seguente esempio mostra l'uso dei fogli di stile per creare l'effetto di un capolettera.
<HEAD>
<TITLE>Drop caps</TITLE>
<STYLE type="text/css">
.dropcap { font-size : 120%; font-family : Helvetica }
</STYLE>
</HEAD>
<BODY>
<P>
<SPAN class="dropcap">O</SPAN>nce upon a time...
</BODY>
Nota. Al momento della stesura di questo documento, lo pseudo-elemento CSS ':first-letter', che permette di far riferimento alla prima lettera di uno spezzone di testo, non è ampiamente supportato.
Alcune osservazioni seguendo l'ordine di esposizione:
'text-indent': alcuni problemi di resa con l'indentazione negativa. In questo caso è opportuno
compensare l'indentazione con una misura equivalente di padding sinistro o destro.'letter-spacing': questa proprietà può essere usata per controllare il testo giustificato,
per esempio 'letter-spacing: .1em', salvo restando che l'effetto finale è spesso determinato dalla
larghezza del contenitore del testo (una buona larghezza è intorno ai 35-40 em).'direction: rtl': questa dichiarazione causa a volte problemi in Internet Explorer. Verificare sempre
le condizioni di layout (spaziatura, margini, padding, larghezza, altezza, posizionamento, ecc.).':first-letter': nella realizzazione di capolettera flottati e in riga possono presentarsi delle diversità
di resa tra Internet Explorer 6 (Windows) e Firefox 2.0 da un lato ed Opera 8+ dall'altro. In genere si tratta delle dimensioni
del riquadro del capolettera e del calcolo dell'interlinea.Punti di controllo di questa sezione:
Tecniche:
Si usino i numeri e non i nomi per i colori:
H1 {color: #808000}
H1 {color: rgb(50%,50%,0%)}
H1 {color: red}
Si usino queste proprietà CSS per specificare i colori:
Ci si assicuri un buon contrasto tra colori di sfondo e di primo piano. Se si specifica un colore di primo piano, si specifichi sempre anche un colore di sfondo (e viceversa).
Nota 9.1 Bisognerebbe, a mio avviso, parlare anche di eccessivo contrasto. Per esempio il contrasto testo nero su sfondo bianco è ritenuto ottimale. In realtà se lo sfondo occupa la maggioranza dello spazio sulla pagina, ne conseguirà un effetto di accecamento fastidioso.
Punti di controllo di questa sezione:
Assicurarsi che l'informazione non venga veicolata solo col colore. Per esempio, quando si chiede un input agli utenti, non scrivere "Selezionate una voce tra quelle in verde". Invece, assicuratevi che l'informazione sia disponibile attraverso altri effetti di stile (per esempio un effetto dei font) e attraverso il contesto (per esempio link testuali).
Per esempio, in questo documento gli esempi hanno uno stile di default (con i fogli di stile) come segue:
Test rapido! Per vedere se il vostro documento funziona anche senza colori, esaminatelo con un monitor monocromatico o con i colori del browser disattivati. Provate anche ad impostare uno schema di colori del browser col solo nero, o con tonalità di grigio e vedete se la vostra pagina si mantiene.
Test rapido! Per vedere se il contrasto di colore è sufficiente per le persone con deficit nella percezione del colore o con monitor a bassa risoluzione, stampate le pagine con una stampante in bianco e nero (con colori e sfondi in scala di grigio). Provate anche a fare due o tre stampe di una copia per vederne la degradazione. Questo vi farà capire dove avete bisogno di aggiungere ulteriori suggerimenti visivi (per esempio, i link sono di solito sottolineati), o se tali suggerimenti sono troppo piccoli o indistinti per mantenersi bene.
Per ulteriori informazioni sui colori e i contrasti, si veda [LIGHTHOUSE].
Punti di controllo di questa sezione:
Gli sviluppatori di contenuti per il Web sono incoraggiati ad usare UL per le liste non ordinate e OL per quelle ordinate (ossia una marcatura corretta) combinati ai CSS per fornire suggerimenti contestuali.
Il seguente foglio di stile CSS2 mostra come fornire una numerazione progressiva per le liste annidate create con gli elementi UL o OL. Le voci sono numerate come "1", "1.1", "1.1.1", ecc.
<STYLE type="text/css">
UL, OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, "."); counter-increment: item }
</STYLE>
Fino a quando i CSS2 non saranno ampiamente supportati dai programmi utente o i programmi utente permetteranno agli utenti di controllare la resa delle liste con altri mezzi. gli autori dovrebbero fornire suggerimenti contestuali nelle liste annidate. Il seguente meccanismo CSS1 mostra come nascondere la fine di una lista quando i fogli di stile sono attivati, e a rivelarla quando sono disattivati, quando i fogli di stile utente sovrascrivono il meccanismo di nascondimento o quando i fogli di stile non sono supportati.
<STYLE type="text/css">
.endoflist { display: none }
</STYLE>
<UL>
<LI>Paper:
<UL>
<LI>Envelopes
<LI>Notepaper
<LI>Letterhead
<LI>Poster paper
<span class="endoflist">
(End of Paper)</span>
</UL>
<LI>Pens:
<UL>
<LI>Blue writing pens
<LI>whiteboard pens
<span class="endoflist">
(End of Pens)</span>
</UL>
<LI>Fasteners:
<UL>
<LI>paper clips
<LI>staples
<LI>Big lengths of rope.
<span class="endoflist">
(End of Fasteners)</span>
</UL>
<span class="endoflist">
(End of Office Supplies)</span>
</UL>
Nota: Questo esempio non aiuta nel caso di voci di lista che contengono elementi. Con uno sforzo ulteriore, l'autore potrebbe inserire una simile marcatura alla fine di ogni voce di lista.
Punti di controllo di questa sezione:
Il layout, il posizionamento, i livelli e l'allineamento dovrebbero essere fatti tramite fogli di stile (per esempio usando i flottanti CSS e il posizionamento assoluto):
Se gli sviluppatori di contenuti web non possono usare i fogli di stile e devono
esserci immagini invisibili o trasparenti
(per esempio con IMG) per rappresentare immagini sulla pagine, si deve specificare
alt="" per esse.
Gli autori non non dovrebbero usare spazi per il valore di "alt" per impedire alle parole di comparire quando l'immagine non viene caricata:
my poem requires a big space <IMG src="10pttab.gif" alt=" "> here
Nel prossimo esempio si usa un'immagine per costringere una figura ad apparire in una determinata posizione:
<IMG src="spacer.gif" alt="spacer"> <IMG src="colorfulwheel.gif" alt="The wheel of fortune">
Solo alcune brevi considerazioni sui punti esaminati:
'font-stretch' è stata abbandonata nella Revisione CSS2.1.'float', 'position', 'top', 'right', 'bottom', 'left': possono esservi dei bachi a livello di implementazione
specifica. Per Internet Explorer per Windows si consulti Position Is Everything
o il documento On Having Layout.'empty-cells' non è supportata da Internet Explorer per Windows (versione 6 ed inferiori).Punti di controllo di questa sezione: 6.1 Si organizzino i documenti in modo da poter essere letti senza fogli di stile. Per esempio, quando un documento HTML viene reso senza un foglio di stile associato, deve essere ancora possibile leggere il documento. [Priorità 1] .
Regole e bordi possono veicolare il concetto di "separazione" per gli utenti con vista normale, ma questo significato non deve essere trasferito al di fuori del contesto visivo.
Si usino queste proprietà CSS per specificare gli stili dei bordi:
Gli autori dovrebbero usare i fogli di stile per creare regole e bordi.
In questo esempio, l'elemento H1 element ha un bordo superiore rosso spesso 2px, separato dal contenuto di 1em:
<HEAD>
<TITLE>Redline with style sheets</TITLE>
<STYLE type="text/css">
H1 { padding-top: 1em; border-top: 2px red }
</STYLE>
</HEAD>
<BODY>
<H1>
Chapter 8 - Auditory and Tactile Displays</H1>
</BODY>
Se una regola (per esempio l'elemento HR) viene usata per indicare la struttura, ci si assicuri di indicare la struttura anche in un modo non visuale. (per esempio usando marcatura strutturale).
In questo esempio, l'elemento DIV viene usato per creare una barra di navigazione, la quale include un separatore orizzontale.
<DIV class="navigation-bar"> <HR> <A rel="Next" href="next.html">[Next page]</A> <A rel="Previous" href="previous.html">[Prevous page]</A> <A rel="First" href="first.html">[First page]</A> </DIV>
Alcune osservazioni in ordine di apparizione nel testo. Si noti come ancora una volta il documento debba essere aggiornato ai recenti sviluppi.
'border', 'border-width', 'border-style': Internet Explorer 6 (ed inferiori) per Windows ha notoriamente
dei problemi con dichiarazioni come 'borde-width: 1px;'/'border-style: dotted' (o dashed),
riducendo di fatto il campo di applicazioni della proprietà 'border'.'border-spacing' non è supportata da Internet Explorer 6 (ed inferiori) per Windows.'outline, 'outline-color', 'outline-style', 'outline-width' non sono supportate da Internet Explorer 6 (ed inferiori)
per Windows.Punti di controllo di questa sezione:
Usando le proprietà CSS2 per il posizionamento, il contenuto viene visualizzato in ogni posizione nell'area di visualizzazione dell'utente. L'ordine in cui appaiono le voci su uno schermo può essere differente da quello nel documento sorgente. L'esempio che segue dimostra alcuni principi:
Si noti che viene usata una classe per ogni oggetto posizionato. L'uso di "id" può essere sostituito da "class" in questi esempi. Viene usato "class" perchè gli oggetti sono replicati e quindi non unici.
<head><style type="text/css">
.menu1 {
position: absolute; top: 3em; left: 0em;
margin: 0px; font-family: sans-serif;
font-size: 120%; color: red; background-color: white }
.menu2 {
position: absolute; top: 3em; left: 10em;
margin: 0px; font-family: sans-serif;
font-size: 120%; color: red;
background-color: white }
.item1 { position: absolute; top: 7em; left: 0em;
margin: 0px }
.item2 { position: absolute; top: 8em; left: 0em;
margin: 0px }
.item3 { position: absolute; top: 9em; left: 0em;
margin: 0px }
.item4 { position: absolute; top: 7em; left: 14em;
margin: 0px }
.item5 { position: absolute; top: 8em; left: 14em;
margin: 0px }
#box { position: absolute; top: 5em; left: 5em }
</style></head>
<body>
<div class="box">
<span class="menu1">Products</span>
<span class="menu2">Locations</span>
<span class="item1">Telephones</span>
<span class="item2">Computers</span>
<span class="item3">Portable MP3 Players</span>
<span class="item5">Wisconsin</span>
<span class="item4">Idaho</span>
</div>
</body>
Quando si applicano i fogli di stile, il testo appare su due colonne. Gli elementi con classe "menu1" (Products) e "menu2" (Locations) appaiono come intestazioni colonnari. "Telephones, Computers, and Portable MP3 Players" sono elencati sotto Products e "Wisconsin" e "Idaho" sono elencati sotto Locations come mostrato in questo screenshot:
Quando i fogli di stile non sono applicati, tutto il testo appare su una riga come "Products Locations Telephones Computers Portable MP3 Players Wisconsin Idaho". Le parole appaiono come scritte nel sorgente. Quindi, quello che appare come intestazione di colonna con i fogli di stile applicati appaiono ora prima poichè definiti prima nel sorgente. Il seguente screenshot illustra questo:
Il seguente esempio mostra che si può ottenere la stessa presentazione visiva in un browser che supporta i fogli di stile e nel contempo usare una presentazione logica quando i fogli di stile non sono applicati. Si aggiunge marcatura strutturale (liste di definizione) al contenuto. Si noti che i margini sono impostati a zero, in quanto nei browser HTML le liste di definizione vengono visualizzate con un margine impostato sull'elemento DD.
<head><style type="text/css">
.menu1 { position: absolute; top: 3em; left: 0em;
margin: 0px; font-family: sans-serif;
font-size: 120%; color: red; background-color: white }
.menu2 { position: absolute; top: 3em; left: 10em;
margin: 0px; font-family: sans-serif;
font-size: 120%; color: red; background-color: white }
.item1 { position: absolute; top: 7em; left: 0em;
margin: 0px }
.item2 { position: absolute; top: 8em; left: 0em;
margin: 0px }
.item3 { position: absolute; top: 9em; left: 0em;
margin: 0px }
.item4 { position: absolute; top: 7em; left: 14em;
margin: 0px }
.item5 { position: absolute; top: 8em; left: 14em;
margin: 0px }
#box { position: absolute; top: 5em; left: 5em }
</style></head>
<body>
<div class="box">
<dl>
<dt class="menu1">Products</dt>
<dd class="item1">Telephones</dd>
<dd class="item2">Computers</dd>
<dd class="item3">Portable MP3 Players</dd>
<dt class="menu2">Locations</dt>
<dd class="item4">Idaho</span>
<dd class="item5">Wisconsin</span>
</dt>
</dl>
</div>
</body>
Quando i fogli di stile vengono applicati, appare tutto come in precedenza, Tuttavia, ora senza fogli di stile il testo appare in una lista di definizione invece che in una stringa di parole. Quello che appare in intestazioni colonnari con i fogli di stile, appare ora come termini di definizioni senza di essi, come mostrato nel seguente screenshot.
Nota. Provate da voi questi esempi: file di test per fogli di stile che si trasformano elegantemente.
Punti di controllo di questa sezione: 7.3 Fino a quando i programmi utente non permetteranno agli utenti di bloccare il contenuto, si eviti il movimento nelle pagine. [Priorità 2]
Punti di controllo di questa sezione: 11.3 Fornire informazioni in modo che gli utenti ricevano il contenuto in base alle loro preferenze (per esempio lingua, tipo di contenuto, ecc.) [Priorità 3] .
Le proprietà acustiche CSS2 forniscono informazioni agli utenti non vedenti e agli utenti di browser vocali così come i font forniscono informazioni visuali. L'esempio che segue mostra come varie qualità sonore (tra cui 'voice-family', simile ad un font audio) possono far sapere ad un utente che il contenuto pronunciato è un'intestazione:
H1 {
voice-family: paul;
stress: 20;
richness: 90;
cue-before: url("ping.au")
}
Le seguenti proprietà fanno parte dei fogli di stile acustici CSS2.
Inoltre, la proprietà 'speak-header' descrive come le intestazioni di tabella vengono lette prima di un cella di dati.
Le implementazioni dei fogli di stile acustici si sono rivelate così irrilevanti da inficiarne quasi completamente la reale efficacia.
Punti di controllo di questa sezione: 11.3 Fornire informazioni in modo che gli utenti ricevano il contenuto in base alle loro preferenze (per esempio lingua, tipo di contenuto, ecc.) [Priorità 3] .
I CSS2 permettono agli utenti di accedere a rappresentazioni alternative del contenuto specificato nei valori di attributo quando si usano le seguenti caratteristiche in contemporanea:
Nell'esempio che segue, il valore dell'attributo "alt" per l'elemento IMG viene reso dopo l'immagine (visivamente, acusticamente, ecc.):
IMG:after {
content: attr(alt)
}
Si noti che il valore dell'attributo viene visualizzato anche se l'immagine non è presente (per esempio l'utente ha disabilitato le immagini).
Nota 16Internet Explorer 6 (ed inferiori) per Windows non supporta nessuna delle caratteristiche precedentemente indicate. Inoltre, l'esempio riportato viene supportato solo da Opera 8+.
Punti di controllo di questa sezione: 11.3 Fornire informazioni in modo che gli utenti ricevano il contenuto in base alle loro preferenze (per esempio lingua, tipo di contenuto, ecc.) [Priorità 3].
I "tipi di media" CSS2 (usati con le regole @media) permettono ad autori e utenti di scrivere fogli di stile che saranno resi in modo appropriato su determinati dispositivi di destinazione. Questi fogli di stile possono fornire contenuto per la presentazione su dispositivi braille, sintetizzatori vocali o dispositivi TTY. Usare le regole "@media" riduce anche i tempi di download permettendo ai programmi utente di ignorare regole inapplicabili.
Per l'ultima versione di ogni specifica W3C si consulti l'elenco dei Resoconti Tecnici W3C su http://www.w3.org/TR.
Nota: Il W3C non garantisce la stabilità di nessuna delle seguenti risorse al di fuori del suo controllo. Questi riferimenti vengono inclusi per convenienza. I riferimenti ai prodotti non sono un approvazione di tali prodotti.