Layout elastico

Il layout elastico usa il dimensionamento in em non solo per il testo ma anche per la larghezza degli elementi principali della pagina, cosicchè solo ridimensionando il carattere del browser è possibile agire sulla larghezza della pagina, ottenendo una sorta di effetto “zoom”. Credo che l’idea di un layout elastico sia abbastanza recente, a me è capitato per la prima volta di vederlo presentato su questo sito.

Vediamo brevemente come ottenere un layout elastico. Per prima cosa, si dimensione il font-size del body con una misura relativa di modo che sia possibile ridimensionare il font tramite le opzioni del browser. Una misura percentuale accettabile universalmente è stata suggerita, in un articolo ormai diventato “storico”, da Owen Briggs: Sane css typography ed è 76%. Questa percentuale empirica dice al browser: metti il font-size al 76% della tua misura di default (con un font size del 76% e un carattere medio impostato via browser, il risultato è all’ incirca pari a 12 pixels).

A questo punto si dimensiona il container principale, e le sue eventuali colonne, solo in em, consentendo così, reimpostando le dimensioni del carattere del browser, di avere un effetto zoom. Vediamo il css base di un layout elastico e centrato:

body{
    font-size: 76%;   /*dimensionamento percentuale del font */
    text-align: center;   /*centra in IE 5.x */
    }

div#container{
    width: 60em;   /*dimensionamento in em del container principale */
    margin: 0px auto;   /*centra negli altri browsers*/
    text-align: left;   /*ripristina l’ allineamento*/
    }