Ask any web developer you know what they think of writing web pages for Microsoft Internet Explorer (MSIE or IE, for short). They’ll usually all tell you (in no uncertain terms) that it’s miserable. Just be advised, you’ll probably get some very colorful language describing exactly how the developer feels… you’ve been warned.
What’s the problem with Internet Explorer? Simply put, standards compliance hasn’t been a high priority for Microsoft. MSIE6 kind of did things their own way. It didn’t really matter because they were pretty much the only game in town. IE 7 was a train wreck as far as standards went. MSIE8 was a little better, but websites that looked perfect in MSIE7 (Microsoft even advised developers to add an X-UA Compatible tag to tell their MSIE8 visitors to render the pages in MSIE7 compatibility mode.)
Then MSIE9 came along. They got close — again… but for many standards features, you’ll have to wait for MSIE10. For the love of Pete! Just be standards compliant! Don’t reinvent the wheel every time you update your web browser!
Okay, enough of the background, let’s got to how to work around it — without using weird hacks in your CSS files to do so.
Conditional Comments to the rescue
What we need is some way for Internet Explorer to conditionally load (or not load) stylesheets for us, right?
We can, thanks to an MSIE feature (ironic, huh?) we can conditionally comment things out — like references to stylesheets.
<!–[if IE]>
… whatever you want MSIE to see goes here …
endif]–>
But anything contained with in that will be invisible to every browser except MSIE. What if we want to target every browser. Do this:
<![if !IE]>
… this will be seen by everyone, but in this case, not run by IE…
endif]>
What if we want to target more specific versions? We can do that, too!
Instead of simply targeting “IE” in the examples above, preface it with one of these:
- gt for “Greater Than”
- gte for “Greater Than or Equal To”
- lt for “Less Than”
- lte for “Less Than or Equal To”
… then follow it with a number, like this:
- 6
- 7
- 8
- 9
- 10
You can even throw in a “Bang” to say “not”… if !lte IE 6 for example.
So you can conditionally load up stylesheets (or styles, or whatever else you want into your code) that will target a specific version of MSIE, or a bunch below a certain version, or above a certain version, or whatever.
Did you find this tip useful? Instead of beer or coffee, why not help me pay off my mortgage?™.
No comments yet.