Gdesign.it :: Come progettare siti web accessibili ed efficaci ::


Home » How To » Skip navigation: in nome dell'accessibilità

Scrivere al meglio i CSS

di Paolo Dodet, 26 Novembre 2004

Versione Stampabile


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é:

Per adesso è tutto, nel prossimo articolo di questa serie vedremo come usare le regole shorthand nei CSS.

^Top

Dai un voto a questo articolo:   HITS: 1507 | VOTI: 4 | MEDIA VOTI: 4.8    

Home:: Html:: Principi:: How To:: Download:: Tips:: Link:: Collabora:: Partners:: News&Updates:: Contatto:: Info

© 2001 - 2006 Giuseppe Di Carlo :: Riproduzione vietata ::

Utenti on line: 4