Once you begin developing web content, it doesn’t take you long to figure out that how your web site appears to people is, to a lesser or greater degree, a matter of which browser they are using.
It’s to a lesser degree if your readers are using a browser that supports current web standards, such as Firefox, Opera, Chrome. These are not perfect, by any means, but they generally do a good job of supporting HTML5 and CSS3, even though those standards are not yet finalized.
It’s to a greater degree if your readers are using Microsoft’s Internet Explorer, whose support of modern web standards has ranged from non-existent to lackluster to something that’s not entirely a complete disaster.
There are various ways to deal with this situation. I’ll explore the common ones and then offer a couple of my own.
Current Options
IE Hacks
A lot of people still use Internet Explorer, even as primitive a version as IE6 (although most of these are in China). One of the reasons that people feel the need to support IE is that their readers still use IE. A bit of research reveals that these users fall into two groups: people who work at companies that won’t upgrade from an earlier version of IE (such as IE6) or allow them to use a better browser, and people who are afraid to upgrade or don’t even know that there are alternatives to IE6 out there.*
A typical example of an IE hack works something like this: You create a great web design that takes advantage of CSS3 properties, such as gradients. Unfortunately, most versions of IE don’t support this, so you have two alternatives: either set the background color first to something that comes close to the gradient (and have your client complaint because the gradient is not showing up in IE), or create a separate background image of a gradient to use as a background image if someone is viewing the site in IE.
There are some ways to do this that make life a bit easier, such as using CSS PIE or the HTML Shiv, and I certainly encourage you to use those, as they are easy ways to add some much needed functionality to IE. But they don’t cover everything.
Ignore IE
The other option is to not even bother to worry about IE, and that’s what I do. I choose to not add IE hacks to my code. If someone is viewing one of my sites in IE and doesn’t like the way it looks, they can either use a different browser or close the tab on my site.
I know that seems a bit harsh, but I am a single web developer. Microsoft is a huge corporation employing not-a-small-number of people. The logical solution here is not to expect individual designers and small web design companies to hack their sites so they look good in IE, but to create a version of IE that actually adheres to current web standards. Why should we do extra work (often non-billable work) to reward Microsoft for its laziness and stubbornness?
A Third Way
Of course, that leaves a lot of end users out in the cold, and we certainly don’t want that. What we want, instead, is to educate our readers so that they know they have a choice in browsers. This can be as easy as simply posting a notice on your web site that your readers should use a browser other than Internet Explorer, but since a number of people don’t even realize that there are browsers other than IE3, you need to do something to get their attention. You need to alert them to the browser they are using, and let them know that better alternatives exist.
So let’s talk about browser detection for a moment. There are ways to do this in JavaScript, but let’s reserve JavaScript for those things we can’t do with either PHP or CSS.
Using PHP
PHP has a built-in array, $_SERVER, that contains information about headers, paths, and script locations. Most importantly, it has a variable, HTTP_USER_AGENT, that contains information about the browser that sent the HTTP request to the server. To simplify things, we can use the strpos function to determine if “Firefox” is a part of that string:
(strpos($_SERVER['HTTP_USER_AGENT'], 'Firefox')
If we throw that into an IF loop, we can figure out whether or not our reader is using Firefox and then echo some output to the screen based on that information:
if (strpos($_SERVER['HTTP_USER_AGENT'], 'Firefox') !== FALSE) {
echo 'Text to show if using Firefox.<br />';
} else {
echo 'Text to show if not using Firefox.<br />';
}
The above script tests specifically for Firefox, which is my favorite browser and the one I recommend. We can easily alter it to echo output only for Internet Explorer:
if (strpos($_SERVER['HTTP_USER_AGENT'], 'Explorer') !== FALSE) {
echo 'Text to show if using Explorer.<br />'; }
else {
echo 'Text to show if not using Explorer.<br />';
}
You can see a variation of that script at the top of the sidebar of this blog.
Using HTML and CSS
If you are not using PHP to build your site, there is a way to do this entirely with HTML and CSS. Internet Explorer has been programmed to accept conditional comments that other browsers just ignore. (It’s almost as if Microsoft is expecting this.)
It’s possible to litter your markup with these comments, but that’s even worse than writing a bunch of CSS hacks. Instead, let’s just use one to include a special stylesheet just for IE. In our document’s head, we’ll include a line linking to our default stylesheet, followed by a conditional comment that will load a separate stylesheet only if we are viewing the page in IE:
<link rel="stylesheet" href="style1.css" /> <!--[if IE]> <link rel="stylesheet" href="ie-style1.css" /> <![endif]-->
I’m not going to get into the syntax of conditional comments; you can google them if you really need to know how to target specific versions of IE. What I have done above is to target all versions of IE.
Now to the HTML. I am going to include two `<div>`’s: one with an ID of `#iewarning` that will contain information that is only displayed in IE, and another with an ID of #content that will contain my main text content.
My main style sheet is going to hide that `<div id=”iewarning”>`:
#iewarning {display: none;}
but my IE-only stylesheet is going to display it:
#iewarning {
display: block;
}
That’s it! My readers who visit my site using IE will see whatever information I put in <div id=”iewarning”>, and my readers using any other browser won’t see it at all.
A Brief Caveat
If you wanted to, you could be cruel and include a line in your IE-only stylesheet like this:
#content {
display: none;
}
which means that your readers wouldn’t see anything other than that warning block until they switched to a different browser. I recommend that you do this during development, because it will be perfectly clear whether you got it right or not. Be sure to disable this once you have it working right. You want to educate your readers, not scare them off.
See it in Action
You can see both of these technique here: http://code.kjodle.net/ie/
I have not disabled the nasty trick I just warned you about, so that you can see it for yourself. You can also download all these files in a .zip archive to play around with on your own. Enjoy!
Notes
* Before you get too excited about supporting IE6, it’s worthwhile considering how many of your users actually use Internet Explorer and which version they are actually using. Generally, you can get such data from your web host.
You can see statistics about how many people actually use IE6 (and where they are) at the IE6 Countdown. You can find similar information for IE7 at the IE7 Countdown, for IE8 at the IE8 Countdown, and for IE9 at the IE9 Countdown.
Based on the data from those websites, I strongly recommend against trying to support IE6 and IE7. Very few people in the west actually use it, so unless you are targeting a Chinese audience, it’s probably not worth the effort. You will have some readers who simply refuse to upgrade, reciting a story about an acquaintance who upgraded and lost everything. (And we all know how reliable anecdotal evidence can be.) Why not include a tutorial on how to safely back up and upgrade?
For those readers with older computers who cannot afford to upgrade their hardware, you can provide links to legacy versions of better browsers. An outdated version of Firefox is always better than an outdated version of Internet Explorer.
Remember, you want to educate your readers and enhance their online experience.
https://techblog.kjodle.net/2013/04/28/web-development-and-the-end-of-internet-explorer/
Internet Explorer is also slow and i am also agree with you in some view.I hate IE but I love to use Mozilla Firefox and Google Chrome .
Thanks for the insights. I agree completely about Internet Exploere and Microsoft’s failure to live up to its responsibilities as a large corporation, versus expecting web designers to accommodate their quirks.
The IE conundrum is further complicated by the fact that different versions of IE require different hacks. My solution is something like yours, to ignore IE, but I make two concessions. First, I code verthing in HTML5 and use the Modernizer JQuery plugin, which provides some compatibility for older browsers, including outdated version of our favorites, Firefox, Opera and Chrome.
Second, and I think more important, I keep my sites simple so there isn’t a lot of esoteric styling and/or scripting that would blow up in IE (or older compliant browsers). It’s still possible to desing attractive, functional sites and it ensures that a wider audience can access them. I mostly build and maintain sites for local nonprofits, so this is more important than showing off bleeding edge technology. And simpler sites are easier to maintain and update.