Corsi on-line

CSS Shortcuts per risparmiare codice

Soprattutto quando si è alle prime armi con la formattazione tramite fogli di stile, si tende a creare selettori estremamente ricchi di istruzioni senza sapere che questi possono sortire i medesimi risultati risparmiando sulla digitazione del codice, ciò è possibile grazie a dei comodi shortcuts di cui in questo posto vedremo alcuni esempi interessanti.

Cominciamo con la definizione di un’immagine di sfondo:

#page
 {
 background-image:url(immagini/sfondo.png);
 background-position:top;
 background-repeat:repeat-x;
 background-color:#ffffff;
}

Il codice proposto potrà essere notevolmente accorciato in questo modo:

#page
{
background: #ffffff url(immagini/sfondo.png) repeat-x top;
}

Lo stesso procedimento potrà essere effettuato, per esempio, per la definzione dell’attributo padding:

#container
{
padding-top: 15px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 10px;
}

il codice di esempio corrisponde al shortcut:

#container
{
padding: 15px 10px 15px 10px;
}

Fogli di stile più “leggeri” verranno caricati più velocemente con indubbi vantaggi in fase di navigazione.

Post correlati
I più letti del mese
Tematiche