Why you shouldn't use CSS selector bugs

Feb 12, 2004

There are a lot of CSS hacks and tricks going around these days that take advantage of CSS selector bugs, especially when it comes to older browsers like MSIE 6.0.x

A couple of the more obvious ones are using attribute selectors, which MSIE doesn't support, or underscores in front of properties which fool IE but can be interpreted by other, newer browsers.

All of this is well and good, for now.

However, if your design hinges on one of these bugs, what do you think will happen when MS releases it's updated browser in 2005? (or whenever they decide to get off their asses). It entirely possible that this incorrectly formatted CSS could cause unpredictable results.

Suddenly, all of these hacks might be useless and require updated hacks to function. It might start with one email from a concerned customer using Longhorn, that they can't see some text, or such-and-such form is obscured.

And unless you get Longhorn yourself, how will you find out how to fix it?

The best way is to use hacks which validate, and use the normal set of tools we have now. The tools which will be supported for many years to come without the danger of becoming "fixed" or obsolete.

"Fixing" a layout by use of a selector bug is asking for trouble in the future. There are many ways around this sort of thing though.

1) Use simple CSS.
- If something just doesn't want to look the way you want it to consider displaying it in a different way, one that uses less CSS. As an added bonus, it'll be easier to edit if you come back to it later.

2) Try different properties.
- If you're having trouble with the float property, consider using the position property instead, and vise versa. Sometimes what breaks in one situation, will totally surprise you by working in another.

3) Serve different stylesheets.
- As a last resort, you can set up a simple PHP snippet to serve different stylesheets depending on the USER_AGENT string. If MSIE is your main target for altered styles, just set MSIE versions 6 or less to the hacked stylesheet, and anything else to the normal one. This way, when MS releases it's next version of IE, it'll have a nice validating stylesheet to munch on.

htmlentities() bites the dust And the last link goes up!

Comments closed