Le novità del CSS3: il Box Sizing (prima parte)

L’HTML5 e il CSS3 ci hanno portato tante succulente novità, molte delle quali non vorremmo probabilmente più fare a meno. Se da un lato il primo ha introdotto nuovi tags per una struttura delle pagine web più pulita e ordinata, il supporto in modo nativo dei contenuti multimediali senza bisogno di plugins esterni e molto altro ancora, il CSS dal canto suo ci ha permesso nel corso del tempo un controllo sempre più esteso nella creazione dei web layouts. In quest’articolo, che suddividerò in due parti, tratteremo due delle novità più interessanti introdotte nel CSS3: il Box Sizing e il Flexbox.

Il Box Sizing

Quando impostiamo la larghezza e l’altezza di un elemento, questo potrebbe risultare più grande del previsto, come mai? Semplice. Ciò accade perchè padding e bordi di quell’elemento vengono aggiunti in automatico alla larghezza e altezza da noi specificate. Quindi..

Width = width + padding + bordi
Height = height + padding + bordi

 
Vediamo un esempio pratico.

See the Pen BowGva by Faby (@FabyLeon) on CodePen.


I div hanno le stesse dimensioni, ma il secondo risulta più grande a causa del padding che ho aggiunto. Come posso far si che i due elementi abbiano lo stesso aspetto senza che io debba eliminare il padding nel secondo box? Qui entra in gioco la proprietà box-sizing.

Il valore border-box

See the Pen epemBy by Faby (@FabyLeon) on CodePen.


Come potete vedere adesso i due div hanno esattamente la stessa dimensione, anche se ho lasciato il padding di 50 px nel secondo box. Magia? No, ho semplicemente applicato ad entrambi gli elementi la proprietà box-sizing: border-box;

Quest’ultima ci consente infatti di includere padding e bordi alla dimensione di un elemento, ovvero alla larghezza e altezza da noi specificate. Interessante vero? Per un lungo periodo di tempo i programmatori web hanno dovuto impostare dei valori minori rispetto a quelli realmente voluti, poichè avevano bisogno di sottrarre padding e bordi. Ora questo problema è finalmente risolto, e chi non ritiene che la matematica sia particolarmente divertente potrà finalmente tirare un sospiro di sollievo.

Ho aggiunto la proprietà overflow: auto; nel secondo div solo per evitare che il testo debordasse dal box contenitore. Provate pure a rimuoverla per avere una visione più chiara dei due div. Provate anche a rimuovere la proprietà box-sizing: border-box; dal primo div, e vedrete come il box si ingrandirà leggermente. Questo dipende dal fatto che il bordo andrà a sommarsi automaticamente alla larghezza e altezza da noi specificate.

 
Nella seconda parte dell’articolo analizzeremo nel dettaglio l’altra novità degna di nota introdotta nel CSS3: il Flexbox. Non perdetevela!

Potrebbero interessarti anche...