Traduzione dell’articolo “* { Box-sizing: Border-box } FTW” del blog “Paul Irish I make the www fun.“
Uno dei miei casi preferiti, almeno su layout con i CSS, è il rapporto tra larghezza e padding.
Ti sei occupato di definire le larghezze da abbinare alla tua griglia o proporzioni generali di colonna, poi si inizia ad aggiungere testo, che richiede la definizione di padding per quei box. E’ ecco, ora stai sottraendo pixel dalla vostra larghezza originale in modo che la larghezza non si espanda.
Ugh. Se dico la larghezza è 200px, accidenti accidenti, deve essere 200px, anche se ho 20px di padding.
Quindi, come si sa, questo non è come il modello di box con cui ho lavorato negli ultimi dieci anni.
Wikipedia ha una grande storia di questo modello box. Anche Jeff Kaufman rientra nella storia.
Comunque, ho una raccomandazione per il vostro CSS:
/* apply a natural box layout model to all elements */
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}Questo ti dà il box model che si desidera.
Si applica a tutti gli elementi. Si scopre che molti browser utilizzano già border-box per un sacco di elementi del form (che è il motivo per cui gli input e le textarea guardano diff a width: 100%;)
Ma l’applicazione di questo a tutti gli elementi è sicuro e saggio.
Supporto browser
Grazie al supporto del browser, questa raccomandazione è solo per i progetti che supportano IE8 e superiori. (Browser completo compat a MDN) Firefox ha ancora bisogno del-moz-prefix e < = iOS4, Android <= 2.3 necessario il-webkit-, ma tutti gli altri utilizzi del unprefixed. Potete trovare maggiori informazioni su un polyfill box-sizing per IE6 e 7 a html5please.us / # box-sizing (che è stato sviluppato con * {box-sizing: border-box).
E’ sicuro da usare?
Totalmente. jQuery funziona abbastanza bene insieme (tranne questo). Come detto, il supporto browser è eccellente. E un certo numero di progetti utilizza questo modello di layout di default, tra cui il Web Inspector WebKit (aka Chrome DevTools). Ho sentito il front-end developer olandese Yathura Thorn circa la sua esperienza:
“Stiamo usando * {box-sizing: border-box;} in uno dei miei progetti (ancora in produzione, con una media di oltre 1mln di visite al mese) al lavoro per circa un anno, e sembra che vada bene . Il progetto è stato testato in IE8 e 9 e le latests version di Firefox e Chrome e non abbiamo avuto problemi. Tutti jQuery (+ UI) lo hanno gestito bene, anche in ogni elemento che abbiamo visualizzato come inline-block. Come di recente abbiamo iniziato a sperimentare il progetto su dispositivi mobili (iPhone, iPad e Android) e non abbiamo avuto problemi riguardanti box-sizing con nessuno di loro ancora, così sembra funzionare bene.”
Uno dei miei casi d’uso che il “border-box” risolve egregiamente è l’uso di colonne. Potrei voler dividere la mia griglia con colonne di 50% o 20%, ma si vuole aggiungere padding via px o em.
Senza imminente calcolo di CSS () questo è impossibile … a meno che non si utilizza border-box. Così facile. Una buona cosa è applicare una larghezza 100% e quindi aggiungere un padding a quell’elemento.
Performance
Infine come dice l’inchiesta di @miketaylr, le prove aneddotiche suggeriscono che l’uso di border-box non ritarda il caricamento del sito in modo significativo.
Stessa cosa per quanto riguarda il selettore universale “*”.
È veloce come h1 come selettore. Può essere lento quando si utilizza specificamente “.foo > *”, così non farlo.
A parte questo, ti è permesso di preoccuparti delle prestazioni di “*” solo dopo che hai concatenato tutti i tuoi javascript, caricati in fondo, minimizzato i tuoi css e js, gzip tutti i vostri oggetti, e compresso tutte le vostre immagini senza perdita di qualità. Se non si è preso un punteggio di 90 nello Page Speed, è troppo presto per pensare all’ ottimizzazione del selettore. Vedi anche: CSS Selector performance è cambiato! (In meglio) da Nicole Sullivan.
Quindi … piace e spero che troverete in questo un modello di layout molto più naturale.
Rettifiche per contenuti di terze parti
Tutti i widget di terze parti che aggiungono contenuto direttamente nella pagina possono avere bisogno di attenzione in più. Tutti i widget all’interno di un iframe (come il nuovo tema di Disqus) sono naturalmente isolati dagli stili di layout della pagina del genitore. Se è necessario apportare modifiche al contenuto di terze parti è possibile applicare “box-sizing: content-box”, al widget e ai suoi discendenti. Particolare attenzione ai form che sono border-box di default, quindi dovrete anche tenere conto di questo.
Traduzione dell’articolo “* { Box-sizing: Border-box } FTW” del blog “Paul Irish I make the www fun.“
