Fogli di stile CSS
CSS (Cascading Style Sheets - Fogli di Stile a Cascata) è uno dei linguaggi del W3C. CSS è utilizzato per controllare l´aspetto visuale ed estetico di una pagina web. Il concetto alla base del CCS si può sintetizzare con una nota espressione: separare il contenuto dalla presentazione.
I fogli di stile permettono di definire il layout delle pagine web, come ad esempio:
- margini e indentazioni;
- immagini e colori di sfondo;
- font, dimensioni dei caratteri e colore dei caratteri;
- posizionamento del testo nella pagina (impaginazione);
Requisiti dei CSS
- I CSS devono avere codice valido.
- I contenuti e le funzionalità della pagina devono essere ancora fruibili e mantenere il loro significato d'insieme o la loro corretta struttura semantica anche quando si disabilitano i fogli di stile.
- Tutte le caratteristiche legate all'aspetto si devono trovare solo in fogli di stile esterni
non è ammesso l'uso di stili inline o all'interno della pagina.
- Se i contenuti possono venire stampati, deve essere presente uno stile per la stampa
di norma questo vale per i siti Web e non per le applicazioni.
- Le dimensioni dei font e degli elementi dei campi di input devono essere specificate e devono essere definite con unità di misura relative (em o %)
alcuni browser (es. Internet Explorer 6) non sono in grado di ingrandire correttamente i caratteri o i campi dei moduli se non si utilizzano unità di questo tipo.
- I contenuti si devono adattare alle preferenze dell'utente
si devono poter ingrandire i caratteri o cambiare le dimensioni della finestra del browser senza che ci sia perdita di informazioni; è possibile realizzare pagine elastiche che riempiono cioè tutta la pagina, o pagine ingrandibili, di dimensioni fisse ma che si ingrandiscono con l'aumentare delle dimensioni dei font sui browser
Suggerimenti
- Si consiglia di definire le dimensioni della pagina in em prevedendo una larghezza entro gli 800x600 punti. In questo modo l'ingrandimento è garantito in maniera corretta sia su Explorer 6 che Explorer 7.
- I fogli di stile migliorano la stampabilità dei documenti Web. La carta ha proprietà intrinsecamente diverse dallo schermo di un computer. Questa differenza può essere gestita attraverso l´uso dei CSS: con l'istruzione media=print si può definire un foglio di stile che viene usato dal browser solo in stampa, e in questo css formattare i contenuti in modo che la pagina venga stampata al meglio (es. di solito si consiglia di non stampare i menù e le parti fisse del sito, ma solo il contenuto; eventualmente sostituire il logo in testata con un logo più adatto ad essere stampato).
- Occorre evitare la generazione di inutili stili e classi css. Il CSS va utilizzato nel modo corretto, evitando di aumentare la complessità e le dimensioni dei files.
Esempi
Codice CSS per definire le dimensioni di una pagina entro gli 800x600:
body, td, th{
font-size:62.5%;
}
body{
margin:0 auto;
width:76em;
}
Codice CSS per nascondere i contenuti:
.skip
{
position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
}
Verifiche sui fogli di stile
Tutte le verifiche possono essere fatte con la
barra dell'accessibilità (versione 2.0), controllando:
-
Codice CSS (per pagine on-line): Controlla> Validatore CSS del W3C > Valida il CSS
-
Semantica ed equivalenza di contenuti o funzioni: CSS > Disabilita il CSS
la pagina deve essere ugualmente comprensibile, ciò che è titolo deve ad esempio averne l'aspetto anche con gli stili disabilitati
-
Fogli di stile esterni: CSS > Disabilita gli stili inline
la pagina deve mantenere lo stesso aspetto
-
Stile per la stampa: CSS > Visualizza i(l) Fogli(o) di Stile
in aggiunta è consigliato sempre stampare le pagine per verificare la qualità del sito anche su carta (non è necessario che l'aspetto sia il medesimo che a video, solo che il contenuto sia correttamente stampato e l'immagine coerente con le pagine a video)
-
Dimensioni relative dei caratteri: CSS > Visualizza i(l) Fogli(o) di Stile
è necessario controllare gli stili a mano o verificare sperimentalmente se testi e campi dei form effettivamente si ingrandiscono (occorre Internet Explorer 6 o precedenti)
-
Dimensioni della pagina: Ridimensiona > 800x600
occorre anche verificare che su Internet Explorer il carattere sia impostato su grande (Visualizza> Impostazioni > Carattere> Grande) e che a questa risoluzione la pagina sia fruibile senza sovrapposizioni di testi
Linee guida per siti ed applicazioni web della Regione Emilia-Romagna
