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.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Philippe

    Just a quick note; it has some not-so-nice side effects in IE mac. I know, dead browser and so on, See my post for more, and a test file.

  • http://www.vinniegarcia.com/ vgarcia

    My definition of a CSS hack is probably a very loose definition. I consider anything that relies on flaws in a browser’s CSS parser as a hack, like the Simplified Box Model hack for IE5/Win. Anything that is unsupported in a particular browser (like direct > child selectors) I consider fair game as long as you know what you’re doing. That said, I favor as little hackery as possible in my designs, because it tends to become a slippery slope. You add a hack for browser #1, then you may need another for browser #2, or perhaps for a different version of browser #1. I may end up with an extra

    or two in my HTML code, but I find it easier than trying to figure out what hack does what in my CSS file.

    On the topic of this discovery, I’m not sure I’d use it since it breaks IE5/Mac. Dave Hyatt, a Safari developer, has already included support for min-height as of the next version of Safari I believe, so I see this having a very short shelf life in the designer’s toolbox. Still, it’s probably good that people understand the CSS 2.1 table model :).