Esta é uma tradução autorizada pelo autor Tantek Çelik, do consagrado Box Model Hack.
A estilização CSS desta tradução segue o modelo do original. Obrigado Tantek.
O original em inglês encontra-se publicado em https://tantek.com/CSS/Examples/boxmodelhack.html

Box Model Hack

Publicado em: 10/02/2005

Boxtest

Esta é uma div à qual foi atribuida a classe "boxtest".

Esta div foi estilizada com CSS para ter uma borda (border) de 20px, um espaçamento (padding) de 30px e uma largura (width) de 300px.

div.boxtest { 
  border:20px solid;
  padding:30px;
  background: #ffc;
  width:300px;
}

A largura total incluindo as bordas (borders) e o espaçamento (padding) é de 400px.

20+30+300+30+20 = 400

As aplicações de usuários que interpretam de maneira não conforme o modelo das caixas em CSS1 (CSS1 box model) considerando a largura da bordas (border) e dos espaçamentos (padding) embutidas na largura total especificada para o elemento renderizam esta div com largura de 300px e seu conteúdo com 200px.

300-20-30-30-20 = 200

Para efeito de comparações observe as barras nas cores vermelha e azul mostradas abaixo. Esta div (incluidas suas bordas) deve ter a largura igual a da barra azul.

 
 

Conteúdo

Observe agora uma div à qual foi atribuida a classe "contentbox".

Esta div foi estilizada de maneira muito semelhante a div "boxtest" acima:

div.contentbox { 
  border:20px solid;
  padding:30px;
  background: #ffc;
}

mas com uma importante inclusão. Foi adicionada uma segunda regra de estilo que aproveitando um "parsing bug" dos IE5/Windows e IE5.5/Windows, define uma largura (width) para a seguir sobrescrevê-la com outra declaração de largura.

div.contentbox { 
  width:400px; 
  voice-family: "\"}\""; 
  voice-family:inherit;
  width:300px;
}

Esta div (incluida suas bordas) deverá ser também da mesma largura da barra azul mesmo quando vizualizada nos IE5/Windows e IE5.5/Windows.

Para complementar, adicionamos logo a seguir mais uma regra CSS para as aplicações de usuários (UAs) que suportam CSS2 e Box Model, mas apresentam o mesmo "parsing bug" do IE5.x/Windows acima mencionado. Eu denominei esta regra como "seja gentil com o Opera5" ("be nice to Opera 5"). Ah, certifique-se de não deixar espaços em branco ante e após o sinal '>'. 

html>body .contentbox {
  width:300px;
}

Finalmente observar que as aplicações de usuários (UAs) que apresentem o mencionado "parsing bug" ilustrado pelo valor CSS "\"}\"" poderão a princípio ignorar a regra CSS seguinte de modo que a regra "be nice to Opera 5" também aplicar-se-á perfeitamente a estas UAs.

Para demostrar que as "UAs' CSS parsing" agirão neste ponto, adicionei aqui uma regra CSS a mais, para esclarecer a questão.

p.ruletest { color: blue }

A este paragráfo foi atribuida a classe class="ruletest" e em consequência ele deverá ser visualizado na cor azul. Se sua cor for vermelha, isto significa que uma regra anterior (que deveria ter sido sobrescrita pela atual) está tendo efeito indevidamente. Notar que esta última regra CSS (.rulerset) foi aqui inserida com o único propósito de ilustrar como se processam as regras do box model hack.

Adendos

Evite usar o desnecessário prólogo ?xml

20020404 Prerit Bhakta observou que se voce incluir o prólogo ?xml:

<?xml version="1.0"?>

o IE6/Windows usará modo "quirky " para o box model.

Uma vez que o prólogo ?xml é desnecessário, eu recomendo, simplesmente omití-lo.

Valide folha de estilo como arquivo
independente de um tipo de mídia.

20020903 Jonathan Horn observou que o validador "W3C CSS validator" acusa um erro quando a propriedade 'voice-family' é declarada em uma folha de estilos para midia 'screen'.

Conforme eu já escrevi na seção de comentários do site mezzoblue de Dave Shea's, isto ocorre em função de um erro do validador " W3C CSS validator". O validador deveria acusar uma mensagem de advertência (warning) e não um erro (error), toda vez que fosse declarada uma propriedade não suportada pela mídia particular especificada na folha de estilo, e, isto já foi comunicado para o W3C:

Meu conselho: valide sua folha de estilo como um arquivo independente de mídia, de modo que voce saberá se esta usando CSS válido, e depois então, utilize @import com um tipo de mídia especificado, se isso for necessário.

Bidouillage de Boîtes

20020915 Christophe Ducamp gentilmente disponibilizou a tradução para o francês do Box Model Hack.

This web page is licensed under a Creative Commons License.

Conheça os livros do Maujor®

Ir para a página de entrada nos sites dos livros.

topo