Proprietà scorciatoia ed omissione di valori

26 Nov

Out Of Date Warning

Questo post è stato pubblicato più di 2 anni fa (il 26 novembre 2011). Le idee vanno avanti velocemente, le prospettive cambiano quindi i contenuti potrebbero non essere aggiornati. Ti prego di tenere in considerazione questo, e di verificare le informazioni tecniche presenti nell'articolo prima di farne affidamento per i tuoi scopi.

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:

bene, questa dichiarazione e l’abbreviazione di:

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

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:

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

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:


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:

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

attenzione…. questa regola sarebbe come scrivere:

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

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:

equivale a scrivere:

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:

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:

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.

Lascia un commento