13 – Usare i CSS ed il markup di posizione per una trasformazione elegante

 

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.

Potrebbero interessarti anche i seguenti articoli

  • 12 – Righe e bordi12 – Righe e bordi   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 […]
  • 3 – Unità di misura3 – Unità di misura Punti di controllo in questa sezione: 3.4 Usare unità di misura relative al posto delle unità di misura assolute sia negli attributi HTML, sia nei valori delle […]
  • 10 – Fornire informazioni contestuali nelle liste HTML10 – Fornire informazioni contestuali nelle liste HTML Punti di controllo in questa sezione: 3.6 Marcare le liste ed elencare i suoi elementi in modo appropriato. [Priorità 2] 13.2 Fornire dei metadata per […]
  • 1 – Ridurre la manutenzione aumentando l’uniformità1 – Ridurre la manutenzione aumentando l’uniformità   Punti di controllo in questa sezione: 14.3 Creare uno stile di presentazione che sia coerente in tutte le pagine le pagine. [Priorità 3]. Usare un numero […]
  • 6 – Effetti di stile del testo6 – Effetti di stile del testo Punto di controllo in questa sezione: 7.2 Fino a quando gli interpreti non permetteranno agli utenti di controllare il lampeggio (blinking), evitare di far lampeggiare […]
Condividi:

Informazioni sull'autore

Maurizio Vittoria
Maurizio Vittoria
Sono nato e vivo a Venezia, dove svolgo attività di Webmaster presso la Biblioteca Nazionale Marciana. Qui ho potuto unire lo status di bibliotecario con la passione per l'informatica e Internet. Come bibliotecario non potevo non interessarmi alle enormi possibilità che la rete può offrire nel campo della catalogazione e nella ricerca bibliografica; mi sono perciò specializzato nella reperibilità delle risorse e nelle ricerche on line, per le quali tengo periodicamente dei corsi, oltre a quelli su Internet, HTML e catalogazione in rete. Sono un sostenitore del W3C, dei suoi standard e del suo "vedere lontano". A questo proposito ho prodotto vari manualini di tecnica e standard Web, tra cui una guida all’HTML e qualche traduzione di documenti del W3C stesso. Nel mio lavoro sono sempre stato sensibile alle problematiche dell'accessibilità e dell'usabilità del Web e sono entrato nel WCAG WG (Web Content Accessibility Guidelines Working Group), l'organismo del W3C che sta rivedendo le linee guida internazionali per l'accessibilità dei siti Web. Ho promosso il “Progetto CABI”,  della Biblioteca Nazionale Marciana, iniziato con la “Campagna per l’Accessibilità delle Biblioteche in rete” (http://marciana.venezia.sbn.it/CABI/), progetto che si è rivelato fruttuoso per la sensibilizzazione verso l’accessibilità del Web culturale e pubblico. Partecipo al Gruppo di Lavoro del progetto europeo “Minerva” che ha prodotto il “Manuale per la qualità dei siti Web pubblici culturali,   Criteri, linee guida e Raccomandazioni”  (http://www.minervaeurope.org/publications/qualitycriteria.htm), presentato a Parma il 21 novembre 2003. Sono membro IWA-HWG e mantengo altri interessi semiletterari e meno virtuali.

Commenti

Nessun commento

    Rispondi

    Link e informazioni