CSS Filters and Hacks

Because of the generally crappy CSS standards support in modern browsers, a number of techniques have been developed to hide CSS stylesheets, rules, and declarations from browsers that won't understand or will mis-interpret them, or to set different values to the same CSS property in different browsers in order to acheive the same appearance on all (or most) browsers. On these pages, I've collected a number of these techniques (usually called filters or hacks) and documented what browsers they work on.

CSS filtering using CSS only

Keeping CSS Filters confined to stylesheets keeps HTML code cleaner, requires fewer files and is easier to maintain. But targetting specific browsers sometimes requires several filters and the resulting CSS code can be difficult to read unless well commented.

CSS filtering using (X)HTML

Using HTML methods to hide CSS requires less code and can target specific browsers easier than using CSS alone. However, there is probably more need for maintenance and more .css files to manage.

CSS filtering using Javascript

Using Javascript to deliver, modify, or hide CSS was more popular in the past but there may still be some circumstances when it could be the preferred method. The biggest argument against these techniques is that they rely on the user having a Javascript-capable browser and that Javascript support is enabled.

Non-validating Hacks

Hacks that don't validate should be avoided because future browsers can't be assumed to react predictably towards them. However, I've tested a number of the more popular non-validating hacks and have offered valid alternatives if they exist.

A Note On Validation

The W3C validator may reject code that appears to follow the letter of the emerging CSS3 standards. In such cases, I've assumed that the filter is valid CSS. In the summary tables, the background color of the CSS Version column indicates whether each filter passes the W3 validator or not (green = validates; red = doesn't) so that you can stick to filters that have been given this official seal of approval (I've removed all the obviously non-valid hacks to their own section).

Related Material

Recent Updates

Mar 10, 2004

Brothercake sent in a complete set of Konqueror 2.2 results.

Mar 8, 2004

liorean provided a complete set of MSN for OSX and OmniWeb 5.0 results. He also fixed the <link> with data: protocol url test so that it works (as it should) in Opera 7.2+.

Mar 6, 2004

Some new hacks tested:

Mar 6, 2004

Added Safari 1.2 results (finally).

Mar 1, 2004

Added Opera 7.5 results (note that this browser is still in beta).