Add Tags
| First Name: | Neal |
| Last Name: | Grosskopf |
| Message: | Preface: It's quite possible that I'm not the first to discover this. But I did come up with this idea without finding a prior example of it before. I was working with JQuery at work last week and Internet Explorer was giving me some trouble, mainly due to it's sucky Javascript performance and some of it's flaky text+opacity issues. My solution to this was to remove animations from IE and change the element's CSS properties without an animation. I was now tasked with finding a way within Javascript to target IE. 
An aside, I'm fully aware that IE's JScript engine contains a method at targeting IE using JScripts conditional comments, but I've never been too impressed with these because they only allow me to target JScript versions, and not individual IE builds. Enter: CSS Conditional CommentsBeing a seasoned CSS veteran of the web standards wars (ok kidding) I turned to what I know best...CSS Conditional Comments. I've seen most people use Conditional Comments (CC) to target IE in CSS hacks, but I seldom see people serve IE anything other than stylesheets with this method. I think a few people forget that you can actually wrap CCs around any valid HTML elements (see PositionIsEverything for a sweet method of doing this). CCs are pretty simple to use. They're pretty much HTML comment blocks that only IE recognizes. The example below will only show up to IE6 users.
<!--[if IE 6]>
Hello IE6!
<![endif]-->
We can also target previous browser releases with the following:
<!--[if lte IE 6]>
Hello IE6!
<![endif]-->
Enough Already! What About Javascript!Using these same principles, we can wrap conditional comment blocks around our Javascript blocks. Then flag variables within these blocks to identify the browser as IE6, IE7 or plan ol' IE.
<script type="text/javascript">
//By default, flag browser as not IE to non IE browsers
var ie6 = false;
var ie = false;
</script>
<!--[if lte IE 6]>
<script type="text/javascript">
//Flag browser as IE in our conditional comment block
ie6 = true;
ie = true;
</script>
<![endif]-->
<script type="text/javascript">
if(ie6 == false)
{
alert("You're cool, you're not using IE6");
} else {
alert("Ahh! Why are you using IE6!?!?");
}
</script>
Target All Versions of IE In JavascriptWe could also target all versions of IE with the following code:
<script type="text/javascript">
var ie = false;
</script>
<!--[if IE]>
<script type="text/javascript">
ie = true;
</script>
<![endif]-->
<script type="text/javascript">
if(ie == false)
{
alert("You're cool, you're not using IE");
} else {
alert("Ahh! Why are you using IE!?!?");
}
</script>
DrawbacksThere are a few drawbacks to this method. First, the conditional comment code will all have to appear inline on each page its used. I suppose one could create an external .js file and wrap it with the conditional comments. Second, we'll have to account for all the versions of IE we want to target or at least use LTE/GTE to target IE6/IE7 and its previous versions. |
| Date: | 2009-07-14 |
| Time: | 19:49:42 |
| Replies: | 7 |
| Views: | 8253 |