NoIE6 An IE6 Not Supported Notification

2012-02-07

Blog Image

Download Files

Internet Explorer 6 has been deprecated for a while now, but has still remained a prominent browser across the globe nonetheless. Needless to say this has made cross-browser support quite an endeavour. In recent years though, the Web has moved forward enough to allow developers to focus more on modern browsers and technologies and start considering dropping support for IE6 altogether. The question is what to do about the significant number of people out there who still use the browser.

Even if you don't really support it, you don't want IE6 users coming across your site and thinking, “Wow! This site is broken!” Ideally, you want some way to tell them you don't really support IE6 any more, but in a way that means you're not spending more time than you need to fussing about with it.

So here is my answer, free for all to use. I call it NoIE6 (or No IE6 Support). It's a simple fire and forget JavaScript tool designed to solve this problem for you. If it detects an IE6 (or lower) user agent, it informs the user that the website doesn't support their browser and how they can go about updating. It does a little more than that too, but I'll go into that a bit later on.

There are a few other tools out there that do a similar job, but I needed mine to comply to five points that I thought were crucial:

  • Easy to deploy (almost drag and drop in)
  • Run from native JavaScript (no libraries required)
  • Give the user control (you don't want your user repeatedly clicking “close” or “remind me later” for every page refresh, or they're just going to click Google and go somewhere else)
  • Should not interfere with host website's code, and vice versa
  • Should look professional (so the user at least considers upgrading and doesn't click “close” assuming it's a spam pop-up)

What NoIE6 Does

  • Adds unobtrusive warning bar at the top of the page (can be disabled by a setting)
  • Adds a message box that pops up informing the user that their Internet Explorer is outdated and how to upgrade it. For usability purposes, the user has the option to cancel the message and return to viewing the website. By dropping a cookie, the message will not reappear for x number of days, allowing the user to proceed through the website without being pestered at every page load
  • Works in IE6 and 5.5. Also had some success in 5.01, but you might want to disable the blockGUI setting as the opacity filter doesn't work

What NoIE6 Doesn't Do

  • Interfere with your own JavaScript code
  • Interfere with your CSS – all style rules are limited to NoIE6 HTML elements only
  • Add bloat to your website – one snippet of code is all you need to add to your HTML page, JavaScript takes care of the rest
  • Require a JavaScript library
  • Automatically upgrades the user to newer versions of IE

How to Use NoIE6

What I've done here isn't really that tough and anyone can whip their own version up. Still, I've tried to build this to be robust so it should make your life easier if you do decide to use it.

  1. To start, simply download the zip.
  2. Extract the files to your website. The default setup is to extract the main noie6 directory to your website's 'js' directory, e.g. /js/noie6/*.
  3. Next simply copy and paste the code below to the head of your website (underneath any existing JavaScript links) changing the “src” attribute if you've extracted the files somewhere else in your site.

<!--[if lte ie6]><script type="text/javascript" src="/js/noie6/noie6.js"></script><![endif]-->

I'd advise putting it on all pages in the website – you never know where traffic will come from and which page it will land on first.

NoIE6 uses window.onload to interact with the DOM. JavaScript only allows one instance of this load function to run and previous instances are overwritten. NoIE6 copies any existing window.onload function (if there is one) and executes it in it's own window.onload function. For this to work you need place the above HTML code underneath all your own JavaScript code in the head.

Alternatively, you can just put this code in your own window.onload function:

if(typeof noie6 !== 'undefined')noie6.run();

Configuration

If you have followed the default setup, then configuration isn't really necessary, but the options are there if you need to use them.

If you open up /noie6/noie6.js, at the top is a JSON object called noie6.settings. There are seven options you can play with:

  • documentRoot – this is mainly for testing purposes. This should be the location of the root directory of your website, it could be the domain name (http://www.yourdomain.com) or just “/” or “//”. If you leave it blank, NoIE6 will just assume that the hostname is the same as current domain name.
  • noie6Location – this where the NoIE6 files are stored in relation to the root directory. If you've left them in the root directory you can leave it as default. Default is “noie6/”
  • cookieLifeSpan – this determines how long (in days) NoIE6 should wait before it displays the warning pop-up once the user has clicked the “Remind me later” link. If set to 0, no cookie is dropped.
  • baseZIndex – this determines the starting depth that the NoIE6 HTML elements will use. To display the NoIE6 message over the whole site, this should be set higher than any other HTML elements' z-index value.
  • displayWarningBar – this determines whether or not to display the red warning bar at the top of the web page. I can understand that some people might not want NoIE6 to start messing with the layout of their page, in that case change this to false.
  • hoverWarningBar - this determines if the red warning bar should hover above the page or should follow the document flow. The latter shifts pushes the page down by the height of the warning bar, but the heading area is not obscured.
  • blockGUI – determines whether the host website should be “greyed out” when the message box appears.

You can also tweak the appearance of the NoIE6 HTML elements of you open /noie6/css/noie6.css.

Notably, the first ruleset simply overrides any global styles you may be using on your own website. If there is still something interfering with NoIE6, you can add a CSS rule there which sets it back to default.

Some things you should be aware of

To try and make NoIE6 a one-size-fits-all toolkit, I have had to sacrifice a bit of efficiency. Although I have tried to optimise the code, I did have to use IE expressions in the CSS which calls a simple function in the JavaScript.

Notes:

Browser images courtesy of PaulIrish.com (http://paulirish.com/2010/high-res-browser-icons/)