Vai ai contenuti

LAU



Home > realizzare > accessibilità: fogli di stile > CSS efficienti con l'uso delle shorthand


CSS efficienti con l'uso delle shorthand

Tecniche per rendere più efficienti i CSS utlizzando "scorciatoie" per definirne le proprietà

Articolo originale: Efficient CSS with shorthand properties di Roger Johansson

Traduzione a cura di: Vincenzo Mania | 28 aprile 2010


Ricevo molte domande da persone che, a differenza di me, non sono abbastanza pazze da dedicare migliaia di ore lavoro allo sviluppo dei CSS. A volte mi viene chiesto di dare un'occhiata a qualcosa su cui qualcuno sta lavorando per vedere se riesco a capire perché non funziona come previsto. Quando valuto questi CSS spesso trovo che siano pesanti e disorganizzati.

Uno dei motivi per cui si usano i CSS per i layout dei siti è ridurre la quantità di codice HTML inviato ai visitatori del sito. Per evitare di spostare la pesantezza dall'HTML al CSS si dovrebbe cercare di contenere le dimensioni dei file CSS; ho così pensato di spiegare qual è il mio trucco preferito per migliorare l'efficienza dei CSS: usare le proprietà shorthand (letteralmente "stenografia", traducibile in "scorciatoie" - NdT).
Molte persone conoscono e utilizzano alcune shorthand, ma molti non fanno un pieno uso di queste proprietà che permettono di risparmiare spazio.

torna su

Un po' di documentazione

Le proprietà shorthand possono essere utilizzate per impostare diverse proprietà CSS in un'unica dichiarazione, invece di utilizzare una dichiarazione separata per ogni singola proprietà. Come vedremo, questo potrà farvi risparmiare un sacco di spazio nel vostro file CSS. Ci sono poche risorse disponibili sulle proprietà shorthand - per i dettagli vi suggerisco le specifiche CSS del W3C per le proprietà background [link esterno]border [link esterno]border-color [link esterno]border-style [link esterno]border sides [link esterno] (border-top, border-right, border-bottom, border-left),  border-width [link esterno]font [link esterno]list-style [link esterno]margin [link esterno]outline [link esterno]padding [link esterno].

torna su

Colori

Il modo più comune per specificare il colore nei CSS è quello di utilizzare la notazione esadecimale: il cancelletto (#) seguito da sei cifre. Si possono inoltre utilizzare delle parole chiave e anche la notazione RBG, ma io uso sempre quella esadecimale. Un'ottima scorciatoia che molti non conoscono: quando un colore si compone di tre coppie di caratteri esadecimali, è possibile omettere un carattere per ogni coppia. #000000 diventa #000, #336699 diventa #369.

torna su

Dimensione dei box

Le proprietà che riguardano le dimensioni dei box condividono la stessa sintassi, la proprietà shorthand seguita da un numero tra 1 e 4 di valori separati da spazio:

  • proprietà:valore1;
  • proprietà:valore1 valore2;
  • proprietà:valore1 valore2 valore3;
  • proprietà:valore1 valore2 valore3 valore4;
A quali lati del box si riferiscono i valori dipende dal numero di valori specificati. Ecco come funziona:
  • Un valore: i riferisce a tutti i lati
  • Due valori: il primo si riferisce al lato alto e basso, e il secondo al lato destro e sinistro
  • Tre valori: il primo si riferisce al lato alto, il secondo al lato destro e al lato sinistro, il terzo al lato basso
  • Quattro valori: il primo si riferisce al lato alto, il secondo al lato destro, il terzo al lato basso, il quarto al lato sinistro

Un modo semplice per ricordare a quale lato si riferisce ogni valore è pensare al quadrante di un orologio. Il primo valore si riferisce alle ore 12 (lato alto), il secondo alle 3 (lato destro), il terzo alle 6 (lato basso), e il quarto alle 9 (lato sinistro). Potete ben immaginare che problemi potreste avere se non ricordate l'ordine preciso. Ho visto questo trucco nell'eccellente libro di Eric Meyer "Eric Meyer on CSS"[link esterno].

torna su

Margin e padding

Usando le shorthand per queste proprietà si può risparmiare un sacco di spazio. Ad esempio, per specificare margini diversi per tutti i lati di un box si potrebbe scrivere il codice in questo modo:

margin-top:1em;
margin-right:0;
margin-bottom:2em;
margin-left:0.5em;

Ma quest'altro modo è molto più efficiente:

margin:1em 0 2em 0.5em;

La stessa sintassi si può utilizzare per la proprietà padding.

torna su

Bordi

I bordi sono un po' più complicati dal momento che possono anche avere uno stile e un colore. Per attribuire ad un elemento un bordo di un pixel solido nero su tutti i lati, è possibile utilizzare il seguente codice CSS:

border-width:1px;
border-style:solid;
border-color:#000;

Un modo più sintetico sta nell'usare la shorthand per border:

border:1px solid #000;

I valori del bordo vanno sempre specificati in quest'ordine:

border:width style color;

La maggior parte dei browser non si preoccupano dell'ordine in cui vengono specificati i valori, e secondo le specifiche infatti non dovrebbero, ma non vedo perché non usare lo stesso ordine delle specifiche W3C. Ci potrebbe essere sempre la possibilità che qualche browser interpreti in maniera molto rigorosa l'ordine delle shorthand.

La stessa sintassi può essere utilizzata con la shorthand applicata alla proprietà border-top, border-righ, border-bottom e border-left per definire il bordo di ogni singolo lato di un box.
Non è necessario specificare tutti e tre i valori: i valori omessi vengono ricondotti ai loro valori di default. I valori di default sono medium per il width, none per lo style, e il valore dell'elemento della proprietà color è color. Quanto sarà spesso un bordo "medio" dipende dal browser.
Si noti che, poiché il valore di default per style è none, se si desidera che il bordo sia visibile si dovrà specificare un valore per style

Le proprietà border-width, border-style e border-color utilizzate nel precedente esempio sono esse stesse delle shorthand. L'alternativa estesa esiste ma viene usata molto raramente. Consideriamo questo esempio:

border-width:1px 2px 3px 4px;

L'esempio appena scritto è una shorthand per:

border-top-width:1px;
border-right-width:2px;
border-bottom-width:3px;
border-left-width:4px;

Le shorthand per border-style e border-color utilizzano la stessa sintassi di border-width: la sintassi per le dimensioni del box descritta in precedenza. Se si vogliono dare ai bordi di un elemento proprietà differenti su lati differenti, utilizzando le varie shorthand sarà possibile comprimere il codice ed evitare digitazioni ridondanti. Il codice sotto riportato rende il bordo inferiore e destro di un elemento nero, solido e spesso un pixel:

border-right:1px solid #000;
border-bottom:1px solid #000;

Ecco la shorthand:

border:1px solid #000;
border-width:0 1px 1px 0;

Prima si definiscono con uno stile identico tutti i bordi dell'elemento e successivamente si specificano gli spessori che differiscono.

torna su

Sfondi

Un'altra shorthand molto utile riguarda la proprietà background. Invece di usare background-color, background-image, background-repeat, background-attachment e background-position per specificare lo sfondo di un elemento, si può usare solo background. Di conseguenza:

background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;

può essere sintetizzato in:

background:#f00 url(background.gif) no-repeat fixed 0 0;

Come già si è visto per il border, il fatto che qualsiasi ordine dei valori sia accettato dai browser non è così scontato, ho infatti notato che le prime versioni di Safari hanno problemi quando i valori non sono elencati nell'ordine utilizzato nelle specifiche W3C.
L'ordine indicato dal W3C è il seguente:

background:color image repeat attachment position;

Ricordate che quando si danno due valori di position questi devono apparire insieme. Quando si definisce la lunghezza o si utilizzano valori percentuali, è necessario inserire il valore orizzontale per primo.
Come nel caso del border, anche per il background non è necessario specificare tutti i valori: se un valore viene omesso viene utilizzato il suo valore di default. I valori di default per le proprietà del background sono i seguenti:

color: transparent
image: none
repeat: repeat
attachment: scroll
position: 0% 0%

Ciò significa che è inutile usare la shorthand background senza definire un valore sia per color che per image - così facendo si renderebbe lo sfondo trasparente. Io uso quasi sempre la shorthand background per specificare i colori di sfondo degli elementi, dal momento che scrivere background:#f00 è la stessa cosa che scrivere background-color:#f00. Si ricordi che questa regola eliminerà ogni immagine di sfondo specificata da una regola precedente. Considerate queste regole:

p {
background:#f00 url(image.gif) no-repeat;
}


div p {
background:#0f0;
}

Tutti i paragrafi non inseriti all'interno di un div avranno una immagine di sfondo e saranno di colore rosso. Ogni paragrafo che si troverà all'interno di un div avrà invece uno sfondo verde e nessuna immagine di sfondo.

torna su

Tipi di carattere

Come nel caso della proprietà background anche all'interno della proprietà font possono essere sintetizzate diverse proprietà individuali. Quindi:

font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;

può essere sintetizzato in

font:italic small-caps bold 1em/140% "Lucida Grande", sans-serif;

Ancora una volta, riguardo all'ordine dei valori non vedo alcuna ragione per non utilizzare l'ordine dato dal W3C. Prevenire è meglio che curare.
Quando si utilizza la shorthand font è possibile omettere qualsiasi valore tranne il font-size e il font-family - è sempre necessario attribuire dei valori per questi ultimi e in quest'ordine. I valori di default delle proprietà individuali di font sono questi:

font-style : normal
font-variant : normal
font-weight : normal
font-size : medium
line-height : normal
font-family : dipende dal programma utente

torna su

Elenchi

La proprietà shorthand per le liste ordinate e non ordinate è list-style. Personalmente la uso solo per impostare la proprietà list-style-type a none, il che elimina i punti elenco o i numeri dalla lista:

list-style:none;

invece di

list-style-type:none;

Si può anche usare per impostare le proprietà list-style-position e list-style-image, in modo da specificare che le liste non ordinate debbano visualizzare i punti elenco all'interno di ogni voce della lista, utilizzare un'immagine al posto del punto elenco e far visualizzare il pallino (square) qualora l'immagine non sia disponibile.
Le seguenti due regole dovrebbero dare lo stesso risultato:

list-style:square inside url(image.gif);

è una sintesi per:

list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);

torna su

Outline

La proprietà outline (contorno) è usata molto raramente, soprattutto per il suo scarso supporto da parte dei browser - per quanto ne so attualmente solo Safari, OmniWeb e Opera la interpretano.
In ogni caso, utilizzando le proprietà individuali è possibile definire una struttura come questa:

outline-color:#f00;
outline-style:solid;
outline-width:2px;

sintetizzabile in:

outline:#f00 solid 2px;

La proprietà outline ha alcune caratteristiche interessanti che la rendono utile: a differenza di un bordo, un contorno non occupa spazio e viene sempre visualizzato sopra il box corrispondente. Ciò significa che nascondendo o mostrando i contorni non viene causato il riflusso e non viene influenzata la posizione o le dimensioni dell'elemento a cui viene applicato o a qualsiasi altre elemento. Gli outline possono anche non essere rettangolari.

torna su

Risultato: riduzione delle dimensioni dei file e una più facile manutenzione

Quelle presentate sono le proprietà shorthand disponibili nei CSS 2. Se si dovesse prendere il file CSS di un sito piuttosto grande, realizzarne una versione che non utilizza le proprietà shorthand e un'altra versione che invece le utilizza in modo efficace, si vedrebbe una differenza enorme in termini di dimensioni del file. Questa è una ragione importante per l'utilizzo degli shorthand. Un altro motivo che ci dovrebbe spingere all'utilizzo di shorthand è che il file CSS diventa più facile da mantenere - almeno questa è la mia esperienza.

Hai qualche consiglio inerente agli shorthand nei CSS? Facci sapere.

torna su

[ Torna all’inizio della pagina ]



Sito realizzato dal Laboratorio di Accessibilità e Usabilità del CSI-Piemonte - Privacy, cookies e accessibilità

[ Torna all’inizio della pagina ]