20. I blocchi di codice

Passiamo quindi alla formattazione dei blocchi di codice, ricordando che abbiamo scelto di usare un elenco ordinato in luogo dell'elemento pre, in quanto:

  1. tale elemento non garantisce un controllo preciso sul testo in caso di ridimensionamento della finestra di visualizzazione o di ingrandimento del testo
  2. non è semanticamente l'elemento più appropriato.

All'interno delle voci dell'elenco useremo l'elemento code, che è sicuramente più indicato a livello semantico. Gli stili sono i seguenti:

  1. ol.code {
  2. margin-left: 0;
  3. padding: 0.3em;
  4. border: 1px solid #999;
  5. }
  6. ol.code li {
  7. display: block;
  8. background: #ffe;
  9. color: #ffe;
  10. margin: 2px 0;
  11. padding: 0.25em;
  12. border-bottom: 1px solid #999;
  13. }
  14. ol.code li code {
  15. color: #000;
  16. }
  17. ol.code li.indent1 {
  18. text-indent: 2em;
  19. }
  20. ol.code li.vspace {
  21. margin-bottom: 0.5em;
  22. }
  1. Righe 1-5: all'elenco ordinato viene assegnata la classe .code. Il suo rientro viene annullato, gli viene assegnato un padding su tutti i lati ed un bordo
  2. Righe 6-13: le voci dell'elenco vengono dichiarate di blocco per sopprimere il marcatore di elenco senza ricorrere alla dichiarazione list-style: none. Per rendere lo stile compatibile anche con Internet Explorer 7 ed inferiori si imposta il colore di sfondo sullo stesso valore del colore del testo, eliminando la visualizzazione del marcatore. Questa dichiarazione viene poi sovrascritta sull'elemento code (righe 14-16)
  3. Righe 17-22: Vengono create due classi per gestire l'indentazione del codice (classe .indent1) e l'eventuale spazio verticale tra le righe del codice (classe .vspace). Si noti che per l'indentazione si può usare anche un padding sinistro, particolarmente indicato se una riga di codice viene spezzata su due righe.

Possiamo osservare i nostri progressi nel nostro documento XHTML e nel nostro documento HTML.