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

Ricevo molte domande da persone che, a differenza di me, non sono abbastanza pazze da dedicare migliaia di ore lavoro nello 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 guardo 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.

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, border, border-color, border-style, border sides (border-top, border-right, border-bottom, border-left), border-width, font, list-style, margin, outline, padding.

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 .

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:

• property:value1;
• property:value1 value2;
• property:value1 value2 value3;
• property:value1 value2 value3 value4;

A quali lati del box i valori si riferiscono 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 parte 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 su CSS“.

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:

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

Ma quest’altro modo è molto più efficiente:

1. margin:1em 0 2em 0.5em;

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

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:

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

Un modo più sintetico sta nell’usare la shorthand per la proprietà border:

1. border:1px solid #000;

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

1. 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 medium 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 quest’esempio:

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

l’esempio appena scritto è una shorthand per

1. border-top-width:1px;
2. border-right-width:2px;
3. border-bottom-width:3px;
4. 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:

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

Ecco la shorthand:

1. border:1px solid #000;
2. 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.

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:

1. background-color:#f00;
2. background-image:url(background.gif);
3. background-repeat:no-repeat;
4. background-attachment:fixed;
5. background-position:0 0;

può essere sintetizzato in

1. 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:

1. 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:

1. p {background:#f00 url(image.gif) no-repeat;}
2. 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.

Tipi di carattere

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

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

può essere sintetizzato in

1. 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

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:

1. list-style:none;

invece di

1. 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:

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

è una sintesi per:

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

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

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

sintetizzibile in:

1. 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.

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 le proprietà shorthand nei CSS? Facci sapere.

blog comments powered by Disqus