Mais do que nunca a onda do momento são sites responsivos. Aliás, muito mais que uma “onda“, ter um site responsivo, na minha opinião, é questão de obrigação. Mas bem o foco do post não é esse. O foco é que sites responsivos devem ter larguras relativas.
Nos últimos projetos que tive passei um trabalho enorme com elementos que possuem borda, justamente pelo fato de usar larguras relativas (em %). OK, e como faz para descontar aquela borda de 1px de um elemento que tem 50% de largura? É aí que entra uma das propriedades mais legais do CSS3: box-sizing.
Por padrão o box-sizing vem com box-sizing: content-box, o que indica que o tamanho dos elementos são definidos pelo seu conteúdo. Porém, se usarmos box-sizing: border-box a situação muda. Dessa forma o tamanho fica por conta da soma do conteúdo com a borda e o padding. Maravilha, né?!
Para entender melhor, clique aqui e veja uma demonstração.
Há desenvolvedores que já usam essa regra como seletor universal. Tem toda aquela discussão sobre a performance e tal, mas quem quiser usar, fica a dica:
*{ -moz-box-sizing:border-box;- webkit-box-sizing:border-box; box-sizing:border-box; }
Suporte
Aqui vem a motivação de eu escrever esse post. No desenvolvimento do site da Mosh Creative, eu e o @rodrigowillrich peleamos para fazer isso sem usar box-sizing. Porém, depois de muito sofrimento fomos pesquisar sobre o browser support e veio a surpresa.
Por incrível que pareça essa propriedade funciona do IE8 pra cima! Caso você precisa suportar os IE7 e IE6, pode usar esse polyfill. Para o Firefox você ainda deve ser usar o prefixo -moz- e também deve usar -webkit- para versões do iOS4 pra baixo e para o browser do Android 2.3 pra baixo. Mais informações no HTML5Please.
Concluindo, o box-sizing: border-box, assim como a zuera, ele não tem limites!
Deixe um comentário