12 Contenuti generati , numerazione automatica ed elenchi

Sommario

In alcuni casi, gli autori possono volere che i programmi utente rendano del contenuto che non proviene dall'albero del documento. Un esempio comune in tal senso è un elenco [list, anche "lista"] numerato; l'autore non vuole elencare i numeri esplicitamente, ma lui o lei vuole che il programma utente li generi automaticamente. Similarmente, gli autori possono volere che il programma utente inserisca la parola "Figura" prima della didascalia di una figura, o "Capitolo 7" prima del titolo del settimo capitolo. In particolare per l'audio o il braille, i programmi utente dovrebbero essere in grado di inserire queste stringhe.

Nei CSS2, il contenuto può essere generato da diversi meccanismi:

Di seguito descriviamo i meccanismi associati con la proprietà 'content'.

12.1 Gli pseudo-elementi :before e :after

Gli autori specificano lo stile e la locazione dei contenuti generati con gli pseudo-elementi :before e :after. Come indica il loro nome, gli pseudo-elementi :before e :after specificano la locazione del contenuto prima e dopo il contenuto di un elemento nell'albero del documento. La proprietà 'content', in unione con questi pseudo-elementi, specifica ciò che viene inserito.

Esempi(o):

Per esempio, la seguente regola inserisce la stringa "Note: " prima del contenuto di ogni elemento P il cui attributo di classe "class" ha valore "note":

P.note:before { content: "Note: " }

Gli oggetti di formattazione (per esempio i riquadrati) generati da un elemento includono i contenuti generati. Così, per esempio, cambiando il foglio di stile di sopra in:

P.note:before { content: "Note: " }
P.note        { border: solid green }

farà in modo che un bordo solido verde sia reso intorno all'intero paragrafo, inclusa la stringa iniziale.

Gli pseudo-elementi :before e :after ereditano ogni proprietà ereditabile dall'elemento nell'albero del documento a cui sono uniti.

Esempi(o):

Per esempio, la seguente regola inserisce una virgoletta aperta prima di ogni elemento Q. Il colore della virgoletta sarà rosso, ma il font [font, carattere] sarà lo stesso del resto dell'elemento Q:

Q:before {
  content: open-quote;
  color: red
}

In una dichiarazione di pseudo-elemento :before o :after, le proprietà non-ereditate assumono il loro valore iniziale.

Esempi(o):

Così, per esempio, poichè il valore iniziale della proprietà 'display' è 'inline', la virgoletta nel precedente esempio è inserita come un riquadrato in riga (ossia sulla stessa riga del contenuto iniziale di testo dell'elemento). L'esempio successivo imposta esplicitamente la proprietà 'display' su 'block', cosichè il testo inserito diventa un blocco:

BODY:after {
    content: "The End";
    display: block;
    margin-top: 2em;
    text-align: center;
}

Si noti che un programma utente audio pronuncerebbe le parole "The End" dopo aver reso il resto del contenuto di BODY.

I programmi utente devono ignorare le seguenti proprietà con gli pseudo-elementi :before e :after: 'position', 'float', proprietà di elenco, e di tabella.

Gli pseudo-elementi :before e :after ammettono valori della proprietà 'display' come segue:

Nota. Altri valori possono essere permessi in futuri livelli dei CSS.

12.2 La proprietà 'content'

'content'
Valore:  [ <string> | <uri> | <counter> | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit
Iniziale:  stringa vuota
Si applica a:  pseudo-elementi :before e :after
Ereditata:  no
Percentuali:  N/A
Media:  tutti

Questa proprietà è usata con gli pseudo-elementi :before e :after per generare contenuti in un documento. I valori hanno i seguenti significati:

<string>
Contenuto testuale (si veda la sezione sulle stringhe).
<uri>
Il valore è un URI che designa un risorsa esterna. Se un programma utente non può supportare la risorsa a causa dei tipi di media che supporta, deve ignorare la risorsa. Nota. I CSS2 non offrono alcun meccanismo per cambiare la dimensione di un oggetto inserito, o per fornire una descrizione testuale, come gli attributi "alt" o "longdesc" per le immagini in HTML. Questa situazione può cambiare in futuri livelli dei CSS.
<counter>
I contatori possono essere specificati con due differenti funzioni: 'counter()' o 'counters()'. La prima ha due forme: 'counter(name)' o 'counter(name, style)'. Il testo generato è il valore del contatore nominato in questo punto della struttura di formattazione; è formattato nello stile indicato ('decimal' per impostazione predefinita). La seconda funzione ha anch'essa due forme: 'counter(name, string)' o 'counter(name, string, style)'. Il testo generato è il valore di tutti i contatori con il nome dato in questo punto della struttura di formattazione, separato dalla stringa specificata. I contatori sono resi nello stile indicato ('decimal' per impostazione predefinita). Si veda la sezione sui contatori automatici e numerazione per maggiori informazioni.
open-quote e close-quote
Questi valori vengono rimpiazzati dalla stringa appropriata della proprietà 'quotes'.
no-open-quote e no-close-quote
Non inserisce nulla (stringa vuota), ma incrementa (decrementa) il livello di annidamento per le virgolette.
attr(X)
Questa funzione restituisce come stringa il valore dell'attributo X per il soggetto del selettore. La stringa non è analizzata [parsed] dal processore CSS. Se il soggetto del selettore non ha un attributo X, viene restituita una stringa vuota. La sensibilità alle maiuscole e alle minuscole [case-sensitivity] dei nomi dell'attributo dipende dal linguaggio del documento. Nota. Nei CSS2, non è possibile far riferimento ai valori dell'attributo per altri elementi del selettore.

La proprietà 'display' controlla se il contenuto viene posizionato in un riquadrato a blocco, in riga, o indicatore [marker].

Gli autori dovrebbero inserire le dichiarazioni 'content' in regole @media quando il contenuto è sensibile al media. Per esempio, il testo letterale può essere usato per ogni gruppo di media, ma le immagini solo per i gruppi visuale + bitmap, e i file sonori solo per il gruppo acustico.

Esempi(o):

La seguente regola fa in modo che venga riprodotto un file sonoro alla fine della citazione (si veda la sezione sui fogli di stile acustici per meccanismi aggiuntivi):

@media aural {
   BLOCKQUOTE:after { content: url("beautiful-music.wav") }
   }

Esempi(o):

La prossima regola inserisce il testo dell'attributo HTML "alt" prima dell'immagine. Se l'immagine non viene visualizzata, il lettore vedrà comunque il testo "alt".

IMG:before { content: attr(alt) }

Gli autori possono includere nuove righe nei contenuti generati scrivendo la sequenza di escape "\A" in una delle stringhe dopo la proprietà 'content'. Questo inserisce una interruzione di riga forzata, simile all'elemento BR in HTML. Si vedano "Stringhe" e "Caratteri e forma maiuscola/minuscola" per maggiori informazioni sulla sequenza di escape "\A".

Esempi(o):

H1:before {
    display: block;
    text-align: center;
    content: "chapter\A hoofdstuk\A chapitre"
}

I contenuti generati non alterano l'albero del documento. In particolare, non vengono restituiti al processore del linguaggio del documento (per esempio per una rianalisi [reparsing]).

Nota. Nei futuri livelli dei CSS, la proprietà 'content' potrà accettare valori aggiuntivi, permettendo di variaire lo stile delle parti dei contenuti generati, ma nei CSS2 tutto il contenuto dello pseudo-elemento :before o :after ha lo stesso stile.

12.3 Interazione di :before e :after con elementi 'compact' and 'run-in'

Si possono verficare i seguenti casi:

  1. Un elemento 'run-in' o 'compact' ha uno pseudo-elemento :before di tipo 'inline': lo pseudo-elemento viene preso in considerazione quando si calcola la dimensione del riquadrato dell'elemento (per 'compact') ed è reso all'interno del medesimo riquadrato a blocco dell'elemento.
  2. Un elemento 'run-in' o 'compact' ha uno pseudo-elemento :after di tipo 'inline': Si applicano le regole del punto precedente.
  3. Un elemento 'run-in' o 'compact' ha uno pseudo-elemento :before di tipo 'block': lo pseudo-elemento è formattato come un blocco sopra l'elemento, e non prende parte nel calcolo della dimensione dell'elemento (per 'compact').
  4. Un elemento 'run-in' or 'compact' ha uno pseudo-elemento :after di tipo 'block': sia l'elemento che il suo pseudo-elemento :after sono formattati come riquadrati a blocco. L'elemento non è formattato come un riquadrato in riga nel suo pseudo-elemento :after.
  5. L'elemento che segue un elemento 'run-in' o 'compact' ha uno pseudo-elemento :before di tipo 'block': la decisione su come formattare l'elemento 'run-in'/'compact' è presa rispetto al riquadrato a blocco risultante dallo pseudo-elemento :before.
  6. L'elemento che segue un elemento 'run-in' o 'compact' element ha uno pseudo-elemento :before di tipo 'inline': la decisione su come formattare l'elemento 'run-in'/'compact' dipende da valore 'display' dell'elemento a cui :before è unito.

Esempi(o):

Ecco un'esempio di un'intestazione 'run-in' con uno pseudo-elemento :after, seguito da un paragrafo con uno pseudo-elemento :before. Tutti gli pseudo-elementi sono in riga (impostazione predefinita) in questo esempio. Quando il foglio di stile:

H3 { display: run-in }
H3:after { content: ": " }
P:before { content: "... " }

è applicato a questo documento sorgente:

<H3>Centaurs</H3>
<P>have hoofs
<P>have a tail

La formattazione visiva assomiglierà a:

Centaurs: ... have hoofs
... have a tail

12.4 Virgolette

Nei CSS2, gli autori possono specificare, in un modo sensibile allo stile e dipendente dal contesto, come i programmi utente dovrebbero rendere le virgolette. La proprietà 'quotes' specifica coppie di virgolette per ogni livello di virgolettatura inserito. La proprietà 'content' da accesso a queste virgolette e fa in modo che vengano inserite prima e dopo una citazione.

12.4.1 Specificare le virgolette tramite la proprietà 'quotes'

'quotes'
Valore:  [<string> <string>]+ | none | inherit
Iniziale:  dipende dal programma utente
Si applica a:  tutti gli elementi
Ereditata:  si
Percentuali:  N/A
Media:  visuale

Questa proprietà specifica le virgolette per ciascun numero di virgolettature inserite. I valori hanno i seguenti significati:

none
I valori 'open-quote' e 'close-quote' della proprietà 'content' non producono virgolette.
[<string>  <string>]+
I valori per 'open-quote' e 'close-quote' della proprietà 'content' sono presi da questo elenco di coppie di virgolette (di apertura e di chiusura). La prima coppia (più a sinistra) rappresenta il livello più esterno di virgolettatura, la seconda coppia il primo livello di inserimento, ecc. Il programma utente deve applicare la coppia appropriata di virgolette secondo il livello di inserimento.

Esempi(o):

Per esempio, applicando il seguente foglio di stile:

/* Specify pairs of quotes for two levels in two languages */
Q:lang(en) { quotes: '"' '"' "'" "'" }
Q:lang(no) { quotes: "«" "»" "<" ">" }

/* Insert quotes before and after Q element content */
Q:before { content: open-quote }
Q:after  { content: close-quote }

al seguente frammento HTML:

<HTML lang="en">
  <HEAD>
  <TITLE>Quotes</TITLE>
  </HEAD>
  <BODY>
    <P><Q>Quote me!</Q>
  </BODY>
</HTML>

consentirà ad un programma utente di produrre:

"Quote me!"

mentre questo frammento HTML:

<HTML lang="no">
  <HEAD>
  <TITLE>Quotes</TITLE>
  </HEAD>
  <BODY>
    <P><Q>Trøndere gråter når <Q>Vinsjan på kaia</Q> blir deklamert.</Q>
  </BODY>
</HTML>

produrrà:

«Trøndere gråter når <Vinsjan på kaia> blir deklamert.»

Nota. Mentre le virgolette specificate da 'quotes' negli esempi precedenti sono per convenzione situate sulle tastiere dei computer, insiemi dattilografici di alta qualità richiederebbero differenti caratteri ISO 10646. La seguente tabella informativa elenca alcuni dei caratteri ISO 10646 per le virgolette:

Resa approssimataCodice ISO 10646 (esadecimale)Descrizione
"0022VIRGOLETTE [le doppie virgolette ASCII]
'0027APOSTROFO [la virgoletta singola ASCII]
<2039VIRGOLETTA ANGOLARE SINISTRA SINGOLA
>203AVIRGOLETTA ANGOLARE DESTRA SINGOLA
«00ABDOPPIE VIRGOLETTE ANGOLARI SINISTRE
»00BBDOPPIE VIRGOLETTE ANGOLARI DESTRE
`2018VIRGOLETTA SINGOLA SINISTRA [single high-6]
'2019VIRGOLETTA SINGOLA DESTRA [single high-9]
``201CVIRGOLETTE DOPPIE SINISTRE [double high-6]
''201DVIRGOLETTTE DOPPIE DESTRE [double high-9]
,,201EVIRGOLETTE DOPPIE BASSE [double low-9]

12.4.2 Inserire le virgolette tramite la proprietà 'content'

Le virgolette sono inserite nelle parti appropriate del documento con i valori 'open-quote' e 'close-quote' della proprietà 'content'. Ciascuna ricorrenza di 'open-quote' o 'close-quote' è sostituita da una delle stringhe del valore di 'quotes', basate sulla profondità dell'annidamento.

'Open-quote' si riferisce alla prima coppia di virgolette, 'close-quote' alla seconda. Quale coppia venga usata dipende dal livello di annidamento delle virgolette: il numero delle ricorrenze di 'open-quote' in tutto il testo generato prima della ricorrenza corrente, meno il numero di ricorrenze di 'close-quote'. Se la profondità è 0, viene usata la prima coppia, se la profondità è 1, la seconda e così. Se la profondità è maggiore del numero di coppie, si ripete l'ultima coppia.

Si noti che tale profondità è indipendente dall'annidamento del documento sorgente o dalla struttura di formattazione.

Alcuni stili tipografici richiedono che le virgolette aperte siano ripetute prima di ogni paragrafo di una citazione che occupa diversi paragrafi, ma che solo l'ultimo paragrafo finisca con delle virgolette di chiusura. Nei CSS, questo si può ottenere inserendo virgolette di chiusura "fantasma". La parola chiave 'no-close-quote' decrementa il livello di virgolettatura, ma non inserisce virgolette.

Esempi(o):

Il seguente foglio di stile inserisce virgolette aperte in ogni paragrafo di un BLOCKQUOTE, e inserisce virgolette di chiusura alla fine:

BLOCKQUOTE P:before     { content: open-quote }
BLOCKQUOTE P:after      { content: no-close-quote }
BLOCKQUOTE P.last:after { content: close-quote }

Questo si riferisce all'ultimo paragrafo marcato con una classe "last", poichè non vi sono selettori che possono selezionare l'ultimo figlio di un elemento.

Per simmetria, c'è anche la parola chiave 'no-open-quote', che non inserisce nulla, ma incrementa la profondità di virgolettatura di uno.

Nota. Se una citazione è in una lingua differente dal testo circostante, è buona norma citare il testo con le virgolette della lingua del testo circostante, non della lingua della citazione stessa.

Esempi(o):

Per esempio, francese all'interno di inglese:

The device of the order of the garter is “Honi soit qui mal y pense.”
Inglese all'interno di francese:
Il disait: « Il faut mettre l'action en ‹ fast forward ›.»

Un foglio di stile come il seguente imposterà la proprietà 'quotes' in modo che 'open-quote' e 'close-quote' funzionino correttamente su tutti gli elementi. Queste regole sono per documenti che contengono solo inglese, francese o entrambi. Si richiede una regola per ogni lingua aggiuntiva. Si noti l'uso del combinatore figlio (">") per impostare le virgolette su elementi basati sulla lingua del testo circostante:

[LANG|=fr] > *  { quotes: "«" "»" "\2039" "\203A" }
[LANG|=en] > *  { quotes: "\201C" "\201D" "\2018" "\2019" }

Le virgolette per l'inglese sono qui mostrate in una forma che la maggior parte della persone sarà in grado di digitare. Se potete digitarle direttamente, appariranno come:

[LANG|=fr] > * { quotes: "«" "»" "‹" "›" }
[LANG|=en] > * { quotes: "“" "”" "‘" "’" }

12.5 Contatori automatici e numerazione

La numerazione automatica nei CSS2 è controllata tramite due proprietà, 'counter-increment' e 'counter-reset'. I contatori definiti da queste proprietà sono usati con le funzioni counter() e counters() della proprietà 'content'.

'counter-reset'
Valore:  [ <identifier> <integer>? ]+ | none | inherit
Iniziale:  none
Si applica a:  tutti gli elementi
Ereditata:  no
Percentuali:  N/A
Media:  tutti
'counter-increment'
Valore:  [ <identifier> <integer>? ]+ | none | inherit
Iniziale:  none
Si applica a:  tutti gli elementi
Ereditata:  no
Percentuali:  N/A
Media:  tutti

La proprietà 'counter-increment' accetta uno o più nomi di contatori (identificatori), ciascuno seguito opzionalmente da un intero. L'intero indica di quanto il contatore viene incrementato per ogni ricorrenza dell'elemento. L'incremento predefinito è 1. Zero e interi negativi sono permessi.

La proprietà 'counter-reset' contiene anche un elenco di uno o più nomi di contatori, ciascuno seguito opzionalmente da un intero. L'intero da il valore su cui il contatore è impostato ad ogni ricorrenza dell'elemento. Il valore predefinito è 0.

Se 'counter-increment' si riferisce ad un contatore che non è nell'ambito di applicazione (vedi sotto) di ogni 'counter-reset', si presuppone che il contatore sia stato impostato a 0 dall'elemento radice.

Esempi(o):

Questo esempio mostra un modo di numerare capitoli e sezioni con "Chapter 1", "1.1", "1.2", ecc.

H1:before {
    content: "Chapter " counter(chapter) ". ";
    counter-increment: chapter;  /* Add 1 to chapter */
    counter-reset: section;      /* Set section to 0 */
}
H2:before {
    content: counter(chapter) "." counter(section) " ";
    counter-increment: section;
}

Se un elemento incrementa/azzera [reset] un contatore e lo usa anche (nella proprietà 'content' del suo pseudo-elemento :before o :after), il contatore è usato dopo essere stato incrementato/azzerato.

Se un elemento azzera e incrementa al contempo un contatore, il contatore è prima azzerato e poi incrementato.

La proprietà 'counter-reset' segue le regole di cascata. Così, a causa della cascata, il seguente foglio di stile:

H1 { counter-reset: section -1 }
H1 { counter-reset: imagenum 99 }

azzererà solo 'imagenum'. Per azzerare entrambi i contatori, essi devono essere specificati insieme:

H1 { counter-reset: section -1 imagenum 99 }

12.5.1 Contatori annidati ed àmbito di applicazione

I contatori sono "auto-annidanti" [self-nesting], nel senso che ri-usare un contatore in un elemento figlio crea automaticamente una nuova istanza del contatore. Questo è importante per le situazioni come gli elenchi in HTML, dove gli elementi possono essere innestati dentro se stessi ad una profondità arbitraria. Sarebbe altresì impossibile definire univocamente contatori nominati per ogni livello.

Esempi(o):

Così, l'esempio seguente è sufficiente a numerare voci di elenco annidate. Il risultato è molto simile a quello che si ottiene impostando 'display:list-item' e 'list-style: inside' sull'elemento LI:

OL { counter-reset: item }
LI { display: block }
LI:before { content: counter(item) ". "; counter-increment: item }

L'auto-annidamento è basato sul principio secondo cui ogni elemento che ha un 'counter-reset' per un contatore X, crea un nuovo contatore X, il cui àmbito di applicazione è l'elemento, i suoi fratelli precedenti, tutti i discendenti dell'elemento e i suoi precedenti fratelli.

Nell'esempio di sopra, un elemento OL creerà un contatore, e tutti i figli di OL faranno riferimento a quel contatore.

Se indichiamo con item[n] l'istanza no del contatore "item", e con "(" e ")" l'inizio e la fine di un àmbito di applicazione, allora il seguente frammento HTML userà i contatori indicati. (Presupponiamo che il foglio di stile sia quello dato nell'esempio di sopra).

<OL>               <!-- (set item[0] to 0          -->
  <LI>item         <!--  increment item[0] (= 1)   -->
  <LI>item         <!--  increment item[0] (= 2)   -->
    <OL>           <!--  (set item[1] to 0         -->
      <LI>item     <!--   increment item[1] (= 1)  -->
      <LI>item     <!--   increment item[1] (= 2)  -->
      <LI>item     <!--   increment item[1] (= 3)  -->
        <OL>       <!--   (set item[2] to 0        -->
          <LI>item <!--    increment item[2] (= 1) -->
        </OL>      <!--   )                        -->
        <OL>       <!--   (set item[3] to 0        -->
          <LI>     <!--    increment item[3] (= 1) -->
        </OL>      <!--   )                        -->
      <LI>item     <!--   increment item[1] (= 4)  -->
    </OL>          <!--  )                         -->
  <LI>item         <!--  increment item[0] (= 3)   -->
  <LI>item         <!--  increment item[0] (= 4)   -->
</OL>              <!-- )                          -->
<OL>               <!-- (reset item[4] to 0        -->
  <LI>item         <!--  increment item[4] (= 1)   -->
  <LI>item         <!--  increment item[4] (= 2)   -->
</OL>              <!-- )                          -->

La funzione 'counters()' genera una stringa composta dai valori di tutti i contatori con lo stesso nome, separati dalla stringa data.

Esempi(o):

Il seguente foglio di stile numera le voci annidate di un elenco come "1", "1.1", "1.1.1", ecc.

OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, "."); counter-increment: item }

12.5.2 Stili per contatori

Per impostazione predefinita, i contatori sono formattati con numeri decimali, ma tutti gli stili disponibili per la proprietà 'list-style-type' sono disponibili anche per i contatori. La notazione è:

counter(name)

per lo stile predefinito, o:

counter(name, 'list-style-type')

Tutti gli stili sono permessi, inclusi 'disc', 'circle', 'square', e 'none'.

Esempi(o):

H1:before        { content: counter(chno, upper-latin) ". " }
H2:before        { content: counter(section, upper-roman) " - " }
BLOCKQUOTE:after { content: " [" counter(bq, hebrew) "]" }
DIV.note:before  { content: counter(notecntr, disc) " " }
P:before         { content: counter(p, none) }

12.5.3 Contatori in elementi con 'display: none'

Un elemento che non è visualizzato ('display' impostato a 'none') non può incrementare o azzerare un contatore.

Esempi(o):

Per esempio, con il seguente foglio di stile, gli H2 con classe "secret" non incrementano 'count2'.

H2.secret {counter-increment: count2; display: none}

Elementi con 'visibility' impostata a 'hidden', d'altro canto, incrementano i contatori.

12.6 Indicatori [Markers] ed elenchi

La maggior parte degli elementi a livello di blocco nei CSS generano un riquadrato principale a blocco. In questa sezione sezione verranno discussi due meccanismi CSS che fanno in modo che un elemento generi due riquadrati: un riquadrato a blocco principale (per il contenuto dell'elemento) ed un riquadrato indicatore [marker box] separato (per decorazioni come un pallino, un'immagine o un numero). Il riquadrato può essere posizionato dentro o fuori il riquadrato principale. A differenza del contenuto di :before e :after, il riquadrato indicatore non influenza la posizione del riquadrato principale, qualunque sia lo schema di posizionamento.

Il più generale dei due meccanismi è nuovo nei CSS2 ed è chiamato indicatori. Il meccanismo più limitato riguarda le proprietà di elenco dei CSS1. Le proprietà di elenco danno agli autori rapidi risultati per molti scenari comuni di elenchi ordinati e non-ordinati. Tuttavia, gli indicatori danno agli autori un controllo preciso sul contenuto degli indicatori e sulla loro posizione. Gli indicatori possono essere usati con i contatori per creare nuovi stili di elenco, per numerare note a margine, e molto di più.

Per esempio, il seguente esempio illustra come gli indicatori possano essere usati per aggiungere punti dopo ogni voce numerata di elenco. Questo codice HTML e questo foglio di stile:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
   <HEAD>
     <TITLE>Creating a list with markers</TITLE>
     <STYLE type="text/css">
	  LI:before { 
	      display: marker;
	      content: counter(mycounter, lower-roman) ".";
	      counter-increment: mycounter;
	  }   
     </STYLE>
  </HEAD>
  <BODY>
    <OL>
      <LI> This is the first item.
      <LI> This is the second item.
      <LI> This is the third item.
    </OL>
  </BODY>
</HTML>

dovrebbero produrre qualcosa come questo:

   i. This is the first item.
  ii. This is the second item.
 iii. This is the third item.

Con i selettori discendenti e i selettori figlio, è possibile specificare differenti tipi di indicatore dipendenti dalla profondità degli elenchi inseriti.

12.6.1 Indicatori: la proprietà 'marker-offset'

Gli indicatori sono creati impostando la proprietà 'display' su 'marker' all'interno di uno pseudo-elemento :before o :after. Mentre il contenuto 'block' e 'inline' di :before e :after content è parte del riquadrato principale generato dall'elemento, il contenuto di 'marker' è formattato in un riquadrato indicatore indipendente, fuori dal riquadrato principale. I riquadrati indicatori sono formattati come una singola riga (ossia un riquadrato di riga), così da non essere flessibili come i flottanti. Il riquadrato indicatore è creato solo se la proprietà 'content' per lo pseudo-elemento genera davvero contenuto.

I riquadrati indicatori hanno cuscinetto e bordi, ma non margini.

Per lo pseudo-elemento :before, la riga di base del testo nel riquadrato indicatore sarà allineata verticalmente con la riga di base del testo nella prima riga di contenuto nel riquadrato principale. Se il riquadrato principale non contiene testo, il limite superiore esterno del riquadrato indicatore sarà allineato con il limite superiore esterno del riquadrato principale. Per lo pseudo-elemento :after, la riga di base del testo nel riquadrato indicatore sarà allineata verticalmente con la riga di base del testo nell'ultima riga del contenuto nel riquadrato principale. Se il riquadrato principale non contiene testo, il limite inferiore esterno del riquadrato indicatore sarà allineato con il limite inferiore esterno del riquadrato principale.

L'altezza di un riquadrato indicatore è data dalla proprietà 'line-height'. Il riquadrato indicatore di :before (:after) partecipa al calcolo dell'altezza del primo (ultimo) riquadrato di riga del riquadrato principale. Così, gli indicatori sono allineati con la prima ed ultima riga del contenuto di un elemento, anche se i riquadrati marcatori vivono in distinti riquadrati di riga. Se non esiste un primo ed ultimo riquadrato di riga nel riquadrato principale, il riquadrato indicatore stabilisce da solo il suo riquadrato di riga.

L'allineamento verticale di un riquadrato indicatore all'interno del suo riquadrato di riga è specificato tramite la proprietà 'vertical-align'.

Se il valore della proprietà 'width' è 'auto', la larghezza del contenuto del riquadrato indicatore è quella del contenuto, altrimenti è il valore di 'width'. Per valori di 'width' minori della larghezza del contenuto, la proprietà 'overflow' specifica il comportamento di eccedenza. I riquadrati indicatori possono sovrapporsi ai riquadrati principali. Per valori di 'width' maggiori della larghezza del contenuto, la proprietà 'text-align' determina l'allineamento orizzontale del contenuto nel riquadrato indicatore.

La proprietà 'marker-offset' specifica lo spostamento orizzontale fra un riquadrato indicatore e il riquadrato principale associato. La distanza è misurata fra i loro limiti del bordo più prossimi. Nota. Se un indicatore fluisce alla destra di un flottante in un contesto di formattazione da sinistra a destra, il riquadrato principale fluirà giù lungo il lato destro del flottante, ma i riquadrati indicatori appariranno alla sinistra del flottante. Poichè il limite del bordo sinistro del riquadrato principale si trova alla sinistra del flottante (si veda la descrizione dei flottanti), e i riquadrati indicatori si trovano fuori del limite del bordo del riquadrato principale, anche l'indicatore si troverà alla sinistra del flottante. Un analogo comportamento si applica alla formattazione da destra a sinistra quando un indicatore fluisce alla sinistra di un flottante.

Quando la proprietà 'display' ha valore 'marker' per i contenuti generati da un elemento con 'display: list-item', un riquadrato indicatore generato per ':before' sostituisce il normale indicatore di voce di elenco.

Nel seguente esempio, il contenuto è centrato all'interno di un riquadrato indicatore di larghezza fissa. Questo documento:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
 <HTML>
    <HEAD>
      <TITLE>Content alignment in the marker box</TITLE>
      <STYLE type="text/css">
           LI:before { 
               display: marker;
               content: "(" counter(counter) ")";
               counter-increment: counter;
               width: 6em;
               text-align: center;
           }
      </STYLE>
   </HEAD>
   <BODY>
     <OL>
       <LI> This is the first item.
       <LI> This is the second item.
       <LI> This is the third item.
     </OL>
   </BODY>
 </HTML>

dovrebbe produrre qualcosa come questo:

  (1)    This is the 
         first item.
  (2)    This is the 
         second item.
  (3)    This is the 
         third item.

Il prossimo esempio crea indicatori prima e dopo le voci di elenco.

Questo documento:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Markers before and after list items</TITLE>
    <STYLE type="text/css">
      @media screen, print {
         LI:before { 
   	      display: marker;
	      content: url("smiley.gif");
         LI:after {
	      display: marker;
   	      content: url("sad.gif");
         }
      }
    </STYLE>
  </HEAD>
  <BODY>
    <UL>
      <LI>first list item comes first
      <LI>second list item comes second
    </UL>
  </BODY>
</HTML>

dovrebbe produrre qualcosa come questo (l'ascii art è usata al posto di immagini gif sorridenti):

  :-) first list item 
      comes first      :-(
  :-) second list item 
      comes second     :-(

Il prossimo esempio usa gli indicatori per numerare note (paragrafi).

Il seguente documento:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Markers to create numbered notes4>/TITLE>
    <STYLE type="text/css">
      P { margin-left: 12 em; }
      @media screen, print {
         P.Note:before         { 
  	      display: marker;
	      content: url("note.gif") 
                       "Note " counter(note-counter) ":";
              counter-increment: note-counter;
              text-align: left;
              width: 10em;
         }
     }
    </STYLE>
  </HEAD>
  <BODY>
    <P>This is the first paragraph in this document.</P>
    <P CLASS="Note">This is a very short document.</P>
    <P>This is the end.</P>
  </BODY>
</HTML>

dovrebbe produrre qualcosa come:

            This is the first paragraph 
            in this document.

  Note 1:   This is a very short 
            document.
           
            This is the end.
'marker-offset'
Valore:  <length> | auto | inherit
Iniziale:  auto
Si applica a:  elementi con 'display: marker'
Ereditata:  no
Percentuali:  N/A
Media:  visuale

Questa proprietà specifica la distanza fra i limiti del bordo più vicini del riquadrato indicatore e il suo riquadrato principale associato. Lo spostamento può essere sia specificato dall'utente (<length>) o scelto dal programma utente ('auto'). Le lunghezze possono essere negative, ma possono esservi limiti nell'implementazione specifica.

Il seguente esempio illustra come gli indicatori possano essere usati per aggiungere punti dopo ogni voce di elenco numerata. Questo codice HTML e il foglio di stile:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 <HTML>
    <HEAD>
      <TITLE>Marker example 5</TITLE>
      <STYLE type="text/css">
           P { margin-left: 8em } /* Make space for counters */
           LI:before { 
               display: marker;
               marker-offset: 3em;
               content: counter(mycounter, lower-roman) ".";
               counter-increment: mycounter;
           }   
      </STYLE>
   </HEAD>
   <BODY>
     <P> This is a long preceding paragraph ...
     <OL>
       <LI> This is the first item.
       <LI> This is the second item.
       <LI> This is the third item.
     </OL>
     <P> This is a long following paragraph ...
   </BODY>
 </HTML>

dovrebbero produrre qualcosa come questo:

        This is a long preceding
        paragraph ...
      
   i.   This is the first item.
  ii.   This is the second item.
 iii.   This is the third item.

        This is a long following
        paragraph ...

12.6.2 Elenchi: le proprietà 'list-style-type', 'list-style-image', 'list-style-position', e 'list-style'

Le proprietà di elenco consentono la formattazione visuale di base degli elenchi [lists o "liste"]. Come con gli indicatori più generali, un elemento con 'display: list-item' genera un riquadrato principale per il contenuto dell'elemento e un riquadrato indicatore opzionale. Le altre proprietà di elenco permettono agli autori di specificare il tipo di indicatore (immagine, simbolo grafico, o numero) e la sua posizione rispetto al riquadrato principale (dentro o fuori di esso prima del contenuto). Non permettono agli autori di specificare uno stile distinto (colori, font, allineamento, ecc.) per l'indicatore di elenco o sistemare la sua posizione rispetto al riquadrato principale.

Inoltre, quando un indicatore M (creato con 'display: marker') è usato con una voce di elenco creata dalle proprietà di lista, M sostituisce l'indicatore standard della voce di elenco.

Con le proprietà di elenco, le proprietà dello sfondo si applicano solo al riquadrato principale; un riquadrato indicatore 'outside' è trasparente. Gli indicatori offrono più controllo sullo stile del riquadrato indicatore.

'list-style-type'
Valore:  disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha | none | inherit
Iniziale:  disc
Si applica a:  elementi con 'display: list-item'
Ereditata:  si
Percentuali:  N/A
Media:  visuale

Questa proprietà specifica l'aspetto dell'indicatore della voce dell'elenco se 'list-style-image' ha valore 'none' o se l'immagine a cui fa riferimento l'URI non può essere visualizzata. Il valore 'none' non specifica alcun indicatore, altrimenti vi sono tre tipi di indicatori: simboli grafici, sistemi numerici e sistemi alfabetici. Nota. Gli elenchi numerati aumentano l'accessibilità del documento rendendo gli elenchi più facili da navigare.

I simboli grafici sono specificati con disc, circle, e square. La loro resa esatta dipende dal programma utente.

I sistemi numerici sono specificati con:

decimal
Numeri decimali che iniziano con 1.
decimal-leading-zero
Numeri decimali con zero iniziale (ossia 01, 02, 03, ..., 98, 99).
lower-roman
Numerali romani minuscoli (i, ii, iii, iv, v, etc.).
upper-roman
Numerali romani maiuscoli (I, II, III, IV, V, etc.).
hebrew
Numerazione tradizionale ebraica.
georgian
Numerazione tradizionale georgiana (an, ban, gan, ..., he, tan, in, in-an, ...).
armenian
Numerazione tradizionale armena.
cjk-ideographic
Numeri ideografici semplici.
hiragana
a, i, u, e, o, ka, ki, ...
katakana
A, I, U, E, O, KA, KI, ...
hiragana-iroha
i, ro, ha, ni, ho, he, to, ...
katakana-iroha
I, RO, HA, NI, HO, HE, TO, ...

Un programma utente che non riconosce un sistema numerico dovrebbe usare 'decimal'.

Nota. Questo documento non specifica il meccanismo esatto di ciascun sistema numerico (ossia come sono calcolati i numerali romani). Una futura Nota del W3C può fornire ulteriori chiarificazioni.

I sistemi alfabetici sono specificati con:

lower-latin o lower-alpha
Lettere ascii minuscole (a, b, c, ... z).
upper-latin o upper-alpha
Lettere ascii maiuscole (A, B, C, ... Z).
lower-greek
Le minuscole greche classiche alpha, beta, gamma, ... (έ, ή, ί, ...)

Queste specifiche non definiscono come i sistemi alfabetici si estendano alla fine dell'alfabeto. Per esempio, dopo 26 voci di elenco, la resa di 'lower-latin' non è definita. Perciò, per lunghi elenchi, raccomandiamo che gli autori specifichino numeri reali.

Per esempio, il seguente documento HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
   <HEAD>
     <TITLE>Lowercase latin numbering</TITLE>
     <STYLE type="text/css">
          OL { list-style-type: lower-roman }   
     </STYLE>
  </HEAD>
  <BODY>
    <OL>
      <LI> This is the first item.
      <LI> This is the second item.
      <LI> This is the third item.
    </OL>
  </BODY>
</HTML>

potrebbe produrre qualcosa come questo:

  i This is the first item.
 ii This is the second item.
iii This is the third item.

Si noti che l'allineamento dell'indicatore di lista (qui giustificato a destra) dipende dal programma utente.

Nota. Future versioni dei CSS possono fornire meccanismi più completi per gli stili di numerazione internazionale.

'list-style-image'
Valore:  <uri> | none | inherit
Iniziale:  none
Si applica a:  elementi con 'display: list-item'
Ereditata:  si
Percentuali:  N/A
Media:  visuale

Questa proprietà imposta l'immagine che sarà usata come indicatore di voce dell' elenco. Quando l'immagine è disponibile, essa sostituirà l'insieme di indicatori con indicatore 'list-style-type'.

Esempi(o):

Il seguente esempio imposta come indicatore all'inizio di ogni voce di elenco l'immagine "ellipse.png".

UL { list-style-image: url("http://png.com/ellipse.png") }
'list-style-position'
Valore:  inside | outside | inherit
Iniziale:  outside
Si applica a:  elementi con 'display: list-item'
Ereditata:  si
Percentuali:  N/A
Media:  visuale

Questa proprietà specifica la posizione del riquadrato indicatore nel riquadrato principale a bloco. I valori hanno i seguenti significati:

outside
Il riquadrato indicatore è al di fuori del riquadrato a blocco principale. Nota. I CSS1 non specificavano la posizione precisa del riquadrato indicatore e, per ragioni di compatibilità, i CSS2 rimangono ugualmente ambigui. Per un più preciso controllo dei riquadrati indicatori, si prega di usare gli indicatori.
inside
Il riquadrato indicatore è il primo riquadrato in riga nel riquadrato a blocco principale, dopo il quale fluisce il contenuto dell'elemento.

Per esempio:

<HTML>
  <HEAD>
    <TITLE>Comparison of inside/outside position</TITLE>
    <STYLE type="text/css">
      UL         { list-style: outside }
      UL.compact { list-style: inside }
    </STYLE>
  </HEAD>
  <BODY>
    <UL>
      <LI>first list item comes first
      <LI>second list item comes second
    </UL>

    <UL class="compact">
      <LI>first list item comes first
      <LI>second list item comes second
    </UL>
  </BODY>
</HTML>

L'esempio di sopra può essere formattato come:

Differenza fra 'inside'
e 'outside' nella proprietà 'list-style-position'   [D]

Nel testo da destra a sinistra, gli indicatori sarebbero stati sul lato destro del riquadrato.

'list-style'
Valore:  [ <'list-style-type'> || <'list-style-position'> || <'list-style-image'> ] | inherit
Iniziale:  non definito per le proprietà stenografiche
Si applica a:  elementi con 'display: list-item'
Ereditata:  si
Percentuali:  N/A
Media:  visuale

La proprietà 'list-style' è una notazione stenografica [shorthand, o abbreviata] per impostare le tre proprietà 'list-style-type', 'list-style-image', e 'list-style-position' nella medesima posizione nel foglio di stile.

Esempi(o):

UL { list-style: upper-roman inside }  /* Any UL */
UL > UL { list-style: circle outside } /* Any UL child of a UL */

Sebbene gli autori possono specificare l'informazione 'list-style' direttamente sugli elementi delle voci di elenco (per esempio LI in HTML), dovrebbero farlo con attenzione. Le seguenti regole sembrano simili, ma la prima dichiara un selettore discendente e il secondo un (più specifico) selettore figlio.

OL.alpha LI   { list-style: lower-alpha } /* Any LI descendant of an OL */
OL.alpha > LI { list-style: lower-alpha } /* Any LI child of an OL */

Gli autori che usano solo il selettore discendente possono non ottenere i risultati sperati. Si considerino le seguenti regole:

<HTML>
  <HEAD>
    <TITLE>WARNING: Unexpected results due to cascade</TITLE>
    <STYLE type="text/css">
      OL.alpha LI  { list-style: lower-alpha }
      UL LI        { list-style: disc }
    </STYLE>
  </HEAD>
  <BODY>
    <OL class="alpha">
      <LI>level 1
      <UL>
         <LI>level 2
      </UL>
    </OL>
  </BODY>
</HTML>

La resa desiderata avrebbe voci di lista di livello 1 con etichette 'lower-alpha' e voci di livello 2 con etichette 'disc'. Tuttavia, l'ordine di cascata farà in modo che la prima regola di stile (che include una specifica informazione di classe) mascheri la seconda. Le seguenti regole risolvono il problema usando invece un selettore figlio:

OL.alpha > LI  { list-style: lower-alpha }
UL LI   { list-style: disc }

Un'altra soluzione sarebbe specificare un'informazione 'list-style' solo per gli elementi di tipo elenco:

OL.alpha  { list-style: lower-alpha }
UL        { list-style: disc }

L'eredità trasferirà i valori 'list-style' dagli elementi OL e UL agli elementi LI. Questo è il modo raccomandato di specificare le informazioni di stile per gli elenchi.

Esempi(o):

Un valore URI può essere combinato con ogni altro valore, come in:

UL { list-style: url("http://png.com/ellipse.png") disc }

Nell'esempio di sopra, 'disc' sarà usato quando l'immagine non è disponibile.

Un valore di 'none' per la proprietà 'list-style' imposta 'list-style-type' e 'list-style-image' su 'none':

UL { list-style: none }

Il risultato è che nessun indicatore di voce dell'elenco è visualizzato.