What is the consensus on "Voice-family" Hacks?

Question

I just started working for a pretty large company and my group manages all of their public facing websites. I opened the style sheet for the first time today and have seen over 20 instances of the designers using the voice-family hack to fix an IE bug. (I don't know why they allow graphic designers to write any kind of markup at all)

What is the general public opinion of the voice-family hack. Is it worth the time to recommend using IE conditional comments to include custom styles sheets?

Answer 1

My feeling on hacks like this is that you should avoid them if you can. If it is possible to get the correct rendering across browsers without resorting to such shenanigans, then you should do it the right way. However, sometimes browsers have buggy CSS implementations, and it is necessary to use hacks like this.

Answer 2

Don't use conditional includes. Use a CSS selector instead, it is much more elegant. You can target classes at individual browsers (and/or versions):

.myClass { ... }

.ie6 .myClass { ... }

Answer 3

The "voice-family" hack, better known as the Tantek Celik Box Model Hack, is used to hide specific CSS rules from IE4/5 on Windows because of incorrect implementations of the CSS standard in those browsers. It is an attempt to deliver the most correct single stylesheet to all browsers, without resorting to browser sniffing and multiple stylesheets.

Ironically this hack is the result of many man-hours (months?) of experimentation and testing to develop a standards-compliant stylesheet that works across older, newer, and future browsers. It is one of several workarounds that been created to make up for the horrible state of browser compliance to the CSS standard.

See Jeffrey Zeldman's Designing with Web Standards for an in-depth look at why adhering to standards (as much as possible) is a worthy goal, and why using browser sniffing and multiple stylesheets only causes headaches for the developer:

http://www.amazon.com/Designing-Web-Standards-Jeffrey-Zeldman/dp/0321385551/

One example is the arms race to keep up with browser/operating system combinations, not to mention mobile phones and other future devices with browsing capability. The detection code has to be changed with each new combination, and because of the way that many browsers masquerade as Netscape Navigator, detection can become a full time job.

Another good reference is the Web Standards Project, which has a lot of good information and tutorials on the subject:

http://www.webstandards.org/

If you move your coding style towards standards-compliance, you will generally not have to be as concerned about the release of future browsers. Yes, you still have to test against them, but you don't have to write and then test custom stylesheets for each one.

Answer 4

Hacks of any kind are dangerous as they are prone to have unintended effects in future browsers (lots broke with IE7). The safe ways of filtering CSS are:

• (For IE only) Using conditional comments. These will always work on Microsoft browsers and always be ignored by all other browsers as they are within comments
• Feature targetting - using CSS selectors that are only supported by modern browsers to stop older browsers trying to interpret the rules. However the fact that a browser recognises syntax does not mean it handles it correctly. All you guarantee here is that older browsers won't try to render these rules not that modern ones will do them correctly

Whenever possible use the subset of CSS supported correctly by all major browsers. This is improving over time as older buggier browsers drop to ignorable percentages of your users.