Subscribers
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.
Being 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]-->
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>
We 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>
There 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.
if(ie6 == false){
a();
}else{
b();
}
AAAAA!!!
if(ie6){
b();
}else{
a();
}
There, I feel all better now.
Anyways... That's a neat concept to get browser version detection (for IE, anyways) w/o resorting to the fugly JS navigator variables and unreliable string parsing (plus the fact that these variables can/often are spoofed).
Hmmm... can you fix my <code> tags? The preview showed one thing, the confirmation page showed another, and the actual article page shows a third display. The comment confirmation page was closest to what it should have looked like.
Chris, sorry about that. I have some funky things going on to display code and to do line breaks in comments, so its not really meant to be placed in comments.
I could still view the source of your comment to get at what you were talking about though. I prefer to use verbose if statments i.e. if(ie6 == false) just because I find it easier to read.
Nice! Easy to implement and much more accurate than using the Navigator Object.
You're using jQuery, right? What's wrong with jQuery.browser.msie?
James, I considered using jQuery's method but found that is is currently deprecated in version 1.3.
