Introduzione a HTML 5: il box model

In questa serie di articoli dedicata ad HTML 5 abbiamo già visto i nuovi elementi HTML e i nuovi selettori CSS.

Ora affrontiamo le innovazioni relative al box model, ovvero alla gestione della distribuzione degli elementi nella pagina.

Dalle tabelle alle div

Con l’avvento di XHTML 1 è stato fatto un enorme passo avanti abbandonando la prassi di utilizzare le tabelle per definire il layout della pagina.

Ormai è nozione comune che usare le div e un corretto posizionamento tramite CSS sia la modalità migliore.

Questo ha facilitato tra l’altro l’utilizzo di interessanti tecniche quali AJAX e il ciclo si è autoalimentato.

Traditional Box Model

Il posizionamento e la visualizzazione degli elementi blocco (come ad esempio le div) in XHTML 1 / CSS 2 sono realizzati tramite il traditional box model.

Mai sentito parlare di margin, padding, position, float? Ecco, quelli sono concetti relativi al traditional box model.

Questo sistema può essere usato anche in HTML 5.

Nonostante non si tratti di un concetto nuovo, approfittiamone per fare un ripasso.

HTML

Proseguendo con il codice di esempio che abbiamo usato anche negli articoli precedenti, completiamo il nostro codice HTML e CSS per posizionare correttamente gli elementi.

<body>
  <div id="wrapper">
    <header id="main_header">
      <h1>GiBiLogic</h1>
      <h2>Al centro del web</h2>
    </header>
    <nav id="main_nav">
      <ul>
        <li><a href="#">Azienda</a></li>
        <li><a href="#">Servizi</a></li>
        <li><a href="#">Contatti</a></li>
      </ul>
    </nav>
    <section id="main_section">
    <article>
      <header>
        <hgroup>
          <h1>Titolo del primo articolo</h1>
          <h2>Sottotitolo del primo articolo</h2>
        </hgroup>
        <time datetime="2012-05-06" pubdate>
        pubblicato il 6 Maggio 2012
        </time>
      </header>
      Questo è il primo articolo
      <footer>
        <p>Commenti (0)</p>
      </footer>
    </article>
    <article>
      <header>
        <h1>Titolo del secondo articolo</h1>
      </header>
      Questo è il secondo articolo
      <figure>
        <img src="img/sample.jpg" alt="A sample image" />
        <figcaption>This is just a sample image</figcaption>
      </figure>
      <footer>
        <p>Commenti (0)</p>
      </footer>
    </article>
    </section>
    <aside id="main_aside">
      <blockquote>
        GiBiLogic offre realizzazioni web, hosting, sviluppo su misura
      </blockquote>
      <blockquote>
        Dal 18 al 20 Maggio saremo al J And Beyond 2012
      </blockquote>
    </aside>
    <footer id="main_footer">
      Copyright &copy; 2012 GiBiLogic
    </footer>
  </div>
</body>

Agli elementi principali che costituiscono la struttura della pagina è stato assegnato un id specifico per poterli poi individuare e posizionare.

CSS

Vediamo passo passo il CSS che si applica a questa pagina.

Nota: insieme alle regole di layout, ne inseriremo anche alcune relative alla tipografia e al colore. In questo modo, se volete provare il codice su una pagina web di test, i cambiamenti saranno più evidenti.

* {margin: 0;padding: 0}
header, section, footer,
aside, nav, article,
figure, figcaption, hgroup {display: block}

Queste due regole servono rispettivamente a resettare margin e padding su tutti gli elementi, e a indicare anche ai browser più vecchi che i nuovi elementi HTML 5 vanno trattati come elementi di tipo blocco (come le div).

#wrapper {width: 960px;margin: 15px auto}
#main_header {background: #699d38;border: 1px solid #999999;padding: 20px}
#main_nav {background: #cccccc;padding: 5px 15px}
#main_nav li {display: inline-block;list-style: none;padding: 5px}

Vediamo che succede di interessante.

All’elemento con #wrapper viene assegnato un margine di 15px sopra e sotto, e un margine “auto” a destra e sinistra.

Un margine laterale automatico, applicato a un elemento di tipo blocco, fa si che quell’elemento si centri nella pagina.

Agli elementi #main_header e #main_nav viene applicato un padding, ovvero uno spazio “interno” tra il bordo e il contenuto.

Gli elementi li contenuti nel menu di navigazione vengono visualizzati in modalità inline-block.

In questo modo possiamo assegnare loro una larghezza, ma verranno comunque disposti affiancati.

#main_section {float: left;width: 660px;margin: 20px}
#main_aside {background: #cccccc;float: left;width: 220px;margin: 20px 0;
padding: 20px}

Ora creiamo un layout multicolonna.

La sezione principale viene messa in float: left e impostata a una larghezza specifica.

Anche l’elemento #main_aside è in float: left quindi si affianca a #main_section.

#main_footer {clear: both;text-align: center;padding: 20px;
border-top: 2px solid #999999}

Infine usiamo la proprietà clear: both per azzerare l’effetto del float e riprendere il normale flusso del documento.

In questo modo il footer sarà sempre posizionato al di sotto degli elementi #main_section e #main_aside.

Box-sizing

Tutto quanto riportato qui sopra in merito al traditional box model non cambia rispetto al passato.

Una interessante novità di CSS 3 è invece la proprietà box-sizing.

Normalmente, nel traditional box model, la dimensione (larghezza o altezza) indicata via CSS è quella del contenuto.

Quindi per calcolare l’effettiva dimensione occupata sul video dobbiamo aggiungere padding, border e margin.

Questo comportamento corrisponde al valore di default box-sizing: content-box.

Se invece impostiamo box-sizing a border-box, la dimensione specificata è comprensiva di padding e border.

Flexible Box Model

Insieme all’evoluzione dei nuovi standard HTML 5 e CSS 3 si sta sviluppando anche una nuova idea per la gestione del box model, che potrebbe andare a sostituire la tecnologia esistente.

Si chiama Flexible Box Model e l’affronteremo nel prossimo articolo.

 

css, html, mobile, programmatore, webdesigner