CSS/Contenuto generato

Una delle grandi funzionalità del CSS consiste nella possibilità di generare automaticamente il contenuto degli elementi della pagina.
Per fare ciò si usa la proprietà content, che purtroppo non è supportata sempre correttamente da tutti i browser.

content 

La proprietà content imposta il contenuto dell'elemento. Può assumere come valore:

• none: non viene generato alcun contenuto
• una combinazione di:
  • una stringa
  • un percorso che indica una risorsa da inserire (es. un'immagine)
  • un contatore (vedi nel prossimo paragrafo)
  • open-quote o close-quote: virgolette di apertura o di chiusua aumentando di uno il livello di indentazione
  • no-open-quote o no-close-quote: non mostra virgolette ma aumenta il livello di indentazione

Questa proprietà è usata soprattutto con le pseudoclassi :before e :after, ad esempio in questo modo:

 body:after {
  content: 'The end';
 }

imposta il contenuto finale del corpo della pagina. Le pseudoclassi :before e :after non sono però supportate correttamente da IE.

Uso delle virgolette

Per specificare i diversi tipi di virgolette da usare per i diversi livelli di indentazione usiamo la proprietà quotes la cui sintassi è:

 quotes: [apertura1 chiusura1] [apertura2 chiusura2] [apertura''n'' chiusura''n'']

Per spiegare l'uso facciamo un esempio:

 /* questo è lo stile */
 p { quotes: '<<' '>>' '"' '"'; }
 blockquote:before { content: open-quote; }
 blockquote:after { content: close-quote; }

 <!-- nell'HTML -->
 <p>Luigi disse:
  <blockquote>
  Lorem ipsum dolor sit amet, ...<br/>
  Infine disse:
   <blockquote>
    Ma questa è un'altra storia.
   </blockquote>
  E finì.
  </blockquote>
  Questo è quello che disse Luigi.
 </p>

che fornisce come output:

Luigi disse:

<<

Lorem ipsum dolor sit amet, ...

Infine disse:

"Ma questa è un'altra storia."

E finì. >>

Questo è quello che disse Luigi.

Lavorare con i contatori

CSS permette inoltre di generare automaticamente contenuti numerati. Per fare ciò è possibile usare due proprietà:

 counter-reset: <nome1> <valore1> <nome2> <valore2> <nome''n''> <valore''n''>
 counter-increment: <nome1> <valore1> <nome2> <valore2> <nome''n''> <valore''n''>

La prima proprietà resetta il contatore chiamato <nomen> al valore <valoren>. Se omesso il valore, il contatore viene impostato a 0. La seconda proprietà incrementa il valore del contatore chiamato <nomen> di <valoren> posizioni. Se omesso il valore, il contatore viene incrementato di 1.

Per accedere al valore corrente del contatore si usa la funzione

counter(<nome>, <stile>)

dove <nome> è il nome del contatore e <stile> è lo stile del contatore (funziona in maniera identica alla proprietà list-style-type.

Vediamo un esempio per chiarire il concetto:

  /*nel foglio di stile*/
  body { counter-reset: capitolo; }
  h1:before {
     content: "Capitolo " counter(capitolo) ". ";
     counter-increment: capitolo;  /* incrementa il capitolo*/
     counter-reset: sezione;      /* resetta la sezione */
  }
  h2:before {
     content: "Sezione " counter(capitolo) "." counter(sezione) ". ";
     counter-increment: sezione;/* incrementa la sezione */
  }

  <!-- nel codice html -->
  <h1>La pagina</h1>
   <p>...</p>
   <h2>L'intestazione</h2>
   <p>...</p>
   <h2>Il corpo</h2>
   <p>...</p>
  <h1>La formattazione del testo</h1>
   <p>...</p>
   <h2>I tag di formattazione</h2>
   <p>...</p>
   <h2>Il tag font</h2>
   <p>...</p>

produrrà come output

Capitolo 1. La pagina
 ...
 Sezione 1.1. L'intestazione
 ...
 Sezione 1.2. Il corpo
 ...
Capitolo 2. La formattazione del testo
 ...
 Sezione 2.1. I tag di formattazione
 ...
 Sezione 2.2. Il tag font
 ...