Punto di controllo di questa sezione: 6.1 Organizzare i documenti in modo che possano essere letti senza i CSS. Per esempio quando un documento HTML è reso senza i CSS associati, deve essere sempre possibile leggere il documento. [Priorità 1].

Usando le proprietà di posizionamento dei CSS2, il contenuto può essere mostrato in qualunque posizione sul visualizzatore dell’utante. L’ordine in cui i termini appaiono su di uno schermo può essere diverso dall’ordine in cui si trovano nella sorgente del documento.

L’esempio seguente dimostra alcuni principi:

  1. Il testo appare visivamente nel browser in un ordine diverso che nel markup.
  2. Il posizionamento dei CSS può essere usato per creare l’effetto di una tabella. L’elemento TABLE potrebbe essere stato usato per creare lo stesso effetto.

Notare che una classe è definita per ogni oggetto che deve essere posizionato. In questi esempi l’uso di id può essere sostituito da class. Questo è usato perchè negli esempi gli oggetti sono replicati e in questo modo non unici.

Esempio 1,   disapprovato:

 <style type="text/css">
  .menu1 { position: absolute; top: 3em; left: 0em;
           margin: 0px; font-family: sans-serif;
           font-size: 120%; color: red;
           background-color: white
          }
  .menu2 { position: absolute; top: 3em; left: 10em; margin: 0px;
           font-family: sans-serif; font-size: 120%; color: red;           background-color: white }
  .item1 { position: absolute; top: 7em; left: 0em; margin: 0px
         }
  .item2 { position: absolute; top: 8em; left: 0em; margin: 0px
         }
  .item3 { position: absolute; top: 9em; left: 0em; margin: 0px
         }
  .item4 { position: absolute; top: 7em; left: 14em; margin: 0px
         }
  .item5 { position: absolute; top: 8em; left: 14em; margin: 0px
         }
  #box { position: absolute; top: 5em; left: 5em }
 </style>
 </head>
 <body>
  <div class="box">
   <span class="menu1">Products</span>
   <span class="menu2">Locations</span>
   <span class="item1">Telephones</span>
   <span class="item2">Computers</span>
   <span class="item3">Portable MP3 Players</span>
   <span class="item5">Wisconsin</span>
   <span class="item4">Idaho</span>
  </div> </body>

Quando i CSS sono applicati, il testo appare in due colonne. Gli elementi della classe “menu1” (Products) and “menu2” (Locations) appaiono come intestazioni di colonna. “Telephones, Computers, and Portable MP3 Players” sono elencati sotto “Products”, e “Wisconsin” e “Idaho” sono elencati sotto ” Locations”, come si vede nella schermata 1, qui sotto:

Schermata dell'esempio 1, con i CSS applicati,

Quando i CSS non sono applicati, tutto il testo appare in una unica linea di parole: “Products Locations Telephones Computers Portable MP3 Players Wisconsin Idaho”.

Appaiono cioè nell’ordine in cui sono scritti nel listato. Quindi, quello che appare come intestazione di colonna quando i CSS sono applicati, sono le prime frasi poiché sono state definite prima nel listato. Si può vedere nella schermata 2, seguente:

Schermata dell'esempio 1, vista senza i CSS.

 

Il prossimo esempio mostra come sia possibile creare la stessa apparenza visiva in un browser che supporta i CSS, ed ottenere una presentazione significativa anche quando i CSS non sono applicati. Il markup strutturale (elenchi di definizione) è stato applicato al contenuto. Notare che i margini sono stati settati a 0 poiché, nei browser HTML, gli elenchi di definizione sono mostrati con un margine attorno all’elemento DD.

Esempio 2:

  <head>
  <style type="text/css">
  .menu1 { position: absolute; top: 3em; left: 0em;
           margin: 0px; font-family: sans-serif;
           font-size: 120%; color: red; background-color: white
         }
  .menu2 { position: absolute; top: 3em; left: 10em;
           margin: 0px; font-family: sans-serif;
           font-size: 120%; color: red; background-color: white
         }
  .item1 { position: absolute; top: 7em; left: 0em; margin: 0px
         }
  .item2 { position: absolute; top: 8em; left: 0em; margin: 0px
         }
  .item3 { position: absolute; top: 9em; left: 0em; margin: 0px
         }
  .item4 { position: absolute; top: 7em; left: 14em; margin: 0px
         }
  .item5 { position: absolute; top: 8em; left: 14em; margin: 0px
         }
  #box { position: absolute; top: 5em; left: 5em }
 </style>
 </head>
 <body>
  <div class="box">
    <dl>
    <dt class="menu1">Products</dt>
    <dd class="item1">Telephones</dd>
    <dd class="item2">Computers</dd>
    <dd class="item3">Portable MP3 Players</dd>
    <dt class="menu2">Locations</dt>
    <dd class="item4">Idaho</span>
    <dd class="item5">Wisconsin</span>
    </dt>
    </dl>
  </div>
 </body>

 

Quando i CSS sono applicati, si ottiene la schermata  dell’esempio precedente. Ora però, quando i CSS non sono applicati, il testo appare in un lista di definizione e non in una riga di parole. Appaiono cioè le intestazioni di colonna come quando i CSS sono applicati; ecco la dimostrazione nella schermata seguente:

Schermata dell'esempio 2, vista senza i CSS

Nota. Esempio in rete della differenza tra questi esempi: File di test.