Scrivere al meglio i CSS
di Paolo Dodet, 26 Novembre 2004
Inizio con questo articolo una mini serie che vuole mostrare come sia possibile ottimizzare e sfruttare al meglio i fogli di stile CSS nella realizzazione di pagine e siti web. Evidentemente, per comprendere al meglio l'argomento che tratterò, non è necessario essere degli esperti, ma sarebbe preferibile avere almeno una conoscenza di base del linguaggio HTML e delle regole dei fogli di stile.
Quando ho cominciato a sviluppare con i CSS, uno dei problemi con cui mi sono scontrato è stato quello di riuscire ad ottenere una renderizzazione uniforme delle pagine HTML nei diversi browser e nei diversi sistemi operativi. A quei tempi utilizzavo Microsoft Windows come sistema operativo, oggi sono passato a Linux, ma la mia visione del problema non è affatto cambiata, visto che l'utenza a cui mi rivolgo usa sostanzialmente Windows.
I vari browser hanno un proprio valore di default per il padding ed
il margin di ogni elemento HTML che compone la pagina. Questo
significa che, se
non specifichiamo nel CSS i valori di margin e padding degli
elementi HTML, ogni browser "farà di testa sua" ed inevitabilmente
le pagine web verranno renderizzate in maniera differente in ciascun browser.
Tutto
ciò, almeno all'inizio, mi disturbava non poco.
Poi, in un esperimento che stavo facendo, ho settato tutto a zero ed ho
cominciato ad aumentare progressivamente il padding ed il margin dei vari
elementi HTML, via via che sviluppavo il sito e man mano che ne avevo bisogno.
In questo modo ho svelato il mistero che per me avvolgeva certi comportamenti,
fino a quel momento, "strani" dei fogli di stile CSS.
Adesso, quando sviluppo una pagina HTML, comincio quasi sempre in questo modo:
body { /* Queste sono le regole generali del corpo della pagina
*/
font-family:valore;
font-size:100%;
color:valore;
background:valore;
margin:0;
padding:0;
}
h1, h2, h3, h4, h5, h6 { /* Queste sono le regole generali degli titoli
*/
font-family:valore;
font-weight:valore;
margin:0;
padding:0;
}
h1 { /* Qui cominciano le regole di ogni titolo, normalmente le dimensioni
*/
font-size:valore;
}
h2 {
font-size:valore;
}
h3 {
font-size:valore;
}
h4 {
font-size:valore;
}
h5 {
font-size:valore;
}
h6 {
font-size:valore;
}
p { /* Le regole del paragrafo */
font-family:valore;
font-size:100%;
font-weight:400;
color:valore;
background:valore;
margin:0;
padding:0;
}
a { /* Le regole per stilizzare i collegamenti */
color:valore;
background:valore;
text-decoration:valore;
}
a:visited {
color:valore;
background:valore;
text-decoration:valore;
}
a:hover {
color:valore;
background:valore;
text-decoration:valore;
}
ul { /* Le regole per le liste non ordinate */
list-style-position:outside;
list-style-image:url(../immagini/nomedellimmagine.png);
margin:0;
padding:0;
}
ol { /* Le regole per le liste ordinate */
list-style-position:outside;
list-style-type:upper-roman;
margin:0;
padding:0;
}
Queste sono, a mio parere, le regole minime da impostare in un foglio di stile CSS; è chiaro che poi si procederà la personalizzazione del CSS a seconda delle esigenze del sito che stiamo realizzando.
Dopo aver sviluppato per Internet Explorer (5.0, 5.5 e 6.0), per Firebird prima e Firefox poi, e per Opera 7.x su Windows, sono passato a Firefox, Konqueror e Opera su Linux. Quindi ho avuto modo di sperimentare e testare su una vasta gamma di browser le varie soluzioni CSS, di inventarne di nuove e di adattare alle mie necessità quelle inventate da altri.
Ad ogni modo sono sempre dell'idea che il miglior modo di realizzare un sito è, dopo la progettazione del tutto, quello di usare Mozilla Firefox come piattaforma principale di sviluppo. Questo perché:
- Firefox supporta molto bene le regole CSS;
- Non ci sono differenze apprezzabili tra la versione per Windows e quella per Linux;
- Una volta ottimizzato per Firefox, il sito sarà facilmente adattabile agli altri browser con correzioni minime.
Per adesso è tutto, nel prossimo articolo di questa serie vedremo come usare le regole shorthand nei CSS.
