Scrivere meno codice CSS: più istruzioni su una sola riga

Design di siti Web con HTML e CSS Disegno di siti Web con HTML, CSS e Dynamic HTML.

Il linguaggio CSS è lo standard per la stilizzazione delle pagine Web: non possiamo certo farne a meno e, aprendo un qualsiasi foglio di stile da non creato, possiamo renderci conto di quanto lungo sia il codice, sia pure semplice ed intuitivo da comprendere e ricordare.

Tuttavia, esistono dei sistemi per scrivere meno codice. Una sorta di shortcut se vogliamo, che consentono di scrivere su di una sola riga quel che normalmente scriviamo su almeno 3 o 4 righe.

Ad esempio, stilizziamo il corpo di una pagina applicando uno sfondo:

body
{
    background: #FFFFFF;
    background-image: url(sfondo.gif);
    background-repeat: repeat-x;
    background-position: top;
    background-attachment: fixed;
}

Possiamo scrivere la stessa cosa su di una sola riga:

body
{
    background: #FFFFFF url(sfondo.gif) repeat-x top fixed;
}

risparmiando notevolmente in termini di codice.

Stessa cosa per la formattazione del testo:

p
{
    font-style: normal;
    font-size: 13px;
    font-family: verdana;
}

Possiamo scrivere la stessa cosa su di una sola riga:

p
{
    font: normal 13px; verdana;
}

In fine, possiamo gestire il padding ed il margin di tutti e quattro i lati di un box in un colpo solo. Invece di scrivere:

#box
{
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
}

possiamo scrivere:

#box
{
    padding: 10px 10px 10px 10px;
    margin: 10px 10px 10px 10px;
}

ottenendo lo stesso risultato.

NOTA - i quattro valori rappresentano, rispettivamente: top, right, bottom e left del box.