Neste artigo iremos ver a diferença ao usar o box model padrão do CSS e do “box-sizing” do CSS3, ambos no mesmo elemento…
Todo elemento no HTML é como uma caixa, nós controlamos o seu tamanho com “width“, sua borda com “border” e ainda temos as margens externas e internas com “margin” e “padding“.
O box model tradicional da especificação tem uma regra bastante confusa: a propriedade width trata do tamanho do conteúdo do elemento, não considerando seu padding e border, o mesmo coisa se passa com a altura (height). Com o box model padrão do CSS por vezes éramos surpreendidos com resultados não esperados.
Agora com o “box-sizing” que quando configurado com o valor “border-box” num elemento, o espaçamento e fronteira desse elemento deixa de aumentar a sua largura. Ao usarmos esta propriedade do CSS, teremos esse problema resolvido, melhor ainda, ele funciona em todos os navegadores, até no IE8!
Mas voltemos ao box model padrão do CSS, se quisermos que um elemento ocupe metade da página mas com uma borda de 10px, o tradicional “border: 10px solid #555; width:50%“, não vai funcionar. O tamanho final do elemento terá 20px mais metade do tamanho da página, vejamos o exemplo:
border-width:10px; width:50%;
width:50%;
É assim que as coisas funcionam mas não é este o resultado que esperamos. Se pensamos no tamanho de uma caixa, não podemos pensar só no conteúdo dela, pois a caixa só termina em sua borda.
o box-sizing do CSS3
Por padrão, todos os elementos têm o valor “box-sizing:content-box” o que indica que o seu tamanho é definido pelo seu conteúdo apenas, é tal e qual o box model padrão que vimos antes. Mas podemos trocar por “box-sizing:border-box” que indica que o tamanho levará em conta a borda, ou seja, o “width” será a soma do conteúdo com a “borda” e o “padding“.
box-sizing:border-box; border-width:10px; width:50%;
box-sizing:border-box; width:50%;
Usando o novo box-sizing
O suporte nos navegadores é excelente, há um polyfill pra IE6 e IE7 se você precisar. O Firefox ainda precisa do prefixo “-moz-” e versões mais antigas do Chrome, Safari e Android, do “-webkit-“.
Então podemos aplicar o seletor universal “*”, existe quem se preocupe quanto à performance do seletor universal, mas ela certamente não será um problema para algo tão simples e pontual como essa regra (usar compressão, usar sprites, etc, são bem mais importantes).
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
E você costuma usar estas técnicas CSS? Conhece outras formas? Comente!
Um abraço e até já!