JavaScript - - By Simon Willison

Evaluating CSS Hacks

Vincent Garcia reports on a CSS hack for Safari (discovered by Anne Van Kesteren) which provides support for the min-height property by taking advantage of the CSS 2.1 table model. IE/Windows doesn’t support the table model, but treats heights as min-heights anyway. Vincent explains the hack further in his entry.

With any CSS hack, it’s important to evaluate it before use to ensure it makes sense. CSS hacks are a controversial issue in the web development community, with some people arguing that they cause more harm than good while others see them as critical to ensure CSS is viable in the real world. PPK’s column Keep CSS Simple gives good arguments against the use of hacks.

I favour avoiding hacks if at all possible (for example, the box model hack can be avoided by never declaring padding and width on the same element), but when they can’t be avoided it’s important to understand their implications. GoodCSSHack on the css-discuss Wiki gives a good overview of the qualities of a maintainable hack.

In the case of the Safari min-height hack, I’m currently undecided. If I understand it correctly, it isn’t really a hack at all as it takes advantage of behaviour that is documented in the CSS specification. This means that the hack should behave correctly in future browser releases. However, with proper min-height support for Safari on the way it doesn’t really seem worth-while, considering that browser’s tiny market share and the tendency of Safari users to upgrade sooner rather than later.

Still, it’s another tool for the tool box.