Perché Bootstrap 3 è passato a box-sizing: border-box?

Sto migrando i miei temi Bootstrap dalla v2.3.2 alla v3.0.0 e una cosa che ho notato è che molte dimensioni vengono calcolate in modo diverso, a causa dei seguenti stili in bootstrap.css.

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

Qualcuno può spiegare perché Bootstrap cambia il dimensionamento della scatola di tutti gli elementi in border-box? Sospetto che abbia a che fare con il nuovo sistema di griglia basato sulla percentuale, ma il selettore sopra non si applica ovviamente solo agli elementi della griglia.

Sembra un po 'radicale imho :-)

Qualcuno vuole dare un'idea?

— Alexander Rechsteiner
fonte

Grazie per lo snippet CSS; è esattamente quello che stavo cercando per applicarlo a un progetto non bootstrap. :)

— berto

Qualcuno sa perché il *: prima e *: dopo sono necessari?

— limscoder

Il @limscoder *:beforee *:aftersono necessari per applicare anche questo modello casella ai :beforee :afterpseudo-elementi.

— buschtoens

Il selettore * rende difficile per gli sviluppatori utilizzare content-box o padding-box altrove nel CSS. La migliore pratica quando si avvia un nuovo progetto da zero è html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }

— Jarek Przygódzki

102

Le note di rilascio ti dicono: ( http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/ )

Modello box migliore per impostazione predefinita. Tutto in Bootstrap viene ridimensionato in scatola: border-box, che rende più facili le opzioni di dimensionamento e un sistema di griglia migliorato.

Personalmente penso che la maggior parte dei vantaggi vada al sistema di rete. In Bootstrap di Twitter tutte le griglie sono fluide. Le colonne sono definite come percentuale della larghezza totale. Ma la grondaia ha una larghezza fissa in pixel. Per impostazione predefinita, una spaziatura interna di 15px su entrambi i lati della colonna. La combinazione di larghezza in pixel e percentuale potrebbe essere complessa. Con border-boxquesto calcolo è facile perché il border-boxvalore (al contrario del contenuto predefinito della casella) rende il riquadro renderizzato finale della larghezza dichiarata, e qualsiasi bordo e riempimento tagliato all'interno della casella. ( http://css-tricks.com/box-sizing/ )

— Bass Jobsen
fonte

Esempio semplice: prova a inserire un bordo di 1 pixel su un div di larghezza 100%, con content-box. Ora hai qualcosa che è 100% + 2 pixel. Con border-box, non hai quel problema, è ancora al 100%.

— pareti vuote

Buona discussione aggiuntiva e giustificazione in questo numero .

— yuvilio

Vale anche la pena notare che la best practice per l'implementazione del dimensionamento della scatola è stata aggiornata in modo da non interferire con le librerie di terze parti. Non sono sicuro che Bootstrap abbia in programma di aggiornare, ma dovrebbero: css-tricks.com/…

— jbyrd

Personalmente, non ho mai cambiato modello di scatola da IE6. Quella era l'UNICA cosa che IE conosceva meglio. E sì, oggi hai calc () per aggirare quei problemi al 100% più 2 pixel, ma la via del samurai è SEMPRE stata la border-box con il suo bordo e imbottitura inclusi. È così che il cervello umano immagina una scatola. Adoro vedere questa "nuova tendenza", ho un drink di bentornato per loro.

— dkellner