IE 6 Blocker Script
* September 1st, 2008 *
Fed up with supporting IE 6? Ready to just cut it off? I don’t blame you. I generally feel that most problems people have with IE 6 are pretty easy to work around with practice, but that is not always the case, and I feel like the JavaScript support is even more problematic for developers.
Many times it just comes down to how best to spend your time. If you have to choose between designing and coding a neat new feature of your website that 80% of your audience will use and enjoy or work on troubleshooting IE 6 bugs for the 20% (and shrinking) portion of your audience, I’d go with the new feature.
But then the question arises as to just HOW you are going to stop supporting IE 6. Do you just do nothing, and let layouts be borked and functionality be severed? I would argue that is a bad idea. If you stop supporting IE 6, do it with confidence and inform that portion of your audience of what they can do!
Enter the IE 6 Blocker Script. Using a little simple JavaScript browser detection and some jQuery, we can drop our IE 6 support with a very clear message.
Below we’ll detail a how it works and how to use it.
Includes and Browser Detection
In the <head> section of the site, we’ll need to include both jQuery and the script file.
...
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery.ie6blocker.js"></script>
</head>The ie6blocker.js script does the browser detection on its first line:
var IE6 = (navigator.userAgent.indexOf("MSIE 6")>=0) ? true : false;
if(IE6) {
... do stuff ...
}Alternatively, we could have done our browser detection right within the HTML file with a conditional comments statement:
<!--[if IE 6]>
<script type="text/javascript" src="jquery.ie6blocker.js"></script>
<![endif]-->However, since with our technique we’ll need JavaScript enabled for it to work anyway, we might as well just let the JavaScript do the detecting. You could also do it both ways…
The jQuery
Now that we have detected for IE 6, we’ll be using jQuery to build some new page elements and insert them onto the page. The goal is a transparent black overlay for the whole screen (rendering the site recognizable but useless). Then above that, a centered message box explaining the sites intentional lack of support for IE 6. To lighten the blow a little, you may want to offer an alternate way of viewing your content (such as the blogs RSS feed). Some people are not able to upgrade their browsers, so a message telling them to do that alone may not be good enough.
Two div’s will be needed. One for the overlay, and one for the message box. We can create them, CSS, content, and all, right within the jQuery JavaScript:
Here is the overlay:
$("<div>")
.css({
'position': 'absolute',
'top': '0px',
'left': '0px',
backgroundColor: 'black',
'opacity': '0.75',
'width': '100%',
'height': $(window).height(),
zIndex: 5000
})
.appendTo("body");With a modern browser, we could just set the top, right, bottom, and left all to 0px, but IE 6 doesn’t like that, so we need to set the top and left to 0px, and the width to 100%. The height is a bit trickier. Setting it to 100% doesn’t work in IE 6. We could just use a really large static number, but that’s no fun, and will trigger a scrollbar that may not be necessary. Many “lightbox” overlays make use of the proprietary CSS “expressions” to get the window height like this:
height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'); That’s not going to work for us here, because jQuery applies this styling “inline” and it won’t be calculated that way. Fortunately for us, jQuery now has the ability to calculate the window height. (The newer versions of jQuery have the old dimensions plugin built in). A high z-index value is also used here to make sure the overlay sits on top of all other content.
Here is the message box:
$("<div><img src='no-ie6.png' alt='' style='float: left;'/><p><br /><strong>Sorry! This page doesn't support Internet Explorer 6.</strong><br /><br />If you'd like to read our content please <a href='http://getfirefox.org'>upgrade your browser</a> or <a href='http://feeds.feedburner.com/CssTricks'>subscribe to our RSS feed</a>.</p>")
.css({
backgroundColor: 'white',
'top': '50%',
'left': '50%',
marginLeft: -210,
marginTop: -100,
width: 410,
paddingRight: 10,
height: 200,
'position': 'absolute',
zIndex: 6000
})
.appendTo("body");Notice all the markup for the message box is right in there, in one big jQuery object. The CSS of interest here is that we set the left and top values to 50% and then pull it back into center with negative margins (the theory). Then we use a higher z-index value still to put it above the overlay.
That should do it! Pretty simple really. Feel free to download the files, alter them in anyway you see fit, and use them for yourself.
Note: I’m not advocating that every single site in the world drop their IE 6 support. I merely offer this up as a tutorial and theory on how this can be done. You should make your own decisions based on your own audience on whether you will support IE 6 or not.
.
Loading ...
Nice work! Except IE6 users are probably the vast majority of the 1% of browsers that don’t use JS heh. jQuery ftw!