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*/
    }
9 / 41

Come realizzare un sito table-less