In questo articolo esaminiamo alcuni trucchi per rendere più efficienti i nostri fogli di stile CSS.

1. Scorciatoie per l’elemento font

Spesso per definire lo stile di un testo si fa così:

font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-family: verdana,serif;

Lo stesso effetto si ottiene la scorciatoia:

font: 1em/1.5em bold italic small-caps verdana,serif

Attenzione però: questa versione accorciata funziona solo se vengono specificate entrambe le proprietà font-size e the font-family. Allo stesso modo, se non si indicano espressamente font-weight, font-style, o font-variant, queste assumono il valore predefinito.

2. Due classi insieme

E’ possibile assegnarne più di una classe a ciascun tag HTML. L’importante è che le classi siano separate da uno spazio. Ad esempio:

<p class=“text side”> … </p>

In questo caso al paragrafo vengono assegnate entrambe le classi text e side.

3. Il valore predefinito del bordo

Quando si definisce una regola per i bordi, di solito si indica il colore, lo spessore e lo stile (in qualsiasi ordine). Ad esempio border: 3px solid #000 visualizza un bordo continuo, nero e spesso 3 pixel. In questo esempio il solo valore obbligatorio è lo stile del bordo (solid).
Se si scrive solamente border: solid vengono usati i valori predefiniti, lo spessore sarà quindi medium (circa 4 pixel) e il colore sarà uguale a quello del testo contenuto all’interno del bordo.
Se si ha bisogno proprio di uno di questi stili, allora si può tranquillamente non specificarli all’interno della regola.

4. !important viene ignorato da IE su Windows

Di solito nei CSS le regole specificate per ultime hanno la precedenza. Ma se si usa !important dopo una qualsiasi regola, la regola a cui viene applicato !important ha la precedenza su tutto quello che viene dopo.
Questo vale per tutti i browser, tranne Internet Explorer su piattaforma Windows. Ad esempio:

margin-top: 3.5em !important;
margin-top: 2em

In questo modo, il margine superiore viene settato a 3.5em per tutti i browser, tranne IE che mostra un margine superiore di 2 em. In realtà, questo “problema” non dipende da !important, ma dal processamento di dichiarazioni multiple della stessa proprietà (margin-top) nella stessa regola.
Questo trucco a volte può tornare utile quando si usano i margini relativi (come in questo esempio), dal momento che questi possono visualizzare im maniera diversa la pagina a seconda del browser e della piattaforma.

5. Sostituire immagini

Per visualizzare il testo è sempre preferibile usare codice HTML piuttosto che una o più immagini, perché la pagina viene caricata più velocemente e si hanno dei benefici anche in termini di accessibilità. Se però si ha la necessità di applicare al testo un determinato font che non è installato di default nei sistemi dei nostri lettori, allora bisogna ricorrere ad una immagine.

Diciamo che sei un venditore di computer e vuoi che il tuo sito venga trovato nei motori di ricerca quando le persone cercano “Vendita computer”. Però hai anche deciso di visualizzare questa frase con un carattere che non è molto diffuso. La prima soluzione è questa:

<h1><img src=“computer.gif” alt=“Vendita computer” /></h1>

Formalmente questo codice è corretto, ma i motori di ricerca non daranno molta importanza al testo indicato nel tag alt perché preferiscono sempre il testo vero. Così una buona alternativa è scrivere:

<h1><span>Vendita computer</span></h1>

alternativa che però non usa il font che abbiamo deciso di visualizzare.
Il “problema” si risolve aggiungendo nel nostro foglio di stile questa regola:

h1 {
background: url(computer.gif) no-repeat;
height: 30px;
}h1 span {
position: absolute;
text-indent:-2000px;
}

In questo modo verrà visualizzata l’immagine, mentre il testo sarà posizionato a 2000 pixel a sinistra rispetto allo schermo e quindi non visibile. Attenzione alla proprietà height che deve essere uguale all’altezza dell’immagine da visualizzare.

6. Il box model hack

Questo trucco viene usato per risolvere un problema di visualizzazione quando si usano browser precedenti a IE 6 che invece di sommare, includono la distanza dal bordo e il bordo stesso nella larghezza di un elemento.
Ad esempio, per specificare le dimensioni di un contenitore, si può usare questa regola

#box {
width: 100px;
border: 5px;
padding: 20px;
}

regola che viene applicata a:

<div id=“box”>…</div>

In questo modo in tutti i browser – tranne le versioni di IE precedenti alla 6 – la larghezza complessiva dell’elemento box è di 150 pixel (larghezza di 100px + due bordi da 5px + due distanze dal bordo da 20px ciascuna).
Nelle versioni di IE precedenti alla 6, la larghezza totale è di soli 100 pixel, con le distanze dal bordo e i bordi inclusi nella larghezza. Per ovviare a questo inconveniente si può usare il box model hack, ma la tecnica può confondere non poco il codice. Una semplice alternativa è questa:

#box {
width: 150px;
}#box div {
border: 5px;
padding: 20px;
}

e il nuovo codice HTML sarà:

<div id=“box”>
<div>…</div>
</div>

Con queste regole l’elemento box misurerà sempre 150 pixel, qualsiasi browser venga usato.

7. Centrare un elemento

Se si vuole avere un sito con una larghezza fissa con il contenuto al centro dello schermo, si può usare questo comando:

#content {
width: 700px;
margin: 0 auto;
}

Si può quindi inserire all’interno dell’elemento

<div id=“content”></div>

tutti gli altri elementi del nostro template che così avranno un margine automatico da destra e da sinistra risultando infine al centro dello schermo. Una cosa semplice, se non fosse per le versioni di IE precedenti alla 6 che ignorano questa regola, che perciò va modificata così:

body {
text-align: center;
}#content {
text-align: left;
width: 700px;
margin: 0 auto;
}

La prima regola allinea tutti gli elementi al centro, compreso il testo della nostra pagina. Per evitare questo effetto indesiderato, si può aggiungere text-align: left alla regola che gestisce l’elemento:

<div id=“content”></div>

Alcuni browser hanno problemi nell’applicare la regola margin: 0 auto;, che può essere sostituita con

margin-left:auto;
margin-right:auto;

8. Allineamento verticale con i CSS

L’allineamento in verticale degli elementi contenuti nelle celle di una tabella è problematico. Se vogliamo visualizzare del testo in mezzo ad una cella e usiamo vertical-align: middle, non funziona: il testo viene posizionato sempre in alto nella cella. La soluzione consiste nello specificare l’interlinea uguale all’altezza della cella, quindi se la cella ha un’altezza di 2em, basterà inserire nel CSS questa regola:

.cella {
line-height: 2em;
}

9. Posizionamento all’interno di un contenitore

Con i CSS è possibile posizionare gli oggetti nel documento in maniera assoluta, ed è possibile anche posizionare uno o più oggetti all’interno di un altro oggetto-contenitore. Per farlo basta assegnare ad un contenitore (di solito un div) questa regola:

#contenitore {

position: relative;
}

Ora tutti gli elementi all’interno di questo contenitoresaranno posizionati in maniera relativa ad esso. Quindi avendo una struttura HTML del genere:

<div id=“contenitore”>

<div id=“menu”>…</div>
</div>

possiamo posizionare il menu a 30 pixel esatti da sinistra e a 5 pixel dal margine superiore del contenitore, usando queste regole:

#menu {

position: absolute;
left: 30px;
top: 5px;
}

10. Colore di sfondo fino alla fine dello schermo

Uno degli svantaggi dei CSS rispetto ai layout basati su tabelle è la difficoltà a gestire l’altezza delle colonne. Facciamo un esempio: abbiamo una pagina con sfondo bianco ed un layout a due colonne (una a sinistra per il menu e una a destra, più larga, per il contenuto). Vogliamo che la colonna con il menu abbia lo sfondo blu. Possiamo assegnare una regola nel nostro foglio di stile:

#menu{

background: blue;
width: 150px;
}

Il problema ora è che il menu non ha un’altezza che gli permette di toccare la fine della pagina, e così lo sfondo blu. Ad un certo punto il menu finisce, non ha la stessa altezza della colonna di destra.
Sfortunatamente l’unica soluzione è quella di “imbrogliare”, assegnando al body del documento un’immagine che abbia esattamente lo stesso colore e la stessa larghezza della colonna di sinistra e che simuli la divisione in colonne.

body {

background: url(sfondo-blu.gif) 0 0 repeat-y;
}

L’immagine sfondo-blu.gif ovviamente deve essere larga esattamente 150 pixel ed avere lo stesso colore dello sfondo del menu. Lo svantaggio di questo sistema è che non si possono specificare le dimensioni del testo in em, cioè di non permettere all’utente di ingrandire o ridurre le dimensioni dei caratteri.