In fase di studio del layout di un sito bisogna considerare la struttura a blocchi dei siti responsive: non è possibile incastrare le componenti senza allineamenti e bisogna evitare di creare strutture a tetris, come in immagine, che potrebbero anche essere impossibili con tecnologie HTML e non possono essere facilmente adattate ai dispositivi mobili.

Durante lo studio e la progettazione di un sito responsive bisogna sempre tenere conto che gli oggetti dovranno essere visualizzati anche sui dispositivi mobili come gli smartphone e monitor molto grandi come i monitor molto grandi quindi nel disegno di un sito non si può pensare di inserire un oggetto statico ma bisogna sempre pensare alla sua rappresentazione grafica sui diversi dispositivi, allo stesso tempo bisogna cercare di non limitare troppo il “canale” internet, trovare un compromesso è possibile usando il box-modeling e lo studio degli elementi flessibili, in questo articolo sarà introdotto il primo concetto mentre il secondo sarà introdotto in futuri articoli.

Il concetto di box-modeling è uno dei punti più importanti dei fogli di stile CSS e ogni designer deve conoscere molto bene questi concetti: fin dalla prima versione dell’HTML e dei CSS ogni programmatore è sempre afflitto da dove e come posizionare gli oggetti HTML rispetto agli altri, infatti per box-modeling si intende definire le posizioni e le distanze tra i vari oggetti usando le varie proprietà di altezza, larghezza, margine, bordi e padding. Fin dalla versione 2 di CSS si è definito uno standard sui box e non è variata molto nella versione 3: ogni elemento ha un margine, un bordo, un padding, larghezza e altezza che vengono definite con proprietà specifiche:

le proprietà di larghezza e altezza (width e height) imposta le dimensioni di elementi esclusi padding, margini e bordi che vengono sommati a posteriori. Per rendere CSS più flessibile possibile è possibile modificare l’impostazione della somma delle larghezze usando la proprietà box-sizing che può assumere due valori:

• content-box: il valore di larghezza fa riferimento all’area del contenuto (valore di default)
• border-box: il valore di larghezza fa riferimento al box nella sua interezza, comprendendo anche il padding e il bordo.

Quindi, per esempio:

#divProva{
  width:100px; 
  padding:2px; 
  border: 1px solid black; 
  box-sizing:border-box;
}

la larghezza di 100 pixel comprende anche bordi e padding.

Una delle proprietà più interessanti fin alla prima versione di CSS è la proprietà inline che gestisce la grande differenza che di default si trova tra i tag DIV e SPAN, SPAN infatti ha come valore display mentre per il tag DIV (e molti altri) il valore di default è block. Semplificando i comportamenti della proprietà: un elemento SPAN (o qualsiasi elemento con inline:display) si prenda meno spazio possibile mentre un elemento DIV (o qualsiasi elemento con inline:block) si prende tutto lo spazio disponibile sulla riga a meno che non sia indicata una larghezza con la proprietà width.

Un semplice esempio del diverso comportamento tra queste proprietà e tra i tag DIV vs SPAN:

<span style="background-color:red;">primo span</span>
<span style="background-color:blue;color:white;">secondo span</span>

primo spansecondo span

mentre usando il tag DIV (o il tag P) il risultato è:

<div style="background-color:red;">primo div</div>
<div style="background-color:blue;color:white;">secondo div</div>

Il valore inline ha un grande difetto: non interpreta le proprietà larghezza (width) e altezza (height) ma le assegna in base al contenuto dell’oggetto: se abbiamo un link il cui contenuto occupa 100px in larghezza, anche impostando una larghezza maggiore, lo spazio occupato dall’elemento con inline sarà sempre di 100 pixel, questo problema può risultare scomodo negli elementi grafici dove le aree visibili o cliccabili sono maggiori di quella effettivamente occupata dal testo ma può invece essere sfruttata per evitare che certi tag aumentino le dimensioni senza controllo.

Gli elementi di tipo blocco hanno sempre la proprietà display con valore block. Sono, ad esempio, i paragrafi e tutti i tag di heading (h1, h2, h3, …), questi elementi assumono le dimensioni impostate nel CSS se specificate e, salvo utilizzo della proprietà float, non accettano altri oggetti sulla stessa riga prendendo tutto lo spazio a disposizione. Proprio per questo motivo il tag SPAN è poco usato e la proprietà inline è usata molto di rado, infatti per affiancare più elementi (come blocchi) vengono usati gli elementi fluttuanti che possono gestire le larghezze in maniera nativa.

Con le proprietà flexbox sono state introdotte alcune nuove caratteristiche per creare strutture di layout non lineari come previsto normalmente da CSS, senza i quali al programmatore rimane solo l’uso della proprietà float. Questa è stata pensata per rendere semplice la gestione di elementi interni ad un elemento contenitore e per risolvere le varie problematiche legate alla centratura degli elementi rispetto agli assi verticali e orizzontali. Per usare queste proprietà bisogna tenere conto di due aspetti costruttivi:

• un elemento contenitore che contiene gli elementi flessibili indicato con la proprietà display:flex
• gli elementi flessibili dove non bisogna dedicare nessuna proprietà specifica.

All’elemento padre si deve poi aggiungere la proprietà addizionale per indicare l’allineamento verticale con la proprietà align-items: center;

Agli elementi figli è possibile poi aggiungere delle caratteristiche ulteriore:

• modificare l’allineamento dello specifico elemento con la proprietà align-self
• modificare l’ordine di visualizzazione con la proprietà order

Un esempio pratico è:

<div style="display:flex;align-items: center;">
  <div style="background-color:red;">rosso</div>
  <div style="background-color:yellow;">giallo<br /> a capo</div>
  <div style="background-color:green;text-align:center;">verde</div>
  <div style="background-color:gold;order:-2;">oro con ordine</div>
  <div style="background-color:lightblue;align-self:flex-start;">azzurro</div>
<div>

E il risultato di questo semplice esempio è: