¿Por qué Bootstrap 3 cambió a box-sizing: border-box?

98

Estoy migrando mis temas Bootstrap de v2.3.2 a v3.0.0 y una cosa que noté es que muchas dimensiones se calculan de manera diferente, debido a los siguientes estilos en bootstrap.css.

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

¿Alguien puede explicar por qué Bootstrap cambia el tamaño de caja de todos los elementos a border-box? Sospecho que tiene que ver con el nuevo sistema de cuadrícula basado en porcentajes, pero el selector anterior no solo se aplica a los elementos de cuadrícula obviamente.

Parece un poco radical en mi humilde opinión :-)

¿Alguien quiere dar una idea?

css twitter-bootstrap twitter-bootstrap-3 boxsizer Alexander Rechsteiner
fuente
11
Gracias por el fragmento de CSS; es exactamente lo que estaba buscando para aplicar esto a un proyecto que no sea bootstrap. :)
berto
Alguien sabe por qué se necesitan *: antes y *: después?
limscoder
2
@limscoder El *:beforey *:afterson necesarios para también aplicar este modelo de caja a las :beforey :afterpseudo-elementos.
buschtoens
1
El selector * hace que sea difícil para los desarrolladores usar content-box o padding-box en otros lugares del CSS. La mejor práctica al comenzar un nuevo proyecto desde cero es html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }
Jarek Przygódzki

Respuestas:

102

Las notas de la versión le dicen: ( http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/ )

Mejor modelo de caja por defecto. Todo en Bootstrap tiene un tamaño de caja: cuadro de borde, lo que facilita las opciones de tamaño y un sistema de cuadrícula mejorado.

Personalmente, creo que la mayoría de los beneficios van al sistema de red. En Bootstrap de Twitter, todas las cuadrículas son fluidas. Las columnas se definen como porcentaje del ancho total. Pero el canalón tiene un ancho fijo en píxeles. Por defecto, un relleno de 15px a ambos lados de la columna. La combinación de ancho en píxeles y porcentaje puede ser compleja. Con border-boxeste cálculo es fácil porque el border-boxvalor (a diferencia del valor predeterminado del cuadro de contenido) hace que el cuadro renderizado final tenga el ancho declarado y cualquier borde y relleno se corten dentro del cuadro. ( http://css-tricks.com/box-sizing/ )

Lea también: http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Bass Jobsen
fuente
56
Ejemplo simple: intente poner un borde de 1 píxel en un div de ancho del 100%, con content-box. Ahora tienes algo que es 100% + 2 píxeles. Con border-box, no tienes ese problema, todavía está al 100%.
paredes vacías
1
Buena discusión adicional y justificación de la misma en este número .
Yuvilio
1
También vale la pena señalar que se han actualizado las mejores prácticas de implementación del tamaño de caja para no interferir con bibliotecas de terceros. No estoy seguro de si Bootstrap planea actualizarse, pero deberían hacerlo
jbyrd
2
Personalmente, nunca cambié el modelo de caja desde IE6. Eso era lo ÚNICO que IE sabía mejor. Y sí, hoy tienes calc () para sortear esos problemas del 100% más 2 píxeles, pero el camino del samurái SIEMPRE ha sido el cuadro de borde con su borde y relleno incluidos. Así es como el cerebro humano imagina una caja. Me encanta ver esta "nueva tendencia", tengo una bebida de bienvenida para ellos.
dkellner