Anne van Kesteren

CSS hacking

A CSS hack is basically about exploiting one browser bug to solve another. Now a new browser comes out that solves the exploited bugs, but not the other and people start advocating hacking to be stopped. It’s not that simple. Hacks are wrong (forget what I said in Implement CSS 2.1. The reason they are is that using them might prevent further enhancements to a specification. Something that’s invalid now might be a feature in the future.

Arriving at this point in my little rant I realize that the only point in not updating your site to exclude CSS hacks is that the intentention is probably wrong. Let me explain. Updating for Internet Explorer 7 should not be necessary, in theory it fixed its CSS bugs and besides that _height:1% is now ignored, it also supports your nice method of float clearing using generated content. Except that it doesn’t. And there is the real problem. The day a comment before the DOCTYPE no longer triggers quirks mode I certainly hope they fixed all those nasty little buggers, otherwise I have to update quite some content… On the other hand, I heard xopus.nl is already rendered differently while that site uses quirks mode.

Comments

  1. Using zoom:1 still works for the clearing I heard. I will use that from now on probably, whenever I put Internet Explorer in standards mode, or follow CSS 2.1, whenever that works.

    Posted by Anne at

  2. Float clearing by specifying overflow:auto or hidden on the outer element works in the latest beta 2 preview of IE7 (it didn't in the first public beta 2 preview).

    IE7 however still does have many, many, many bugs. Still a lot that where already present in IE6 like the broken z-index implementation but also a nice collection of new bugs ;)

    Posted by Tino Zijdel at

  3. I do have to agree here for the most part. I typically clear floats using overflow:auto, as it is so much easier than all these other methods.

    I am not much for hacks myself, partially due to some of your rants I am sure. I tend to use the IE conditional tags to fix up styling in IE. I am not sure if this would be considered a hack, but I would think not.

    Posted by Ethan Poole at

  4. Any of the 'hasLayout' triggers on the parent of your floated blocks will contain your floats within that parent in iExploder 7. That means, you could use min/max-width/height, width, overflow:hidden/auto,... Check our hasLayout bible for more. Oh, and see that acidic float test on the way, some head aches ahead.

    Posted by Philippe at

  5. Web 3.0: semantic CSS!

    Posted by Sjoerd Visscher at

  6. It's a case of use them with caution; it's not something I'd personally do, if I could avoid them using a more clean method that achieved a similar effect. You cannot accurately predict the unknown, future or reliability of such trickery anyway.

    Posted by Robert Wellock at