Por que o Bootstrap 3 mudou para box-sizing: border-box?

98

Estou migrando meus temas do Bootstrap de v2.3.2 para v3.0.0 e uma coisa que percebi é que muitas dimensões são calculadas de maneira diferente, devido aos seguintes estilos em bootstrap.css.

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

Alguém pode explicar por que o Bootstrap muda o tamanho da caixa de todos os elementos para a caixa de borda? Suspeito que tenha a ver com o novo sistema de grade ser baseado em porcentagem, mas o seletor acima não se aplica apenas aos elementos da grade, obviamente.

Parece um pouco radical imho :-)

Alguém se importa em dar algumas dicas?

css twitter-bootstrap twitter-bootstrap-3 boxsizer Alexander Rechsteiner
fonte
11
Obrigado pelo snippet CSS; é exatamente o que eu estava procurando para aplicar isso a um projeto não bootstrap. :)
berto
Alguém sabe por que *: antes e *: depois são necessários?
limscoder
2
@limscoder A *:beforee *:aftersão necessários para também aplicar este modelo de caixa para os :beforee :afterpseudo-elementos.
buschtoens
1
O seletor * torna difícil para os desenvolvedores usarem content-box ou padding-box em outro lugar no CSS. A melhor prática ao iniciar um novo projeto do zero é html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }
Jarek Przygódzki

Respostas:

102

As notas da versão informam: ( http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/ )

Melhor modelo de caixa por padrão. Tudo no Bootstrap tem tamanho de caixa: caixa de borda, tornando as opções de tamanho mais fáceis e um sistema de grade aprimorado.

Pessoalmente, acho que a maioria dos benefícios vai para o sistema de rede. No Bootstrap do Twitter, todas as grades são fluidas. As colunas são definidas como porcentagem da largura total. Mas a calha tem uma largura fixa em pixels. Por padrão, um preenchimento de 15 px em ambos os lados da coluna. A combinação de largura em pixels e porcentagem pode ser complexa. Com border-boxesse cálculo é fácil porque o border-boxvalor (em oposição ao padrão da content-box) torna a caixa renderizada final a largura declarada e qualquer borda e preenchimento cortado dentro da caixa. ( http://css-tricks.com/box-sizing/ )

Leia também: http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Bass Jobsen
fonte
56
Exemplo simples: tente colocar uma borda de 1 pixel em uma div de largura de 100%, com content-box. Agora você tem algo que é 100% + 2 pixels. Com border-box, você não tem esse problema, ainda é 100%.
emptywalls de
1
Boa discussão adicional e justificativa nesta edição .
yuvilio
1
Também vale a pena observar que a prática recomendada de implementação de dimensionamento de caixa foi atualizada para não interferir nas bibliotecas de terceiros. Não tenho certeza se o Bootstrap planeja atualizar, mas eles deveriam: css-tricks.com/…
jbyrd
2
Pessoalmente, nunca mudei o modelo da caixa desde o IE6. Essa era a ÚNICA coisa que o IE conhecia melhor. E sim, hoje você tem calc () para contornar esses problemas de 100% mais 2 pixels, mas o jeito do samurai SEMPRE foi a caixa de borda com sua borda e preenchimento incluídos. É assim que o cérebro humano imagina uma caixa. Amo ver essa "nova tendência", tenho um drink de boas-vindas para eles.
dkellner