ie 6 blocker script | css-tricks.pdf

7/29/2019 IE 6 Blocker Script | CSS-Tricks.pdf

1/20

IE 6 Blocker Script

by: Chris Coyier

Sep 1 200891

Fed up with supporting IE 6? Ready to just cut it off? I don't blame you. I generally feel that mostproblems people have with IE 6 are pretty easy to work around with practice, but that is notalways 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 betweendesigning and coding a neat new feature of your website that 80% of your audience will useand enjoy or work on troubleshooting IE 6 bugs for the 20% (and shrinking) portion of youraudience, 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 justdo nothing, and let layouts be borked and functionality be severed? I would argue that is a badidea. If you stop supporting IE 6, do it with confidence and inform that portion of your audienceof what they can do!

Enter the IE 6 Blocker Script. Using a little simple JavaScript browser detection and someQuery, we can drop our IE 6 support with a very clear message.

View Demo Download Files

Below we'll detail a how it works and how to use it.

Includes and Browser Detection

In the section of the site, we'll need to include both jQuery and the script file.

...


2/20

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 aconditional comments statement:

However, since with our technique we'll need JavaScript enabled for it to work anyway, wemight 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 elementsand 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 wantto offer an alternate way of viewing your content (such as the blogs RSS feed). Some peopleare not able to upgrade their browsers, so a message telling them to do that alone may not begood enough.

Two div's will be needed. One for the overlay, and one for the message box. We can createthem, CSS, content, and all, right within the jQuery JavaScript:

Here is the overlay:

$("").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 6doesn't like that, so we need to set the top and left to 0px, and the width to 100%. The height isa bit trickier. Setting it to 100% doesn't work in IE 6. We could just use a really large static


3/20

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 windowheight. (The newer versions of jQuery have the old dimensions plugin built in). A high z-indexvalue is also used here to make sure the overlay sits on top of all other content.

Here is the message box:

$("

Sorry! This page doesn't support Internet Explorer 6.

If you'd like to read our content please upgrade your browser or subscribe to our RSS

feed.
")
.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 ofinterest here is that we set the left and top values to 50% and then pull it back into center withnegative margins (the theory). Then we use a higher z-index value still to put it above theoverlay.

That should do it! Pretty simple really. Feel free to download the files, alter them in anyway yousee fit, and use them for yourself.

View Demo Download Files

Note: I'm not advocating that every single site in the world drop their IE 6 support. I merely offerthis up as a tutorial and theory on how this can be done. You should make your own decisionsbased on your own audience on whether you will support IE 6 or not.


4/20

Subscribe to The Thread

Harley Alexander09/01/2008

Nice work! Except IE6 users are probably the vast majority of the 1% of browsers that dont useJS heh. jQuery ftw!

Dan Cole09/01/2008

You should make this into a WordPress Plugin that blocks IE 6 on 8/27 every year, but has anoption to block it all the time.

Marco09/01/2008

Reminds me about SaveTheDevelopers ;) .

Why do you include such a big script such as jQuery insteed of writing the (fairly small)JavaScript yourself? You shouldnt waste your bandwith on IE6 users.

Anyway, thanks for the share!

pavs09/01/2008

Surprisingly even on my Linux blog, I have good IE traffic, at first I wanted to block all IE traffic,then I thought I should play nice :)

Of course, there are easier ways to achieve this, but this looks much better in action.

Nacho09/01/2008


5/20

CSS Hack much easier.

* html #miMsgForIe6 {display:none;}

* html #miMsgForIe6 {display:block; border:1px solid gray; etc.}

Nacho09/01/2008

Sorry, first line without * html!

xD

koew09/01/2008

Personally I dont support IE5/5.5, but due to experience at work, I know alot of people thatsstuck with IE6 due to security issues (yeah, I know, haha). I blame the nazi sysadmin, of course,but I cant do nothing against it really.

When everyone have finally switched to at least IE7 or IE8 (like, in 2014 or something) the

world will be a happier place. Eh?

Max09/01/2008

I dont know what this has to do with css-tricks:) Nevertheless, Conditional Comments are thebetter solution, because some Add-On or Proxy could change the User-Agent string.

Goob09/01/2008

Amen. It seems like theres been a heavy push in the last week or so to get people ralliedaround the idea of dropping IE6 once and for all. I even had to beg my users this weekend to let

it die. 20% of them were still using it!


6/20

Robert Augustin09/01/2008

All IE users should finally stop using IE and switch to a browser.

Al09/01/2008

download files do not include the style.css file

Al

philipp09/01/2008

Hi hi, this is really cool! I will use it on my worddesign blog!!! reminds me of what my father inlaw said yesterday: He is using IE 7 now to be always up do date! I wish more people would

think like him and he is 60!!! Sadly it turned out to be IE 6, but I will change this next time!great, thanx Chris for this!

Gerasimos09/01/2008

Technically: great article. Thanx for that. Practically? Come on.. lets be realistic. We r not thereyet for solutions like that. People (WHY??) still using this thing that wants to call itself abrowser.

Paul Gendek09/01/2008

Personally, I would prefer a small bar at the top of the screen, like an IE7 alert, that simplysuggests to the user to upgrade. This seems counter-intuitive because the fact is that many IE6users simply cannot upgrade! But at least with the toolbar alert, theyd become aware of theproblem and possibly try it on a different computer.


7/20

Dont browser discriminate, people!

Ian09/01/2008

Nice idea Chris. I too feel that the time for dropping IE6 Support is near. Very wise to at least texplain to users what is happening when they cant see the page.

One problem though the link you have provided for upgrading is getfirefox.org it should begetfirefox.com!

David Sparks09/01/2008

Im completely planning on using this on my personal site, however I think something has to besaid for those users who have machines so old they literally cant upgrade IE.I assume they can use another browser like FF or maybe opera etc. but.. for the retard, i meanuser who has a machine so old that they cant upgrade their browser i SERIOUSLY doubttheyre going to have the patience to get used to an new browser UI.

never the less im doing this on digitalskraps.com.

Karl09/01/2008

I think a gradual process might just work better. Pauls suggestion of a toolbar reminder is afantastic idea. Make it stick at the top of every page on your site with links to upgrade or get FF.Something users cant dismiss. You would probably get many more sites to do this versus thein-your-face, switch or die tactic.

If a few million sides would take this approach, then on the anniversary date 8/27/09 we allwent with the a more forceful message, I think our goal of eliminating this retarded step-childwould happen much faster.

Chris Coyier09/01/2008

@Paul: A bar at the top is also a nice solution, all the framework is here to make that happen.Just pull over the overlay, and adjust the CSS in the jQuery file.


8/20

Steven02/02/2009

Hi Chris, it might my ignorance but why is there no README file in the .zip on how to use this?

I am running WP 2.7 but have got NO clue how to implement this script in my website. I did putthe .js files in the /theme/js/ dir and the other files one dir higher but it does not work (alsoputting them in the same /js/ dir did not work). I did add the paths to the js files in my WP themetemplate (header.php).

Or do I have to upload the entire /IE6Blocker/ dir somewhere (i.e. in the root)?

And do I have to alter some other files in my WP like changing the .css file or any other file?

Looking forward to your help asap. Thanx a lot in advance.

Steven

chris read09/01/2008

Nice Chris, wish my boss would let me do that.I checked our logs today, and it seems 46% of our users are IE6 (!) goddammit. An article onsitepoint claimed a load of this could be bots tho need to check out the logs and find out.

Can we have an international, arms around the world coming together of people burning bigblue es?

Allan09/01/2008

Isnt blocking the content all together is a bit draconian? I mean, sure, you provide access to thefeed, but I sure wouldnt necessarily subscribe to content I cant vet first.

If you want to make a statement on IE6 without being . . . lame . . . about it, just turn style sheetsand scripts off all together and make the thickbox tell people that theyre viewing the rawinformation with no behavioral enhancements. And Ill echo the comment that says you dontneed 20KB of jQuery to do this.

If youve written your javascript behaviors properly (unobtrusively) then the site should still beviewable and functional with both styles and scripts disabled, and the person isnt cut off fromthe content completely. If your pages cant degrade gracefully, then youre probably not doingyour job right.


9/20

And I say all of that as a web developer who struggles with IE6 support daily. Im angry too,damn it! But in too many cases, its not the users fault, and they should be punished for it.

Jeff Starr

09/01/2008

Too bad we cant deliver a strong electric shock to go with it! ;)

Angie Bowen09/01/2008

I dont really like the idea of blocking ie6 users out completely. A lot of people browse from workand have no choice in the browser they use. Instead I put a conditional banner at the top of mypage that only loads for ie6 users and lets them know that the page wont look 100% like itshould in ie6 and gives them the option to upgrade.

Antoine Leclair

09/01/2008

If it simply breaks the layout of your blog, putting something like this near the header would besimpler and less aggressive :

{!--[if lt IE 7]}

{p style="color:red"}Your message to IE < 7 users{/p}

{![endif]--}

I replaced the with {} to prevent it from being treated as HTML by wordpress & browsers.

John Stevens09/01/2008

It would be time that Google will come up with their own browser.

Knock Knock.

Who is there?


10/20

Maikel D09/01/2008

@Paul Gendek and Karl.

Ive developed exactly what youre looking for, and you can see it for yourselves on my site:http://www.assyrianlyrics.com (if you use IE6 or lower, youll get a message just like the IE7alert.If you dont have IE6, heres a screenshot of what it looks like: Click Here

If you like the script, you can just steal it from my site, the URL for that script is: Right Here

Ive actually been trying to get people to use this and/or improve it and share it.We have to try to make people upgrade their browsers all the time

Michael Short09/01/2008

Great tutorial Chris, I agree with some people that its bad to discriminate against people withbad browsers.. but for a website like this one which is aimed at web designers mainly, I see noproblem because if your a current web designer and still stuck in the IE6 age you really should

upgrade :-P

Steve D09/01/2008

Maikel D -

Great script! A much better way of going about this issue. Good article and good comments,guys thanks.

Max | Design Shard09/02/2008

The movement on IE6 seems to be picking up, dont know what to agree with really.


11/20

Erik Heddema09/02/2008

Not user friendly at all. So many companies still use IE6 so to use this only shows that a coder

is lazy and not user friendly at all. Would never use this.

Pierpaolo09/02/2008

This script is very good, but it is intrusive for the person using IE6. The script be used in thewebsite that few people use, for example an administrative area.P.S. sorry per my language Im not american

Eric09/02/2008

Nice script, but have tested it in IE5?

The result is that you see the page and not te warning ;)

Carlos09/02/2008

A little extreme but a good idea. We should unite and take the initiative. We should cometogether and always block IE6 or any other crappy browser so that manufacturers have tocomply with standards if they want people to use their products. Imagine what would happen ifsites like google, facebook, amazon, etc started blocking ie6?

carlnunes09/03/2008

I love it! But check out my latest anti-IE6 code:


12/20

NOTICE: Because you are using

an older browser; this web page may not display correctly. If you

can; Please

Update your Browser

M u a a h a h a h h a h h !

Hairgel_Addict09/03/2008

Website called CSS-Tricks and yet youre using javascript where a CSS tricks would havedone nicely?

.ie6box { display: block; } /* this one shows the box in IE6 */

html>body .ie6box { display: none !important; } /* and this one hides it from everybody else, cosIE6 ignores html>body part.. */

so why the javascript?


The reason for the JavaScript:

1) Anybody can easily download this and include it on their page and be done. Ease of use.

2) It is demonstrating technique, parts of which could be used for any number of interestingthings.

There are certainly CSS only ways to achieve the effect as well, just not contained as nicely asJavaScript can make it. I would also recommend against using a hack and using conditionalstatements instead.

Tarzine Jackson01/29/2009

Hello Chris,

I found something interesting.First I downloaded a stand alone IE6 browser fromhttp://www.stalebrew.com/2008/browsers/stand-alone-internet-explorer-6/, and by the way


13/20

your blocking script works great, but only from this site after I click on the demo button.But when I used the script on my site, I didnt receive the overlay or the message.

It could be me, so I re-download the files and uploaded the entire file to my host. And the scriptdoes not work.again, it could be me.

So, I invite you to check it out for yourself. Was there something I did wrong?

http://tazinteractive.com/IE6Blocker/ie6blocker.html

Please respond.

Tarzine

Hairgel_Addict

09/03/2008

well, I do agree with both points. It is easier to download and add own site, though Its moresuitable for people who have no knowledge of CSS and Its a good thing, I suppose..

Just, I dunno, wouldnt you think that people who are looking for CSS-Tricks, they would haveat least an inkling of that knowledge.. But I might not see the big picture, theres probably notthat much of pure CSS tricks out there to write about :)

Still, maybe ought to have a second method section for this kinda posts? Using simple, clutter

free and javascript-less CSS hacks that youre recommending against, which also doesntmake much sense to me.. What kind of CSS trickery is it without hacks? :D

danielgroves09/03/2008

Totally agree, down with IE, thats all versions, not just with IE 6.

Although most people are stuck with IE6, lucky for me I get acces to Firefox 2 at school ; )

Rob Mason09/04/2008

Is blocking the site for IE6 users really the right answer? Surely we as professionals shouldoffer some form of graceful degradation or a lesser experience versus other browser rather thangiving up completely? We should still offer our content to everyone via a browser and not shutthe door on themthat doesnt feel right.


14/20


15/20

Tinny09/09/2008

Good for doing some other javascript with ie6, together with a conditiona css for ie6 only, in

order to show a page in ie6 like it should be and like it look in other every browser.For a developer is not so good to block someone, maybe if you will use this, just a little advicewould be enough

Tinny09/09/2008

for example you can launch a jquery growl window

Robert Augustin09/12/2008

Im not sure it is a good decision to force download and install of new software onto a user. Let

me rephrase that: I am absolutely against it. That is one of the very strong reasons why not touse IE. Exploiting this method is close to computer intrusion and its really not the best idea toconnote Firefox to an unwanted program that the user has no control over. Installing softwareautomatically will ALWAYS leave user confused at least, if not upset because something ontheir computer was happening behind their backs. Please do not place Firefox in such aneighborhood.


@Robert Well this is a pretty interesting conversation This kind of aggressive approach maybe the kind of thing that can really help the world switch over which is clearly a good thing.

Although Robert has a good point in that this may be borderline nasty intrusive behavior. Takea look at what it looks like to a user when they hit the example site: SCREENSHOT.

At the least, I think this idea needs to be a little more friendly in its approach and clearly

explain what it wants to do for the user and why and that its not harmful.

It seems to me like this could be used for something that is harmful, which is why its kindascary.


16/20

Mark09/13/2008

I think this approach is one of the few approaches which will work even for the people who do

notknow what a browser is, which are the majority of Internet Explorer (6) users out theretoday.

Running a program downloaded from the Internet could indeed be harmful, but in this caseyoure letting your Internet Explorer using visitors run a program which is available on all themajor software download sites for quite some time and received all possible 100% CLEANawards it could possible get.

I think making this a little bit more friendly is a good idea, but Im afraid that every addedcharacter to explain why its so great will scare the targeted users, because they dontunderstand and even dont want to understand: they just want that it works. So I think keepingthe explaining text as short as possible is a good idea. This is just how Flash gets installedanywhere: it just says click here to view this, which results in Flash being installed. This worksgreat, because Flash is not installed by default while the installed base of Flash is over 99%percent. So when FirefoxS can do this same trick well finally get rid of Internet Explorer,which is a good thing (at least for me as web developer and security specialist), dont youthink?

Stephen Gray09/25/2008

This feels a bit regressive, like when MS won the browser wars and sites had that reallyinsulting and exclusive Optimised for Internet Explorer-type message. IE6 is certainly a pain,but users should still be allowed to use their outdated technology if they want. Its fair, though, totell them that theyre not getting the best experience and how they can improve it.

Im glad there seems to be a tide turning here, but we shouldnt start to dictate to users.

And we shouldnt obsess on Firefox either: offer Opera, Safari and Chrome as well. Lets notreplace one monopoly with another

John10/04/2008

I dont think IE6 users specifically want to use their outdated technology, they just use it

because they dont know better.

Those websites dont work only in Firefox: they work fine in Opera, Safari, Chrome and otherbrowsers too.The problem is that IE6 users dont know what a (good) browser is, so if you would offer them a


17/20

choice they probably would just pick a random one (or Chrome, just because they knowGoogle). Thats why I think its a good idea to advice the IE6 user specifically to use FirefoxS orGoogle Chrome (as Opera and Safari cant always be installed, because they requireAdministrator privileges, while FirefoxS and Google Chrome dont).

Because Google Chrome is still beta I think the safest and best option is to recommendFirefoxS.

flash tekkie10/18/2008

Those lightbox packages still making use of the IE expressions are to be breaking soon asMicrosoft announced ending expressions in Style Sheet stack on Thursday earlier this week.For backwards compatibility Quirks and IE7 Strict mode will still be there in IE8 but the defaultis the Standards mode. So to all the IE developers out there, we wish you good luck!

ez10/27/2008

may I suggest to use (document) instead of (window), as else you will still be able to see belowcontent on long-content pages.

switched window with document (info: http://docs.jquery.com/CSS/height) and it does the trick.

thanks for your script, much appreciated.a quick php-alternative would do of course, too.

Josh11/05/2008

I wasnt sure what to do for the sites Ive been made that dont look so hot in IE6, but I found apretty non-intrusive option after a lot of searching and reading.

Check out http://www.pushuptheweb.com/ this script provides a small notification box in thetop right for IE, Firefox, Opera, and Safari when they are outdated.

Piotr Gabryjeluk12/04/2008


18/20

I would change the This site does not support IE to

IE does not support this site

Rob12/05/2008

Ive just set up a blocker for my site for IE 6 with an explination and links to other browsers. Itstime we ran a spike through IE6s heart. Thankfully most of my visitors wont be from bigorganisations that patch something after its been signed off by 406 people who know nothing ofIT (I used to work as a support dude, I know how retarded companies are about upgrades)

I say stand firm! Display the pop up at the start of your site and include a click here tocontinue but dont use IE6 hacks :) then it will make people think to upgrade

Its hard enough getting unity with the rest of the browser world and IE7, never mind having towaste time on a legacy browser

Damn you IE6, damn you to hell!

Adam

12/08/2008

Thanks for writing this script. If I wanted to achieve the same result for IE 5.5 and below, whatwould I have to indicate for the user agent?

(navigator.userAgent.indexOf(MSIE 6)>=0)

devolved12/14/2008

People arent going to leave IE6 until they start suffering from stuff like non-alpha pngs, extralines when we dont put presentation mark up like .first on nav styling and the like

Still its xmas soon, new pc = new browser not the most efficient way of upgrading but if its anail in ie6s coffin then it works for me

Francois Botha01/03/2009


19/20

While were at it lets get rid of all nuisances simultaneously: IE6, Comic Sans MS, peoplewho type alot, toilet seats that dont stay up by themselves.

We dont want to be hypocrites, do we?

Simon Sigurdhsson01/03/2009

Internet fascism isnt a solution to anything. Instead of just shutting people out, just gently nudgethem towards something like browse happy (not just a Firefox download, not using InternetExplorer doesnt mean you have to use Firefox it has flaws and shortcomings, too). That wayyou wont basicalliy give your visitors the middle finger.

Francois Botha02/02/2009

A more subtle WordPress alternative is available at http://wordpress.org/extend/plugins/push-up-the-web-for-wordpress

tarzine02/03/2009

The script is not working for me.

First I downloaded a stand alone IE6 browser fromhttp://www.stalebrew.com/2008/browsers/stand-alone-internet-explorer-6/, and by the way yourblocking script works great, but only from this site after I click on the demo button.

But when I used the script on my site, I didnt receive the overlay message.

It could be me, so I re-download the files and uploaded the entire file to my host. And the scriptdoes not work.again, it could be me.

So I tried to figure what was in wrong using Mozillas fire bug, and it seemed to be missing astyle.css. But that should have nothing to be with why the script is not working.

So, I invite you to check it out for yourself. Was there something I did wrong?

http://tazinteractive.com/IE6Blocker/ie6blocker.html

Please respond.

Tarzine


20/20

ie 6 blocker script | css-tricks.pdf

Documents