Improving Conditional Comments

With the upcoming release of IE 7, there has been a lot of discussion within the webdev community over the last several months about the proper way to "hack/patch" CSS for IE. The official solution is to use conditional comments instead of less elegant methods such as * html. Conditional comments let you check for whatever version of IE you want to and include a stylesheet (or more than one) only if the user's browser matches.

I'll be one of the first to say conditional comments are a pretty good solution and make things easier, and I really wish I had known about them before. But they don't go far enough. For one thing, it'd be great if they worked in every browser. I'd love to serve specific stylesheets to Firefox or Safari and not muck up my global stylesheets with styles that only affect those.

But what we really need is for CSS to gain the power to use conditions. Here's what I'd like to do at the top of, say, my global stylesheet:

if (lt IE 7) { @import url(globalIE.css); }

Why not just do this in the ? Bottom line: my HTML document shouldn't need to know what's happening within the stylesheets it includes. I set up my server-side templates so I can include CSS & Javascript files on a per-page basis using "css" and "js" attributes that define paths to the files I need. I also have a "conditionalcss" attribute available for use as well. But I ran into a situation recently where a page's CSS file needed to import another file but that included file had a separate "IE only" version that fixed a few inconsistencies.

On a small site, it might make sense to simply rethink a few things to avoid this situation. But when we're dealing with many pages and very diverse content, more robust tools are needed. CSS isn't a programming or scripting language but I don't think that means it can't get better at what it does. Adding more advanced selectors isn't the only way it can improve.