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


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

CSS shorthand

di Paolo Dodet, 25 Gennaio 2005

Versione Stampabile


Riprendo con questo articolo la mini serie sui fogli di stile CSS, che ha lo scopo di mostrare come sia possibile ottimizzarli e sfruttarli al meglio nella realizzazione di pagine e siti web. Come già detto precedentemente, per comprendere al meglio l'argomento, non è necessario essere degli esperti, ma sarebbe preferibile avere almeno una conoscenza di base del linguaggio HTML e delle regole dei fogli di stile.

In questo articolo parlerò di regole shorthand. Cos'è una regola shorthand?
È una regola CSS nella quale la dichiarazione dei valori di tutte le proprietà di un selettore viene raggruppata in una regola unica, da qui il nome di shorthand, che in inglese vuol dire scorciatoia.

Vediamone un esempio:

p {/* Le regole per la proprietà font del selettore "p" */
font-family: Verdana, Tahoma, sans-serif;
font-size: 100%;
font-weight: 400;
line-height: 1.5em;
}
p {/* Lo stesso usando una shorthand */
font: 100%/1.5em Verdana, Tahoma, sans-serif, 400;
}

Le shorthand sono usate per snellire il peso di un foglio di stile. In siti dove qualsiasi bit conta e dove esiste un budget che calcola qualsiasi spesa extra, l'uso degli shorthand è molto diffuso, per ovvie ragioni. Io, per ragioni di "retrocompatibilità", non le uso. Il perché è molto semplice e lo spiegherò con un esempio. Vediamo:

div {
width: 200px;
margin: 10px 20px 30px 40px;
padding: 2px 3px 4px 5px;
}

In questo esempio ho creato un div di 200px di larghezza che ha un margin superiore di 10px, destro di 20px, inferiore di 30px e sinistro di 40px; inoltre possiede un padding superiore di 2px, destro di 3px, inferiore di 4px e sinistro di 5px.

Come potete notare, le misure di ciascun lato sono ordinate in senso orario, per intenderci: superiore, destro, inferiore, sinistro e non sono separate da virgola.

Fin qui tutto bene, direte voi, ma io ho notato che tutto ciò non funziona allo stesso modo sulle versioni di Internet Explorer anteriori alla 6.0. In altre parole, IE5.5 e IE5.0 non supportano queste regole CSS nella stessa maniera della versione 6.0. Anzi, IE5.0 non le supporta proprio! Per fare in modo che i vari IE non facciano di testa loro, la regola precedente deve essere scritta cosí:

div {
width: 200px;
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
padding-top: 2px;
padding-right: 3px;
padding-bottom: 4px;
padding-left: 5px;
}

Sia chiaro che questo vale per il margin, per il padding e per il border i quali soffrono di questa pecca di implementazione nelle diverse versioni di IE.
Vediamo un altro esempio:

div {
width: 200px;
border :solid;
border-width: 1px;
border-color :#000;
}

Ho creato un div con un border solid di 1px di spessore e di colore nero. Ma supponiamo che io voglia che il border sia differente in colore, tipo e spessore nei quattro lati. Che faccio?

div {
width: 200px;
border-top: 1px solid #000;
border-right: 2px double #900;
border-bottom: 3px groove #090;
border-left: 4px dotted #009;
}

In questo modo otterrò quattro bordi differenti in spessore, tipo e colore. Però, come detto prima, per le versioni di IE anteriori alla 6.0 dovrò specificare la dimensione, il tipo ed il colore, separatamente per ogni lato!

Vediamo adesso altre applicazioni delle regole shorthand; per impostare un immagine di background si dovrebbe scrivere:

body {
background-color: #FFF;
background-image: url(fondo.gif);
background-position: top left;
background-repeat: repeat;
}

Ma possiamo scrivere anche cosí:

body {
background: #FFF url(fondo.gif) top left repeat;
}

Un'altra possibile applicazione è la stilizzazione delle liste:

ul {
list-style-type: dot;
list-style-position: outside;
list-style-image: url(dot.gif);
}

Con le shorthand possiamo scrivere così:

ul {
list-style: dot url(dot.gif) outside;
}

Nel caso in cui l'immagine "dot-gif" non sia disponibile verrà usato il dot di default.

In conclusione le regole shorthand sono supportate bene da IE6.0, non molto bene da IE5.5 (nominalmente le supporta tutte, ma in modo molto differente dalle raccomandazioni del W3C) e male da IE5.0 che non supporta le regole relative a border, margin e padding, ma supporta quelle relative alle liste e alle immagini di background.

Le regole shorthand sono una vera comodità per snellire i CSS ma bisogna ricordarsi che la loro l'interpretazione nelle differenti versioni di IE non è sempre conforme alle regole e quindi è sempre necessario testare le pagine per vedere se si comportano nel modo che ci aspettiamo.

Nel prossimo articolo di questa serie vedremo come fare per ottenere una renderizzazione uniforme di una pagina web nelle diverse versioni di IE; parleremo, quindi, di hacks.

^Top

Dai un voto a questo articolo:   HITS: 2258 | VOTI: 4 | MEDIA VOTI: 7.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