Recently I’ve been concerning myself with fixing IE. Well obviously not fixing it, but navigating around its idiosyncrasies. We’re trying to develop the site for modern browsers with fallbacks and fixes appended for old ones (IE) in such a way that when they go obsolete we can whip them out quickly and easily. In styling terms this means we need a way to apply rules to elements in IE only, or even in some cases to specific versions of IE only.
Keeping styling rules separate seems to be somewhat contentious. Paul Irish for whom I have great respect prefers the IE specific rules to be next to the other rules styling an element. His complaint is that it can be hard to identify which stylesheet a rule is coming from if it’s from an external one. I see his point but still have a personal preference for keeping them separate as it means the main CSS is cleaner and I’ve never really had a problem with identifying the source stylesheet for anything.
Because SASS’ stylesheet import copies the whole imported sheet it does not create extra http requests. This means that if we create a special stylesheet for each version of IE and import our regular stylesheet bundle into it, we can have IE specific rules in a separate stylesheet for development but bundled up for the user meaning it only needs one http request. Then, using the same conditional comments we were using for import an extra stylesheet we can import the single bundle for each version of IE. The only change needed to these is the addition of a not IE selector to import the regular bundle
<!--[if !IE]><!--> <link rel="stylesheet" href="/css/desktop/bundle.css"/> <!--<![endif]--> <!--[if IE 7]> <link rel="stylesheet" href="/css/desktop/ie/ie7-bundle.css"/> <![endif]--> <!--[if IE 8]> <link rel="stylesheet" href="/css/desktop/ie/ie8-bundle.css"/> <![endif]--> <!--[if IE 9]> <link rel="stylesheet" href="/css/desktop/ie/ie9-bundle.css"/> <![endif]--> <!--[if IE 10]> <link rel="stylesheet" href="/css/desktop/ie/ie10-bundle.css"/> <![endif]-->
Do take note of the extra
<!--> in the not IE selector, this means that the stylesheet is still loaded in in not-IE browsers while the others are ignored as html comments.
Now we’re not actually keeping all the IE fixes in a file each for every version of IE. But I won’t talk about how we’re doing it now, that’ll be something to talk about next time.