2004-08-12

My new favourite CSS workaround

2004-08-12 (Thursday, August 12, 2004)

Update

I haven't confirmed it yet, but it appears that IE Win 4.72 behaves much like IE 5 - the simplified Modified Box Model Hack works as expected. It uses the non-standard box model, and parses CSS in a similar way as IE 5. It won't ever be able to read anything IE 5 can't, but isn't blocked by the same things as other version of IE 4. *phew* breathing a huge sigh of relief...

I like having simple CSS. I don't want to have to remember a huge list of hacks. My usual approach is to shield dead browsers from seeing layout CSS, so they can still read the page, maybe even get to see some typography, but I don't trust them with the layout.

I recently discovered, however, that the first method might not work against Internet Explorer 5.5 for Windows (IE 5.5 Win), which uses an incorrect box model. Peter-Paul Koch has an excellent article about the list of hacks he considers "safe". Using his method, I would need to set up a separate layout CSS file intended solely for IE 5.5 Win, and link it to the html file using conditional comments.

The Modified Simplified Box Model Hack (mSBMH)

Recently, however, I have been playing with the "Modified Simplified Box Model Hack" (mSBMH, aka "Tan Hack"), which allows the CSS to feed approriate widths to IE only, with one statement for IE 5 Win (& the non-standard box model), and a correct statement for IE 6 Win and IE 5 Mac. The big caveat to this method is you have to ensure IE6Win is operating in "Standards" mode (see "DocType Switching").

It basically looks like this:


body { /* what I expect, acording to the standards. */
 width: auto;
 padding: 5%;
}
/* here comes the mSBMH */
* html body { /* the first * ensures only IE will read this */
 width: 100%; /* for IE 5 Win */
 w\idth: 90%; /* other IE */
}

Choice of hacks

I'm starting to prefer this method over the use of the child selector, because it means I can leave the basic declaration in a form that is standards-compliant, even omit width declarations, and feed the widths to the only browsers I care about that can't draw a page properly without them (IE 5 & 6 Win - IE Mac is shielded with an @import statement). It also means I can correct for IE 5 Win's box model, which I can't do easily using only the child selector.

On the Other Hand, I could be wrong...

I have to admit, however, that P. Koch has an excellent point that some of these hacks can't be guaranteed to backfire in the future. His list is pretty darn safe, using workarounds that can only be read by the buggy browsers, and never by one that is standards-compliant. Then again, nothing in this world is guaranteed, and I use the tools that make sense to me at the time.

Related Links

No comments: