Pourquoi Bootstrap 3 est-il passé à Box-Sizing: border-box?

Je migre mes thèmes Bootstrap de la v2.3.2 vers la v3.0.0 et une chose que j’ai remarquée est que beaucoup de dimensions sont calculées différemment, en raison des styles suivants dans bootstrap.css.

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

Quelqu’un peut-il expliquer pourquoi Bootstrap bascule la taille de boîte de tous les éléments sur border-box? Je suppose que cela est dû au fait que le nouveau système de grid est basé sur le pourcentage, mais le sélecteur ci-dessus ne s’applique évidemment pas uniquement aux éléments de la grid.

Semble un peu imho radical 🙂

Quelqu’un veut-il donner un aperçu?

Les notes de version vous disent: ( http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/ )

Meilleur modèle de boîte par défaut. Tout dans Bootstrap obtient un redimensionnement par boîte: border-box, ce qui facilite les options de dimensionnement et améliore le système de grid.

Personnellement, je pense que la plupart des avantages vont au système de grid. Dans Twitter, toutes les grids sont fluides. Les colonnes sont définies en pourcentage de la largeur totale. Mais la gouttière a une largeur fixe en pixels. Par défaut, un rembourrage de 15px des deux côtés de la colonne. La combinaison de la largeur en pixels et du pourcentage pourrait être complexe. Avec border-box ce calcul est facile car la valeur border-box (par opposition à la boîte de dialog default) fait de la boîte de rendu finale la largeur déclarée et de toute bordure et bourrage coupés à l’intérieur de la boîte. ( http://css-sortingcks.com/box-sizing/ )

Lisez aussi: http://www.paulirish.com/2012/box-sizing-border-box-ftw/