Simple IE 6 alert with jQuery

• 3 min read

🚧

Whoa there!

This post contains code that's more than 12 years old. It might be fine, but you should probably check to make sure this isn't incredibly stupid by today's standards.

IE 6 alert

First, let me say I realize that in 2011 we’re supposed to be detecting features, not browsers. Feature detection is superior to browser detection, since it lets us actually accommodate antiquated browsers. Plus, with Modernizr, it’s easier than browser detection ever was anyway.

Nine times out of 10, you can create an experience that will gracefully degrade by taking advantage of Modernizr. Occasionally, however, it adds a lot more time to a project.

Recently I had to re-code a site to 2011 standards while keeping the same design. When it was all said and done, just about everything worked fine in IE 6. There wasn’t much to change in the navigation, however. The nav had previously relied on an IE DHTML behavior to make the :hover pseudo-class work on elements other than links, which was the kind of thing we wanted to avoid this time around. Sure, we probably could have made it work with jQuery, but that would have defeated the purpose of modernizing the code and slimming down the page weight. The pure CSS approach already worked fine for 98 percent of the site’s visitors.

The decision to drop IE 6 support had been made even before I started this project, but I didn’t want to leave that two percent hanging without some kind of warning when everything but the nav was just fine. So we decided to add a message for IE 6 users.

There is no shortage of easy to implement IE 6 warnings on the web, but they all seem like overkill. Plus, if you’re using HTML5 Boilerplate, you’re already detecting IE 6 using a foolproof method.

HTML5 Boilerplate uses IE Conditional Comments, which are nothing new really, but H5BP packages a few in a very useful format. Take a look:

<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

This adds a different class to the html tag for several version of Internet Explorer. We can use jQuery to take advantage of these classes without bothering other browsers.

First, let’s create the message text. There’s a number of ways you could do this, but we’re going to put a block of HTML in another file and then load that file using jQuery.

Put this in a file and name it alert.txt:

<h1>Whoa there!</h1>
<p>That’s a pretty old browser you got there. You’ll have a better experience here if you upgrade to something from the past decade. I recommend <a href="http://google.com/chrome" title="Chrome">Chrome</a> or <a href="http://firefox.com" title="Firefox">Firefox</a>.</p>

Now, here’s the jQuery you’ll need to get it into your page. You could shorten this a little bit, but I want to make it as clear as possible.

$('document').ready(function(){
// Grab the message from the text file
	var ie6message = 'alert.txt';
// Create a div to hold the alert
	var alertdiv = $('<div id="alert">');
// Load the message into the div
	alertdiv.load(ie6message);
// Insert the message into the page. Notice the .ie6 class, which only appears when using IE 6.
	$('.ie6 body').prepend(alertdiv);
});

And here’s all the HTML you’ll need to get started:

<!doctype html>

<!--\\\[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <!\\\[endif]-->
<!--\\\[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <!\\\[endif]-->
<!--\\\[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <!\\\[endif]-->
<!--\\\[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<!\\\[endif]-->

<head>
</head>
<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

Personally I can’t stand tutorials and drop-ins that try to design your site for you, so I’m not going to tell you how to style this. Just drop some styles in your stylesheet and you’re all set. Also, it’s probably not a good idea to be quite so preachy or condescending as this message. Change it to suit your visitors and the voice of your site.

Here’s a demo page that will let you see it in all browsers. Want to tell me why this is awesome/terrible? Tell me on Twitter or comment at GitHub.