Proprietà scorciatoia ed omissione di valori

Le proprietà scorciatoia (shorthand) dei CSS, ci permettono di risparimiare spazio nei nostri fogli di stile.
In pratica ci permettono di impostare diverse proprietà CSS in un’unica dichiarazione. Questo articolo non vuole essere un tutorial sull’uso di tali proprietà (eventualmente cercare in rete css shorthand properties) bensì ha lo scopo nel metterci in guardia su un errore comune legato al alloro utilizzo.

Prendiamo come esempio questa dichiarazione sul tipo di carattere:

.mioElemento { font:italic small-caps bold 1em/120% "Verdana",sans-serif; }

bene, questa dichiarazione e l’abbreviazione di:

.mioElemento {
    font-style:italic;
    font-variant:small-caps;
    font-weight:bold;
    font-size:1em;
    line-height:120%;
    font-family:"Verdana",sans-serif;
}

fin qui niente di particolare, vediamo ora cosa succede se omettiamo qualcuna di queste proprietà, es:

.mioElemento { font: 1em Verdana, sans-serif; }

in questo caso succede che i bit mancanti vengono riempiti con i valori predefiniti delle proprietà corrispondente, quindi in quest’ultimo caso avremo questo risultato:

.mioElemento {
    font-family: Verdana,sans-serif;
    font-size: 1em;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: normal;
}

attenzione però, questo potrebbe portare a risultati inaspettati vediamo:

div { line-height: 160%; }
.mioElemento { 
    font: 1em Verdana, sans-serif;
}

nell’esempio abbiamo settato la proprietà line-height sull’elemento <div> con un valore del 160%, questo sarebbe sovrascritto dalla seconda regola, in quanto ai <div> con classe .mioElemento sarebbe applicato una proprietà line-height uguale a normal (ricordate che secondo la specificità le classi valgono più degli elementi). Siamo sicuri che è quello che volevamo? In caso contrario avremmo dovuto scrivere:

div { line-height: 160%; }
.mioElemento { 
    font-family: Verdana,sans-serif;
    font-size: 1em;
}

Vediamo un’altro esempio questa volta sulla proprietà background, poniamo che la seguente regole via inserita in un foglio di stile collegato in tutte le pagine del sito:

body { 
    background: #e2e2e2 url(image.png) top right repeat-x fixed;
}

poniamo ora che in una delle nostre pagine vogliamo cambiare l’immagine di background inserendovi una regola incorporata:

body { 
    background: url(new_image.png);
}

attenzione…. questa regola sarebbe come scrivere:

body { 
    background: transparent url(new_image.png) 0 0 repeat scroll;
}

a meno che non sia effettivamente questo il risultato che volevamo, avremmo dovuto scrivere:

body { 
    background-image: url(new_image.png);
}

Ci sono alcune proprietà scorciatoia (margin, padding, border-style, border-width, e border-color) che però si comportano in maniera leggermente diversa, in quanto imposteranno eventuali valori omessi secondo un default derivante dai valori non omessi, vediamo:

    border-color: #eee #ccc #000;
    border-style: solid dotted;
    padding:3px;

equivale a scrivere:

    border-color: #eee #ccc #000 #ccc;
    border-style: solid dotted solid dotted;
    padding:3px 3px 3px 3px;

Tecniche di sovrascrittura

Questo articolo non vuole essere un monito nell’utilizzo delle proprietà scorciatoia, anzi esse sono nella maggior parte dei casi utilissime, ci permettono difatti di risparmiare moltissimo codice e rendono anche più agevole la manutenzione degli stili. Vediamo qualche esempio utile sul loro utilizzo.
Supponiamo che vogliamo applicare degli stili personalizzati sui titoli delle nostre pagine, possiamo prima applicare uno stile comune attraverso una proprietà scorciatoia, quindi effettuare l’impostazione delle dimensioni per ogni elemento:

h1, h2, h3, h4, h5, h6 { font:italic small-caps bold 100%/120% "Verdana",sans-serif; }
h1 {font-size: 200%;}
h2 {font-size: 180%;}
h3 {font-size: 160%;}
/* etc.. */

Come è facile intuire, abbiamo evitato di ripetere più volte il solito codice, migliorando nettamente la sua manutenzione.
Poniamo ora che vogliamo stilizzare i bordi di un nostro contenitore, vogliamo che tutti i bordi siano uguali ad eccetto del bordo inferiore che non deve essere mostrato. In questo caso potremmo lavorare su ogni bordo singolarmente, ma avremmo nella maggior parte dei casi una ridondanza di codice, possiamo invece usare la shorthand property border e sovrascrivere il bordo inferiore successivamente:

.myBox{ 
    border:2px dashed red;
    border-bottom: 0;
}

E’ importante notare che, visto che lavoriamo sempre con regole che hanno lo stesso valore di specificità, le regole specifiche devono essere dichiarate sempre dopo quelle generali.