Workarounds, Filters, and Hacks

Unfortunately, as you deal with CSS you’ll eventually discover differences in the way user agents apply and render CSS rules. These differences can be caused by the user agents’ varying interpretations of, and levels of support for, the CSS standards, as well as rendering problems and bugs. But—luckily for us—they can be addressed using workarounds, filters, and hacks.

If you search the Web for “CSS hacks,” you’ll find numerous sites and articles from as far back as 2001 describing ways to tackle browser-related CSS problems. These problems were discovered once people started attempting to create completely CSS-based web design and layout. Happily, modern browser support for CSS is fairly good, so many of those old-school hacks are no longer needed. Older browsers have fallen into disuse and workarounds for problematic browsers that are still in use are well documented.

All software has bugs. Browsers are no exception to this rule, but some browsers are certainly buggier than others. In the past, some bugs related to browsers’ CSS rendering caused web pages to become unreadable, and in some cases, they even crashed browsers. It’s also true that browsers don’t provide perfect support for CSS—a fact that’s often the cause of much frustration. Of course, the situation was far worse in the past, when levels of support could differ wildly.

Workarounds, Filters, and Hacks Defined

Once CSS-based layout and design became popular, web designers and developers needed a way to supply different CSS rules to different browsers—a capability that’s absent from CSS. A hack has typically been regarded as a temporary, inelegant, or unadvised solution to a problem. But in CSS terms, applying a hack generally means exploiting incorrect or buggy CSS features in order to target or exclude a browser, or group of browsers, so that alternative styling may be applied to them.

Other techniques—often called workarounds or filters—include targeting the proprietary features of a specific browser, or employing advanced CSS features to exclude older browsers that don’t support the newer features. If all this jargon’s getting a bit much for you, just remember that workarounds are CSS-oriented solutions to these problems, while filters and hacks are browser-oriented solutions.

The Problem with Workarounds, Filters, and Hacks

While it’s often tempting to leap in and apply a complicated hack to force a particular browser to behave, a more careful approach is needed to address CSS problems efficiently. First, you need to make sure that the problem you’re addressing is a real CSS problem—not just the result of incorrect CSS code or an incomplete understanding of CSS. If your web page looks as you intended in one browser but not another, you may be tempted to think that the browser that’s not displaying your site properly has a CSS bug, but of course the exact opposite is equally likely.

Consider, for instance, the fact that different browsers apply varying default margin and padding values to HTML elements like headings and list items. You’ll often see sites on which CSS hacks are used to apply particular rules to different browsers simply because the designers weren’t aware of the variations in these values. The use of CSS hacks in these kinds of situations is redundant; simply spending a few minutes to gain an understanding of the margin and padding rules would negate the need to apply hacks.

If you’re sure that you have a valid CSS rendering problem, and you’re tempted to use a hack, first see whether a change of design could enable you to avoid the issue altogether. If you can design layouts that don’t depend on problematic CSS features, in most cases you won’t need hacks at all.

The Internet Explorer 5 box model problem is a famous example of the unnecessary use of hacks. Many complicated hacks were developed to solve this problem, but with a simple design change—the addition of padding to the parent of an element with a fixed width, instead of to the element itself—designers could have avoided the problem altogether.1 This approach wasn’t possible in every case, but the option was there.

Avoiding Implementation Pitfalls

If you find yourself in a position where you have no choice but to use a workaround, filter, or hack, be aware of the dangers involved. Your chosen hack may be unreliable—in the future, it may actually cause more problems than would have resulted had you not used it at all. As newer browser versions are produced, new features are implemented, and bugs are fixed, the hack mechanism you’ve been using may cease to work. Also consider the maintenance issues that can arise when many hacks are spread throughout a style sheet.

In reality, the only completely safe way to use a browser hack is to target dead browsers—those browsers that are no longer in development, like Internet Explorer 6—and target them in such a way that you can be sure the hacks you’re using will continue to work in that browser.

Don’t apply hacks to newer browsers, such as Firefox 2, and Opera 9—they’re updated regularly, and new features and bug fixes are addressed relatively quickly. It’s just not safe to use a hack for these newer browsers, and usually they don’t need it anyway—even if they do need adjustment, a change of design will often accommodate any deficiencies you find. Finally, whenever you use a hack, you face the difficulty of finding one that will work on just the browser you’re targeting without affecting all the others. Let us tell you now: in the end, it’s a fruitless pursuit. That’s why the modern approach is to attempt to shun hacks altogether.

Using conditional comments is now the recommended way to target various versions of Internet Explorer; a number of workaround techniques that don’t rely on ugly hacks are also available. Finally, we’ve included a list of popular CSS hacks here, not because they’re recommended, but in case you come across them and need to understand what they attempt to achieve.

Footnotes

1 This fact was documented in Dave Shea’s CSS best practice crib sheet.

User-contributed notes

ID:
#1
Contributed:
by achtungbaby
Date:
Thu, 06 Dec 2007 06:36:33 GMT

"Don’t apply hacks to newer browsers, such as Internet Explorer 7, Firefox 2, and Opera 9—they’re updated regularly, and new features and bug fixes are addressed relatively quickly."

IE7 will *not* be updated regularly. In fact IE7 falls short of supporting the most updated CSS specification from the w3c; however, instead of patching IE7, Microsoft will almost certainly pass that responsibility onto IE8.

Related Products