{box-sizing: border-box;} we love u!
Forse non tutti sanno che...
Esiste una property CSS veramente bellina che risolve in men che non si dica numerosi problemi di posizionamento degli elementi nella pagina.
Facciamo un esempio:
Once upon a time, four boxes in a line...
Con una width al 25%, entreranno tutte nella solita fila, occupando 1/4 dello spazio disponibile all’interno del loro parent element, ma vediamo che non appena attribuiamo un valore di padding o un border, la larghezza degli elementi non è più del 25%, ma diventa il risultato di una somma del genere:
Larghezza effettiva = width + border-left + border-right + padding-left + padding-right
La matematica può essere antipatica, ma se si cerca di sommare valori in percentuale a valori in pixel, può diventare addirittura impossibile da calcolare a mente, - e poi, se anche aveste voglia di spippolare come dei dannati sui tasti di una calcolatrice, quel che verrebbe fuori sarebbe un numero abbastanza inutile per il lavoro che dovete fare.
Ecco però che ci viene in aiuto la property box-sizing!
Il suo valore di default è content-box, ed è questo che andiamo a sovrascrivere con un altro valore: border-box. Capire il suo funzionamento è piuttosto semplice: è come se padding e border si “pressassero” all’interno dell’elemento invece che espandere la sua width. Il risultato è una box della width esatta che avete impostato (nel nostro esempio, del 25%).
Questa proprietà è particolarmente geniale quando si tratta di colonne, ma sono convinta che vi servirà più spesso di quel che pensiate: una di quelle cose che rendono migliore lo sviluppo CSS.
La soluzione, a mio avviso, intelligente (ma è ovvio che vi convenga valutare in base al tipo di lavoro che vi trovate davanti), è quella di attribuire un box-sizing: border-box a ogni singolo elemento HTML:
E giusto per non farci mancare niente, uno schema del supporto di questa proprietà nei singoli browser:
Legenda (perché è sempre bene essere chiari):
“-“ significa: da questa versione a tutte le versioni precedenti
“+” significa: da questa versione a tutte le versioni successive
[Source & Inspiration: http://www.paulirish.com/2012/box-sizing-border-box-ftw/]
Esiste una property CSS veramente bellina che risolve in men che non si dica numerosi problemi di posizionamento degli elementi nella pagina.
Facciamo un esempio:
Once upon a time, four boxes in a line...
Con una width al 25%, entreranno tutte nella solita fila, occupando 1/4 dello spazio disponibile all’interno del loro parent element, ma vediamo che non appena attribuiamo un valore di padding o un border, la larghezza degli elementi non è più del 25%, ma diventa il risultato di una somma del genere:
Larghezza effettiva = width + border-left + border-right + padding-left + padding-right
La matematica può essere antipatica, ma se si cerca di sommare valori in percentuale a valori in pixel, può diventare addirittura impossibile da calcolare a mente, - e poi, se anche aveste voglia di spippolare come dei dannati sui tasti di una calcolatrice, quel che verrebbe fuori sarebbe un numero abbastanza inutile per il lavoro che dovete fare.
Ecco però che ci viene in aiuto la property box-sizing!
Il suo valore di default è content-box, ed è questo che andiamo a sovrascrivere con un altro valore: border-box. Capire il suo funzionamento è piuttosto semplice: è come se padding e border si “pressassero” all’interno dell’elemento invece che espandere la sua width. Il risultato è una box della width esatta che avete impostato (nel nostro esempio, del 25%).
Questa proprietà è particolarmente geniale quando si tratta di colonne, ma sono convinta che vi servirà più spesso di quel che pensiate: una di quelle cose che rendono migliore lo sviluppo CSS.
La soluzione, a mio avviso, intelligente (ma è ovvio che vi convenga valutare in base al tipo di lavoro che vi trovate davanti), è quella di attribuire un box-sizing: border-box a ogni singolo elemento HTML:
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
E giusto per non farci mancare niente, uno schema del supporto di questa proprietà nei singoli browser:
Legenda (perché è sempre bene essere chiari):
“-“ significa: da questa versione a tutte le versioni precedenti
“+” significa: da questa versione a tutte le versioni successive
*, *:before, *:after {
/* Chrome 9-, Safari 5-, iOS 4.2-, Android 3-, Blackberry 7- */
-webkit-box-sizing: border-box;
/* Firefox (desktop or Android) 28- */
-moz-box-sizing: border-box;
/* Firefox 29+, IE 8+, Chrome 10+, Safari 5.1+, Opera 9.5+, iOS 5+, Opera Mini Anything, Blackberry 10+, Android 4+ */
box-sizing: border-box;
}[Source & Inspiration: http://www.paulirish.com/2012/box-sizing-border-box-ftw/]
Hugs & Pugs
Commenti
Posta un commento