CSS  »  Guide  »  Guida Layout dei siti con i CSS 

I layout che stiamo per trattare sono di una complessità maggiore rispetto a quelli visti in precedenza. È importante allora fissare alcuni dettagli sull'uso dei font, dei margini e dei padding degli elementi di una pagina.

È buona norma dare all'utente la possibilità di ridimensionare il testo di una pagina web. Mentre Opera, Mozilla e Safari consentono di personalizzare la dimensione dei caratteri per qualsiasi pagina a prescindere dall'unità di misura scelta per il dimensionamento dei caratteri, Internet Explorer non lo consente per caratteri dimensionati in pixels. Usare quindi una misura relativa è una scelta più attenta verso l'utente. Una scelta che però comporta alcune questioni in fase di progettazione.

Il dimensionamento in em accordato con il dimensionamento relativo dei font consente, come abbiamo visto, un ingrandimento non solo del testo, ma anche della sezione che lo contentiene. Bisogna tener presente in questo caso che un em equivale all'incirca alla larghezza di una lettera con un font non proporzionale (detto comunemente monospaced).

Però, scegliere di dimensionare le colonne in pixel e usare al contempo un carattere dimensionato relativamente, comporta test aggiuntivi, quali ad esempio la visualizzazione della pagina modificando la dimensione del font attraverso le opzioni del browser, per verificare che questa renda comunque bene.

Per quanto riguarda margini e padding orizzontali di un elemento, questi dovrebbero essere concordi con l'unità di misura della sua dimensione orizzontale: se per esempio abbiamo dimensionato le colonne laterali in pixel, margini e padding dovrebbero essere espressi in pixel.

Infine, due parole sul padding: come visto nell'introduzione e nel mio articolo "Capire il box model", Internet Explorer 5.x (e Internet Explorer 6 senza un corretto doctype) interpretano erroneamente il padding come parte della dimensione effettiva di un elemento. Finora negli esempi ho sempre cercato di evitare di dimensionare un elemento e specificarne il padding, attribuendo invece dei margini agli elementi in esso contenuti, ma arrivati a questo punto è bene adottare una soluzione che sia più agevole: replicare margini orizzontali per tutti gli elementi contenuti in una colonna decisamente non è una soluzione comoda o snella. È importante, quindi, avvalersi di una tecnica che aggiri queste differenze di interpretazione, e in tal caso il modo più semplice è senz'altro il box model hack semplificato.

Altri articoli

Altre guide

Altre newsletter