CSS  »  Articoli  »  CSS Template e layout 

Nel post Layout elastico dalla A alla Z pubblicato sul nostro blog abbiamo citato diverse risorse dedicate a questo tipo di layout. Si tratta di una tipologia nota da tempo, già trattata anche nella Guida ai layout con i CSS.

Abbiamo però ritenuto che fosse un argomento degno di approfondimento: vedremo nell'articolo i concetti che stanno alla base del layout elastico (prima parte) insieme a molte soluzioni implementative (seconda parte, per la quale vi rimando alla prossima settimana). Cominciamo subito.

Capire gli em

Uno degli aspetti fondamentali del layout elastico è il dimensionamento in em. È pertanto indispensabile la comprensione degli em per sviluppare siti elastici. Un em, nella tipografia tradizionale, corrisponde alla larghezza della lettera m minuscola. Per i CSS c'è da dire innanzitutto che gli em sono un'unità di misura relativa attraverso la quale è possibile specificare il font-size di un elemento e/o le sue dimensioni.

Per quanto riguarda il font-size, un valore specificato in em funge sostanzialmente da fattore moltiplicativo. Nel seguente esempio

il font-size del body è di 10px e stabilisce la misura di base del font dell'intero documento. Il titolo h1, che è ovviamente parte del body, avrà un font-size che è tre volte quello del suo contenitore. Se il titolo h1 del documento associato, com'è presumibile che sia, non ha altri "genitori" con un font-size specificato, si risalirà fino al font-size del body: il font-size del titolo sarà quindi tre volte 10px, ovvero 30px.

Il discorso è un po' più sottile per ciò che riguarda il dimensionamento relativo: in questo caso bisognerà tener presente che la dimensione del font di default dei browser (o con carattere medio impostato nel browser se si tratta di IE) è di 16 pixel.

Le due misure del font di base per il body più diffuse sono 76% e 100.01% (la scelta di tali valori è ben illustrata nell'articolo Creare un CSS di base) a cui corrispondono rispettivamente un font-size di 12px e di 16px. Anche in questo caso gli em introducono un fattore moltiplicativo, basterà tener presente la corrispondenza tra pixel, em e font di base. Ad esempio:

È possibile inoltre specificare dimensioni degli elementi in em: in questo caso basterà tener presente che le dimensioni effettive si ottengono applicando il fattore moltiplicativo del font-size attuale dell'elemento. Ecco un esempio:

Andrà comunque sempre tenuto in considerazione il font-size attuale dell'elemento. Un ulteriore esempio chiarirà il concetto.

Altri articoli

Altre guide

Altre newsletter