4 - Contenuto generato dai CSS
A cura di Maurizio Vittoria | Martedì 26 Novembre 2002
Link permanente
Punti di controllo in questa sezione:
- 3.1 Se esiste il modo di usare il testo in modo appropriato, usare questo al posto delle immagini per veicolare le informazioni. [Priorità 2],
- 6.1 Organizzare i documenti in modo che possano essere letti senza i CSS. Per esempio, quando un documento in HTML è letto senza i CSS associati, deve poter essere letto egualmente, senza perdere alcun elemento. [Priorità 1]
- Tecniche:
- Fornire un equivalente di testo per qualunque immagine importante o qualunque testo generato dai CSS (per esempio, attraverso
background-image,list-style, e la proprietàcontent). - Assicurarsi che il contenuto importante appaia nell’oggetto del documento. Il testo eventualmente generato dai CSS infatti non fa parte del documento stesso e non sarà disponibile alle tecnologie assistive che accedono al contenuto attraverso il Document Object Model Level 1 ([[DOM1]).
I CSS2 includono parecchi meccanismi che permettono al contenuto di essere generato dai CSS stessi:
- Le pseudo-classi
:beforee:aftere la proprietàcontent. Se usati assieme, permettono di evidenziare un contenuto (per esempio, i contatori od una stringa costante come “Fine esempio” negli esempi sotto) prima o dopo il contenuto dell’elemento. - Le proprietà
cue,cue-before,cue-after. Queste proprietà permettono che ci sia un suono prima o dopo il contenuto dell’elemento.. - Gli stili delle Liste, che possono essere numeri, glifi, o immagini (usualmente associati con l’elemento LI in HTML). I CSS2 aggiungono gli stili internazionali delle Liste agli stili definiti nei CSS1. Vedere
list-style-typee la proprietàcontent.
Il contenuto generato può servire come marcatore per aiutare gli utenti che navigano in un documento ad essere orientarti se non hanno la possibilità di accedere alle indicazioni visive come gli scrollbars proporzionali, frames con indici, ecc.
Per esempio, il seguente CSS fa in modo che le parole “Fine esempio” siano generate dopo ogni esempio marcato da un valore di classe speciale:
Esempio:
div.example:after {
content: Fine esempio
}
C’è anche la possibilità di avere i paragrafi numerati e localizzare la posizione del documento in lettura
Esempio:
p:before {
content: counter(paragraph) “. ” ;
counter-increment: paragraph
}
Continua l’argomento con…
- 1 - Ridurre la manutenzione aumentando l’uniformità
- 2 - Possibilità di controllare i CSS
- 3 - Unità di misura
- 5 - Caratteri
- 6 - Effetti di stile del testo
- 7 - Testo al posto delle immagini
- 8 - Formattazione e posizione del testo
- 9 - Colori
- 10 - Fornire informazioni contestuali nelle liste HTML
- 11 - Layout, posizioni, livelli ed allineamento
- 12 - Righe e bordi
- 13 - Usare i CSS ed il markup di posizione per una trasformazione elegante
- 14 - Creare movimento con i CSS e scripts
- 15 - CSS sonori
- 16 - Accesso alla rappresentazione alternativa del contenuto
- 17 - Tipi di Media
- 18 - Riferimenti
- Abstract
- Lo stato di questo documento
- 19 - Risorse
- 20 - Riconoscimenti
- Indice dei contenuti











