Semplicemente

Grazie al contenuto generato via CSS è possibile modificare l'aspetto delle liste ordinate. Nulla di nuovo, ma ovviamente IE (compresa la versione 7) non supporta questo metodo.

Maria, una mia ex allieva, oggi mi ha chiesto un consiglio sui fogli di stile e le liste ordinate. Mentre le rispondevo ho giocato un po' con il contenuto generato.

A volte la mancanza di gradi di libertà nella scelta della formattazione dei contatori può creare problemi. Per esempio quando è necessario pubblicare sul web documenti legali, nei quali è più comune un ordinamento alfabetico con parentesi dopo il contatore: a), b), c) ecc. oppure numerico ma con parentesi: 1), 2), 3) ecc. piuttosto che nella forma standard HTML: 1. 2. 3. ecc.

Beh, per ciò che riguarda l'ordinamento numerico qualcosa si può fare con CSS e con tecniche ormai datate. Chiaramente solo chi utilizza browser evoluti (come Opera o Firefox) potrà osservare il risultato.

Ecco un esempio di codice HTML al quale applicare le regole CSS che vedremo:

1. <ol>
2. <li>Voce 1</li>
3. <li>Voce 2
4. <ol>
5. <li>Sotto voce 1</li>
6. <li>Sotto voce 2</li>
7. <li>Sotto voce 3</li>
8. </ol>
9. </li>
10. <li>Voce 3</li>
11. <li>Voce 4
12. <ol>
13. <li>Sotto voce 1</li>
14. <li>Sotto voce 2</li>
15. <li>Sotto voce 3</li>
16. </ol>
17. </li>
18. <li>Voce 5</li>
19. <li>Voce 6</li>
20. <li>Voce 7</li>
21. </ol>

Lo scopo è ottenere contatori numerici delimitati da parentesi. Per le liste annidate il contatore numerico dovrà essere visualizzato nella forma 1.1, 1.2 ecc. Ecco il foglio di stile:

1. ol { counter-reset: item; }
2. ol li { list-style-type: none; }
3. ol li:before {
4. content: counter(item) ") ";
5. counter-increment: item;
6. }
7. ol ol { counter-reset: sub-item; }
8. ol li ol li:before {
9. content: counter(item) "." counter(sub-item) ") ";
10. counter-increment: sub-item;
11. }

Ed ecco come apparirà la lista con il browser Firefox:

Tag: CSS, Firefox, HTML, Opera

Questo articolo è stato inviato Friday 30 November 2007 alle 23:14 ed è archiviato nella categoria Fogli di stile. Puoi seguire le risposte tramite il feed RSS 2.0. Se lo desideri puoi lasciare un commento, o un trackback dal tuo sito.