Arquivo da categoria ‘CSS’

CSS – box-sizing

Publicado: 08/11/2013 em CSS

CSS – box-sizing.

Anúncios

*, *:before, *:after {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

viaCSS: Você deveria usar box-sizing: border-box em todas as suas páginas – sergiolopes.org.

 

Crossbrowser » Internet Explorer box model is not a bug.

CSS Hack para o IE 7 – se alguém precisar | Tableless.

Identificando um layout amador | Blog do Bruno Ávila – Avante!.

Eis o Elemento de Discórdia entre a Microsoft e a W3C:
— O  Box model, e o que eu tenho haver com isso ?
— Tudo ! Trabalho com Web e entender isso evita aborrecimento !

Todo aquele que se atreveu a codificar CSS, já passou por problemas com este “bemdito” modelo de medir caixas no HTML e especialmente o Padding é de todos os ítens do Box Model o mais propenso a causar mal estar para quem codifica Tableless, não chega a ser um mal em sua totalidade, mas, já eliminei de meus códigos o uso deste, e estou satisfeito com essa atitude.

Concordo com a explicação técnica da Microsoft sobre o modelo adotado e tenho certeza que é de fato o mais coerente e você ha de concordar comigo, então imagine  você que compra um terreno 6 x 16m num total de 96 m2, então resolve aproveitar todo o espaço para contruir a casa e por isso mesmo acrescenta um espaço de 1m entre a parede e a casa para dar uma arejada no visual, e utilizou o espaço de 2 de seus vizinho, invadiu a calçada e o muro lá atráz também passou mais 1 metro, está certo que você vai construir a casa com 96 m2, e este espaço em volta eu “não está sendo utilizado”, a verdade é que está sendo utilizado, o espaço em volta não foi comprado e seus vizinhos vão ficar doidos, a prefeitura vai lhe multar, pois, com este espaço em volta do seu imóvel que passará a ter 144 m2 ou seja 50 m2 a mais, e de quem é este modelo doido de medição de caixa, é o modelo adotado pela W3C e CIA (Firefox, Safari, Opera).

Quem geralmente é contra a Microsoft, por vocação, afirma que há um bug no Box Model do Intenet Explorer, diz sem questionar que o certo é o modelo da W3C, mas, eu “discordo quanto a está certo” e “digo que está padronizado assim”, por isso mesmo tenho que conviver com este modelo que acho “uma moléstia”, por outro lado a definição da Microsoft sobre o Box Model, considera que o valor atribuído  a um Box (DIV) inclui os atributos Border e o Padding, isso é o que ocorre no mundo real e portanto o mais fácil de se aceitar e compreender.

Todos concordam quanto a implementação do atributo Margem e por isso mesmo abuso dele, sem medo de ser feliz, mas, o Padding não uso em DIVs por motivo nenhum, uso em parágrafos visto que não suporta largura e altura e por isso mesmo não sofre com este modelo de medida. O Atributo border embora também entre na discórdia, dá para conviver com ele visto que raramente uso um border superior a 1px.

Para resolver isso uso um pouco de Diplomacia de Desenvolvedor, e Ignoro o Padding em DIVs, e vivo sem dores de cabeça desnecessárias, ou seja discordo do modelo da W3C e não posso adotar o modelo da Microsoft, pois desenvolvo para o público e por isso, quero que funcione bem em qualquer navegador, e se você é adepto das técnicas de Tableless, considere esta questão sobre o abandono do padding em DIVs e não precisará fazer hacking para compatibilizar o Internet Explorer com o Firefox, o Chrome, Opera e Safari.

E deixe de estar reclamando do Internet Explorer, ame o que você faz, basta eliminar o  Elemento da Discórdia e a maior parte de seus problemas crossbrowser será resolvida, quanto ao IE6 ignore também, incentive o uso de browsers mais novos.

Create a Button with Hover and Active States using CSS Sprites – Inspect Element.