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

98

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 change le dimensionnement de la boîte de tous les éléments en border-box? Je soupçonne que cela a à voir avec le nouveau système de grille basé sur le pourcentage, mais le sélecteur ci-dessus ne s'applique pas uniquement aux éléments de la grille, évidemment.

Semble un peu radical à mon humble avis :-)

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

css twitter-bootstrap twitter-bootstrap-3 boxsizer Alexander Rechsteiner
la source
11
Merci pour l'extrait CSS; c'est exactement ce que je cherchais pour appliquer cela à un projet non bootstrap. :)
berto
Quelqu'un sait pourquoi les *: avant et *: après sont nécessaires?
limscoder
2
@limscoder Les *:beforeet *:aftersont nécessaires pour appliquer également ce modèle de boîte aux :beforeet :afterpseudo-éléments.
buschtoens
1
Le sélecteur * rend difficile pour les développeurs d'utiliser content-box ou padding-box ailleurs dans le CSS. La meilleure pratique lors du démarrage d'un nouveau projet à partir de zéro est html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }
Jarek Przygódzki

Réponses:

102

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

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

Personnellement, je pense que la plupart des avantages vont au système de réseau. Dans Bootstrap de Twitter, toutes les grilles 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 remplissage de 15px des deux côtés de la colonne. La combinaison de la largeur en pixels et du pourcentage peut être complexe. Avec border-boxce calcul, il est facile car la border-boxvaleur (par opposition à la valeur par défaut de la zone de contenu) fait de la boîte rendue finale la largeur déclarée, et toute bordure et remplissage coupés à l'intérieur de la boîte. ( http://css-tricks.com/box-sizing/ )

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

Bass Jobsen
la source
56
Exemple simple: essayez de placer une bordure de 1 pixel sur un div de largeur 100%, avec content-box. Vous avez maintenant quelque chose de 100% + 2 pixels. Avec border-box, vous n'avez pas ce problème, c'est toujours 100%.
emptywalls
1
Bonne discussion supplémentaire et justification de celui-ci dans ce numéro .
yuvilio le
1
Il convient également de noter que les meilleures pratiques d'implémentation du dimensionnement des boîtes ont été mises à jour afin de ne pas interférer avec les bibliothèques tierces. Je ne sais pas si Bootstrap prévoit de mettre à jour, mais ils devraient: css-tricks.com
...
2
Personnellement, je n'ai jamais changé de modèle de box depuis IE6. C'était la SEULE chose que IE savait mieux. Et oui, aujourd'hui, vous avez calc () pour contourner ces problèmes de 100% plus 2 pixels, mais la voie du samouraï a TOUJOURS été la zone de bordure avec sa bordure et son rembourrage inclus. C'est ainsi que le cerveau humain imagine une boîte. J'adore voir cette "nouvelle tendance", j'ai un verre de bienvenue pour eux.
dkellner