Like every other web developer, I abhor Internet Explorer. I’ve already given a lot of good reasons why I can’t stand IE—in any version—in an earlier post.
However, I will admit that the last truly unusable version of IE is IE8.
Why IE8 is Broken
IE8 is in a completely different world from every other browser on the market.
First shipped in 2009, IE8 is the last IE version to fail to understand numerous crucial CSS3 properties—such as box-shadow, border-radius, background-size, @media queries, and the rem unit. It also doesn’t understand truly useful HTML5 elements like audio and video, as well as a grab-bag of other important things.
To summarize: IE8 is in a completely different world from every other browser on the market. If you want to make a given website look good in IE8, expect that to take up approximately half your time, and to be by far the worst and most frustrating part of the job.
To see what IE8 does to perfectly good websites, download IE Tester and visit this site in IE8 mode. (Or just browse the internet for a while and see how it looks; it won’t be pretty.)
Ways to Work With IE8
Sadly, IE8 is still relatively popular, with (depending on whom you ask) around 10% market share globally. This makes it difficult to ignore completely.
Conventional Approaches
The sensible approaches to dealing with IE8 are, generally, as follows:
- Use browser conditional statements to serve a separate CSS stylesheet specially to old IE browsers
- Serve one stylesheet, but make sure to provide IE8 fallbacks where necessary (for example,
px-based declarations beforerem-based declarations.)
But if you can get away with it, sometimes it’s more satisfying not to be sensible.
The Nuclear Option
Don’t even attempt to show anything to IE8 users, except a polite request to upgrade to a better browser.
The “Nuclear Option” is to not even attempt to show anything to users of IE8 and below, except a polite request to upgrade to a better browser.
We’re using this option here at Press Up, and we’ll also be using it on the forthcoming redesign of our WordPress tutorial site, WPShout.
Here, we’ll walk you through the HTML and CSS you’ll need to go nuclear. Afterward, we’ll also discuss a bit of strategy for when it might be the right choice for you.
Going Nuclear in Three Easy Steps
Here are the three pieces of markup you’ll need to implement this solution.
Conditional <html> Tag
You’ll want your <html> tag (the very first thing on each page) to look something like the following:
<!--[if IE 5 | IE 6 | IE 7 | IE 8 ]>
<html id="low-ie">
<![endif]-->
<!--[if !(IE 5) & !(IE 6) & !(IE 7) & !(IE 8) ]><!-->
<html>
<!--<![endif]-->Using conditional statements, this code serves a normal <html> tag to most browsers, but sets the tag’s id attribute equal to low-ie if the browser is IE 5, 6, 7, or 8.
CSS
In the CSS stylesheet you’re using for the site, you’ll want something like the following:
/* IE8 "nuclear option"
-------------------------------------------------------------- */
#low-ie body>* {
display: none !important;
}
html#low-ie body>div.low-ie-message {
display:block !important;
position: absolute;
top:4px;
left:10px;
}This completely hides all first-level children of the body tag—hiding everything, since hiding an element also hides its children. There’s only one exception: the div element of class low-ie-message, provided that that element is an immediate child of the body tag. That gets displayed, and absolutely positioned toward the top left of the page.
The “No Support” Message
The code for all this will go immediately after the opening <body> tag, in an IE conditional statement like the one below.
<body>
<!--[if lt IE 9]><div class="low-ie-message">
<p>Sorry, we don't support IE8 and below. Please consider <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">upgrading your browser</a>, or switching to <a href="https://www.google.com/intl/en/chrome/browser/">Chrome</a> or <a href="http://www.mozilla.org/en-US/firefox/new/">Firefox</a>.</p><p>We'd love to hear from you! Please write us at <a href="mailto:contact@pressupinc.com">contact@pressupinc.com</a>.</p>
<p>Best,<br />The Press Up team<br />
<img src="https://pressupinc.com/wp-content/themes/pressup-v1/images/up-button.png"</p>
</div><![endif]-->
<!-- regular page content goes here -->
Our “No Support” message is pretty simple, but here’s where you can really have fun. Give great reasons why you don’t support old IE versions (CSS3 support! Security! Web standards!); explain how much happier the user will be when he or she has picked a better browser; offer to send the user $1 for upgrading; etc. (There are some very persuasive words for IE users at the IE8 countdown site, so you may just want to link there if you’re short on time.)
When to Press the Button
Not everyone has the luxury of using this option.
Not everyone has the luxury of using this option for his or her site. Some sites absolutely need robust browser support, and simply banishing users who have obsolete browsers would be a really stupid decision; eBay and AOL come to mind.
In general, your ability to refuse IE8 support increases when:
- Your users are more technical. Press Up is a web development site, and WP Shout provides WordPress tutorials. If a developer, WordPress learner, or potential client visits either site with IE8 in tow, it stands to reason that our first message to them is to get a better browser. More to the point, we get very little traffic from low-IE users anyway.
- It’s your site. It makes more sense to advocate for better web browsers on a project you own, rather than force your opinions on a client and that client’s users. Put differently, it’s nice when it’s your own site traffic and revenue you’re risking.
Ultimately, it’s a judgment call, which will need to be informed by an understanding of the site’s purpose, user base, and analytics.
Good Luck!
Flatly refusing to support IE8 is a somewhat radical decision, but boy, is it satisfying. Let me know if you have any questions or comments, and consider yourself armed!
Related Posts
Image Credits: Javier Aroche