Box model hack

 

Box Model Hack?

But what about the Father of all CSS hacks, Tantek Çelik's famous Box Model Hack? I've never actually used it, mainly because I've always felt that the whole sequence of quotes and brackets and backslashes is an eyesore. I do admire it in the abstract, though, because it showed that CSS hacks are possible.
More recently I catch myself wondering if this hack hasn't opened a can of worms that should have remained closed.

Boxtest

Here is a sample div with class "boxtest".
It has 20px border, 30px padding, and 300px width.

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

The total width including borders and padding should be 400px.

20+30+300+30+20 = 400

User agents which misinterpret the CSS1 box model by placing border and padding inside the specified width would result in a total width of only 300px, and a content width of only 200px.

300-20-30-30-20 = 200

The red and blue bars below are there for comparison. This div (including its borders) should be as wide as the blue bar.

Content

Here is a sample div with class "content".
This div is styled almost identically to the "boxtest" div:

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

with one important addition. There is a second style rule, which takes advantage of a CSS parsing bug in IE5/Windows and IE5.5/Windows, to apply a width which is then overriden.

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

This div (including its borders) should also be as wide as the blue bar, even in IE5/Windows and IE5.5/Windows.
In addition, we add one more rule immediately following the above style rule, to help out UAs which support CSS2 selectors and the CSS box model, but have the same parsing bug as IE5.x/Windows mentioned above. I call it the "be nice to Opera 5" rule. And be sure to not leave any space around the '>'.

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

Finally, note that UAs that have the parsing bug illustrated by the "\"}\"" value, could potentially ignore the next rule, so the "be nice to Opera 5" rule serves to help those errant parsers "catch up" with where the style sheet is going.
To demonstrate that UAs' CSS parsing has recovered at this point, I added one more rule immediately after the previous one just to make it clear.

p.ruletest { color: blue }

This paragraph has class="ruletest" and thus should be colored blue. If it is red, then an earlier rule (which should have been overridden by the later one) is improperly taking effect. Note that this last style rule is unnecessary, and is only here for the purpose of illustrating that the above box model hack rules properly clean up after themselves.