![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/ie6blocker-blocked.jpg?resize=570%2C303\" "\\"\\"")
<\/p>\n<\/p>\n
Fed up with supporting IE 6? Ready to just cut it off? I don’t blame you. I generally feel that most problems<\/a> 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. <\/p>\n 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.<\/p>\n 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!<\/p>\n Enter the IE 6 Blocker Script<\/strong>. Using a little simple JavaScript browser detection and some jQuery, we can drop our IE 6 support with a very clear message.<\/p>\n View Demo<\/a> Download Files<\/a><\/p>\n <\/p>\n Below we’ll detail a how it works and how to use it.<\/p>\n <\/p>\n In the <head> section of the site, we’ll need to include both jQuery and the script file.<\/p>\n The ie6blocker.js script does the browser detection on its first line:<\/p>\n Alternatively, we could have done our browser detection right within the HTML file with a conditional comments statement:<\/p>\n 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…<\/p>\n 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.<\/p>\n Two div’s will be needed. One for the overlay<\/strong>, and one for the message box<\/strong>. We can create them, CSS, content, and all, right within the jQuery JavaScript:<\/p>\n Here is the overlay:<\/p>\n 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:<\/p>\n 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. <\/p>\n Here is the message box:<\/p>\n 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<\/a>). Then we use a higher z-index value still to put it above the overlay.<\/p>\n 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.<\/p>\n View Demo<\/a> Download Files<\/a><\/p>\n <\/p>\n Note<\/strong>: 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.<\/p>\n","protected":false},"excerpt":{"rendered":" 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. […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":364346,"url":"https:\/\/css-tricks.com\/ie-down-edge-up-global-browser-usage-stats-are-for-cocktail-parties-and-conference-slides\/","url_meta":{"origin":955,"position":0},"title":"IE Down, Edge Up… Global Browser Usage Stats Are for Cocktail Parties and Conference Slides","date":"February 28, 2022","format":false,"excerpt":"I enjoy articles like Hartley Charlton's \"Microsoft Edge Looks Set to Overtake Safari as World's Second Most Popular Desktop Browser.\" It's juicy! We know these massive players in the browser market care very much about their market share, so when one passes another it's news. Like an Olympic speed skater\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/ie-inverted.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":16469,"url":"https:\/\/css-tricks.com\/downlevel-hidden-downlevel-revealed\/","url_meta":{"origin":955,"position":1},"title":"Downlevel Hidden \/ Downlevel Revealed","date":"March 13, 2012","format":false,"excerpt":"Just gonna clear up a little thing here that I've seen people struggle with a few times. There are two different kinds of conditional comments for Internet Explorer that have slightly different syntaxes: Downlevel Hidden and Downlevel Revealed (microsoft docs). Downlevel Hidden You likely know that HTML comments are like\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":296714,"url":"https:\/\/css-tricks.com\/a-business-case-for-dropping-internet-explorer\/","url_meta":{"origin":955,"position":2},"title":"A Business Case for Dropping Internet Explorer","date":"October 28, 2019","format":false,"excerpt":"The distance between Internet Explorer (IE) 11 and every other major browser is an increasingly gaping chasm. Adding support for a technologically obsolete browser adds an inordinate amount of time and frustration to development. Testing becomes onerous. Bug-fixing looms large. Developers have wanted to abandon IE for years, but is\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/ie-inverted.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":5131,"url":"https:\/\/css-tricks.com\/design-v6\/","url_meta":{"origin":955,"position":3},"title":"Design v6","date":"December 22, 2009","format":false,"excerpt":"I've been tinkering with this redesign maybe a month or two, and decided to push it out last night. I had been using it myself thanks to the Theme Switch plugin, but there was a few things I had to actually go live before I could change, so I just\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/posterity-v4.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":307863,"url":"https:\/\/css-tricks.com\/no-comma-color-functions-in-css\/","url_meta":{"origin":955,"position":4},"title":"No-Comma Color Functions in CSS","date":"May 4, 2020","format":false,"excerpt":"There have been a couple of viral tweets about this lately, one from Adam Argyle and one from Mathias Bynes. This is a nice change that makes CSS a bit more clear. Before, every single color function actually needs two functions, one for transparency and one without, this eliminates that\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/09\/nerd-color.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":999,"url":"https:\/\/css-tricks.com\/links-of-interest-48\/","url_meta":{"origin":955,"position":5},"title":"Links of Interest","date":"September 16, 2008","format":false,"excerpt":"IE 8 Proprietary CSS Attributes IE 8 will have a number of proprietary CSS attributes. Not a big surprise, all the major browsers have them. It's a way to have support for a) stuff that is truly proprietary to that browser, b) stuff that they want to support but the\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/955"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=955"}],"version-history":[{"count":15,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/955\/revisions"}],"predecessor-version":[{"id":4043,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/955\/revisions\/4043"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=955"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=955"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=955"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<\/div>\nIncludes and Browser Detection<\/h3>\n
\t ...\r\n\t <script type=\"text\/javascript\" src=\"jquery-1.2.6.min.js\"><\/script> \r\n\t <script type=\"text\/javascript\" src=\"jquery.ie6blocker.js\"><\/script> \r\n<\/head><\/code><\/pre>\nvar IE6 = (navigator.userAgent.indexOf(\"MSIE 6\")>=0) ? true : false;\r\nif(IE6) {\r\n ... do stuff ...\r\n}<\/code><\/pre>\n<!--[if IE 6]>\r\n\t<script type=\"text\/javascript\" src=\"jquery.ie6blocker.js\"><\/script> \r\n<![endif]--><\/code><\/pre>\nThe jQuery<\/h3>\n
$(\"<div>\")\r\n\t.css({\r\n\t\t'position': 'absolute',\r\n\t\t'top': '0px',\r\n\t\t'left': '0px',\r\n\t\tbackgroundColor: 'black',\r\n\t\t'opacity': '0.75',\r\n\t\t'width': '100%',\r\n\t\t'height': $(window).height(),\r\n\t\tzIndex: 5000\r\n\t})\r\n\t.appendTo(\"body\");<\/code><\/pre>\nheight: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'); <\/code><\/pre>\n$(\"<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>\")\r\n\t.css({\r\n\t\tbackgroundColor: 'white',\r\n\t\t'top': '50%',\r\n\t\t'left': '50%',\r\n\t\tmarginLeft: -210,\r\n\t\tmarginTop: -100,\r\n\t\twidth: 410,\r\n\t\tpaddingRight: 10,\r\n\t\theight: 200,\r\n\t\t'position': 'absolute',\r\n\t\tzIndex: 6000\r\n\t})\r\n\t.appendTo(\"body\");<\/code><\/pre>\n<\/div>\n