L’HTML5 e il CSS3 ci hanno portato tante succulente novità, molte delle quali non vorremmo probabilmente più fare a meno. Ricordi la regola @font-face di cui ti ho parlato nell’articolo dedicato al Webfont Kit? Bè, questa è una di quelle! 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…
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.
Nella seconda parte dell’articolo analizzeremo nel dettaglio l’altra novità degna di nota introdotta nel CSS3: il Flexbox. Non perdertela!
