CSS/Contenuto generato

Wikibooks, manuali e libri di testo liberi.
< CSS

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 [modifica]

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[modifica]

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[modifica]

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
 ...