3 Solutions for Supporting Internet Explorer
In the beginning, Internet Explorer was the progressive browser. After a period of inactivity, Internet Explorer became the bane of our existence. Microsoft has since recommitted to their browser but the fact remains that sometimes modern Internet Explorer is lagging just a bit behind WebKit-based browsers and Firefox. We also need to accommodate for earlier versions of IE. The following will allow your sites to quickly and almost magically work better in Microsoft's flagship browser!
htmlshiv.js
Remy's HTML5shiv creates HTML5 elements like main, header, footer, etc. via JavaScript. Somehow creating said elements via JavaScript communicates that they are styleable. We can think for days about why it works but who cares? This crutch is still a must-use on all production sites./
<!--[if lt IE 9]> <script src="dist/html5shiv.js"></script> <![endif]-->
selectivizr.js
Selectivizr.js is an incredible resource, polyfilling loads of unsupported CSS selectors and properties, including the all-important last-child. On a recent redesign, I was able to plug selectivizr in and not miss a beat in older Internet Explorers. Here's how I implemented it:
<!--[if lte IE 8]><script src="js/libs/selectivizr.js"></script><![endif]-->
An absolute must for your modern projects. Only loaded for old IE's
<html> Conditional Comments
The ugliest conditional comment series you'll ever see. Ever. But ugly or not, the fact remains that this code workers exactly as intended:
<!DOCTYPE html> <!--[if lt IE 7 ]> <html class="ie6" lang="en"> <![endif]--> <!--[if IE 7 ]> <html class="ie7" lang="en"> <![endif]--> <!--[if IE 8 ]> <html class="ie8" lang="en"> <![endif]--> <!--[if IE 9 ]> <html class="ie9" lang="en"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
This snippet doesn't require or wait on JavaScript, and isn't near the weight of a JavaScript library. Your styles for defined classes are immediately enacted and there's no flash of unstyled content.
While Internet Explorer is catching up to its competitors, the fact remains that their old browsers are still relatively popular, especially in developing countries. The good news is that these resources work in all of those browsers and are not expensive in modern browsers!
I vote to let IE die on it’s own and take it off these life support hacks. If Microsoft can’t fix the problems and they don’t let anyone else fix the problems by leaving the code base closed then why should we help keep this zombie browser wondering the Internet.
I agree IE should rest in hell, Its by far the worst shit browser ever made.
The lack of support for media queries in IE8 has pretty well caused me to throw it under the bus for new projects. Sure I could include css3-mediaqueries.js but at some point the browsing experience in IE8 collapses under the weight of its own slow rendering and the shivs used to prop it up.
To enhance the solution with Conditional Comments I suggest to use Modernizr http://modernizr.com/ which will automatically add the css classes regarding the web browser. Moreover it can allow you to detect features to use polyfills when needed.
I’ve also seen the conditional comments on the body tag instead of the html tag. Is there any reason to prefer one tag over the other? The only thing I can think of is your charset tag isn’t necessarily the first one in your head, then it has a higher probability of falling outside the first 512 bytes if you use the conditionals on the html tag instead of the body. On the other hand, things like Modernizr add their classes for supported features to the html tag, so that would make things a bit more consistent in terms of expectations.
+1 to let IE die :)
These tips help get oldIE up to a more current state among other browsers with supporting HTML5/CSS3 features but it’s been my experience that this isn’t enough. Even with an advanced solution like Modernizr I still find areas where oldIE (e.g., IE8) isn’t able to support advanced UI solutions (e.g, customizing native elements, et al.).
These are all very good ways to reduce the burden involved in supporting legacy browsers. Internet Explorer 9 was released in March of 2011, nearly 3 years ago. At that time tags like “ weren’t supported in even Chrome, so we can hardly be upset with old IE.
CSS selectors are another pain-point, but let’s be fair here as well. Internet Explorer 8 was released in March 2009, nearly 5 years ago. It aimed to support the CSS 2 Specification (last updated roughly a year before the browser was released). The CSS 2 (and even later 2.1) specification supported
:first-child, but not:last-child.Conditional Comments were a god-send. In a time when browsers differed from one another so radically (not IE’s fault, others had their share in the blame) we needed a reliable way of handling differences. Traditionally, user-agent sniffing has been the browser-agnostic approach in the past, but this approach is notoriously unreliable.
Microsoft supported (note the tense) a feature that wouldn’t break competing browsers, while giving you super-powers in Internet Explorer. Rather than trying to guess which browser your user was in, you could reliable deliver conditional styles, scripts, and markup as you saw fit. Trying to figure out how to offer forked functionality to Chrome, Opera, or Firefox? You’ll have to use the horrific user-agent approach, and hope to God it works as expected.
Conditional Comments were decommissioned in Internet Explorer 10, given the great uniformity between leading browsers. Users, ignorant of how similar Internet Explorer is to the competition, would take tools like conditional comments and unintentionally turn them against IE, destroying otherwise reliable experiences.
Internet Explorer 10 marked the death of legacy IE, by establishing itself as an evergreen browser that self-updated, adhered to standards, and even pushed ahead of the competition in some areas: I recall being very annoyed that I couldn’t animate pseudo-elements in Chrome like I could in IE10 (Chrome finally supported this at v26).
I apologize for the minor rant here, but anytime I see somebody approaching a perspective that attempts to shame Internet Explorer, I get a little defensive. Not because I’m particularly in love with Internet Explorer, but because I’m in love with this industry, and our craft. Perpetuating misconceptions of any browser only hurts us as a community.
I hope this wasn’t in reference to me — bashing IE wasn’t at all the point or goal of the post. I simply highlighted a few tips for better support.
David, it was (mostly) not directed at your. Again, your post is a great checklist for supporting legacy browsers. I do get defensive when I hear people say Internet Explorer is “the bane of our existence,” since Modern IE is vastly different from is legacy predecessors, and even supporting Old IE is relatively effortless (as you’ve demonstrated here).
My post was largely directed at the comments that IE should die, or that Microsoft has somehow failed with their product. These, in my sincere opinion, show a great deal of ignorance about the browser, the standards process, and the history of this industry.
No ill-feelings here. Thank you for the fantastic post.
Geez…. get over it. IE sucks and your opinion is irrelevant.
“and even supporting Old IE is relatively effortless (as you’ve demonstrated here).”
Relatively effortless? So effortless, in fact, that entire blog posts are dedicated to figuring out ways to hack it?
You’re delusional, my friend.
Except that IE is the bane of our existence and, while current IE is significantly better than legacy IE, comparing it to the worst browser on the planet makes anything look better.
While the polyfills and libraries do make it easier to work with legacy IE, without any help from Microsoft, that they had to be created and have to use them is no feather in IE’s cap to brag about.
@Jonathan– but the reason we’re stuck with old versions of IE is because Microsoft has a really bad track record for not letting their old browser iterations die. Chrome, Safari and Firefox all do a much better job of prompting the user to update their browser.
Meanwhile, Microsoft made IE9 incompatible with XP– users have to update their entire operating system in order update their browser.
Even IE10 & 11 aren’t perfect by any means. Font rendering is still iffy, and lately I’ve been seeing all kinds of strange behavior around items with border-radius.
That’s why I can’t stand IE: not because the old versions are crap now by comparison, but because Microsoft has saddled us with them for who knows how long.
@Jonathan Except that IE is the bane of our existence and, while current IE is significantly better than legacy IE, comparing it to the worst browser on the planet makes anything look better.
While the polyfills and libraries do make it easier to work with legacy IE, without any help from Microsoft, that they had to be created and have to use them is no feather in IE’s cap to brag about.
The polyfills and libraries are created to inject modern technology into antiquated software. What exactly did Microsoft do incorrectly? :last-child didn’t exist. <main> didn’t exist either. They did however support an awesome feature that let us cater to IE in a way we cannot do with any other competing browser. If anything, this makes them shine amidst the competition.
@Jonathan I’ll tell you what existed when IE8 was out:
addEventListener. Standard XML documents anddocument.evaluate(that *still* doesn’t support, not even IE11).textContent. Array’s map andforEachmethods.getElementsByClassName. Bubbling change, submit and reset events. Rounded corners and box shadows. Function’s bind method. I can go on with a long list. It’s a matter of fact that IE was awfully late in a lot of things, and IE<10 can't die soon enough.The worst part of this whole thing is that Microsoft, *even in 2014* and *even for IE11*, categorically refuses to take care of IE's bugs that could be fixed with patches. Instead, Microsoft has always had the policy to fix security bugs only, and leave every other mess there.
And with every new version out, we count the new bugs and just say: "Whelp, let's hope for version+1…"
MaxArt,
You are correct. IE is by no means a perfect browser. There are a lot of things that existed during the release of IE8 that were not included *in* the release of IE8. No side-stepping that fact.
But again, this doesn’t mean Internet Explorer is a bad browser, or that Microsoft is a terrible company. The non-normalized DOM of major browsers led to the rise of tools like jQuery. These tools have radically changed the industry, and even influenced further developments in browsers themselves.
Fortunately, it’s trivial to polyfill array methods, functions like bind, and even create arbitrary syntactic sugar to make querying the DOM easier for the end-user. This doesn’t excuse Microsoft for being late to implement some features, but it also wasn’t the end of the world (or even a grand offense for that matter).
As for bugs; I know for a fact that Microsoft does fix bugs. I know this because I have reported probably a dozen or more directly to their team members, and watched as subsequent releases resolve the issues. I create public demos of these, and even blog about them prior to resolution for the public good.
If you have a list of bugs that remain, I would love to see them. I may be able to assist you in seeing them through to resolution. In my experience, the IE team is *always* very appreciative of any efforts from the community to help improve their product.
@johnathan … finally, a person with an IQ! I see all the little ‘tantrums’ from — someone my age who has been here since the IBM 1401 has the right to call them — spoiled adolescents without either the experience to give them perspective in the industry or the sense to keep their mouth shut in public when they have nothing to offer to the world except their whining. Bitching and moaning about the popularity and the availability of a product to billions of people without the resources to change their situation, is not only counter-productive to our industry but shows a complete lack of understanding of the craft. You want to make money in this life – you have to actually provide a service. You want things so automatic that you don’t even need to keep informed or do the work – you don’t belong in this industry. You think the “bad guys” at IE headquarters would be upset if IE8 lost its last user tomorrow – think again.
All your hate and venom against “old-IE” would hurt who? Microsoft? No, the users! Absolutely anyone who thinks that the industry should demean or attack its own users — doesn’t belong in it, and certainly doesn’t understand where the money comes from .
Brilliant last paragraph dj — couldn’t say it better myself.
Very well-said, dj.
Microsoft doesn’t want legacy browsers on the web anymore than we do. They have their own efforts to reduce the footprint of old IE, and find varying degrees of success.
To see to it the death of IE6 was apparent, Microsoft created the IE6Countdown.com website. To help reduce the presence of Internet Explorer 7, they auto-updated XP users up to Internet Explorer 8 (prevented to go any further due to OS limitations presumably).
It’s time we give them credit.
Now that I’ve cooled a bit… I forgot to say “Thanks” for the post – Dave, I read your posts frequently (like probably more people than we realize) and recognize a good writer and a “teacher” who is timely; but, don’t think I’ve ever commented before.
Even without reading any comments I had decided to write and say thanks for pointing out, truly, how completely simple it is to accommodate the thousands of users, sometimes for no fault of their own, who use browsers which are a bit antiquated. Reading the comments was at first annoying – some of us more ‘mature’ (read older) individuals merely whisk away the ‘nats’ that keep buzzing around.
Then as it continued I took a look at what you had really said which might have caused the children to gather and think this was a refuge for more of their IE-bashing. I don’t know you personally, so am not aware of your personal feelings about it; but, haven’t been impressed that you held such feelings. And, I certainly hope that none of those who I realize that I’ve called out are your friends – if so, sorry.
I don’t see any call for retaliation in your article – it was, as I’ve said, a very simple post about a very SIMPLE solution to an issue that really shouldn’t cause such a big deal to anyone with a bit of maturity in the industry.
I do wonder if, however, your casual comment that “was the bane of our existence” was either needed to pander to the baser-gang; or, couldn’t have just as well been said “IE has been the REASON for our (web guru’s) existence.”
We should all take your advice – don’t hate on the users choice or circumstances, utilize the SIMPLE solutions and MOVE ON about it!
You’re forgetting one simple thing: the Internet isn’t just an enterprise network. The Internet – you know, where browsers belong to – is surfed by billions of users who just go to Facebook, Youtube, Wikipedia or davidwalsh.name. Those users make a point. Those users wanted something faster and more capable, more open to new technologies.
If it was just for the enterprise part of the Internet, we could have stuck with IE6, with its quirks, its bugs, its slowness, while Microsoft would have been more than happy to limit its development to security holes.
But 10 years ago Firefox came out, and started a new browser war – but a war that led to web standards instead of new legacy shenanigans. And Chrome accelerated the process even more. Microsoft followed because they understood IE could have been history in a matter of half a decade.
I’m not a teen anymore and I work everyday with machines as old as the IBM AS/400 everyday – servers with an appalling approach to web technologies. And I have to deal with clients that want support for IE8 and in some cases even for IE7. My efforts are more or less doubled for that. I have to deal with old quirks while I could concentrate on a more polished user experience – that I can’t replicate on IE8.
A web application that works is given for granted. But every web developer wants to code something that makes the client wow in stupor (and it’s not for personal satisfaction). This is simply not possible if you’re stuck with IE8.
So, I have no right to complain? Even if it’s for some data center chief who doesn’t take the responsibily to upgrade the OS, or just install a different browser to provide a better experience to the users?
Of course, if the job has to be done, it will be done. That doesn’t prevent us to push for a better platform to work on.
I come to this site to look for tips and tricks that make my job nicer and/or easier, not to talk about the history of Internet browsers. I don’t care a bit about that, it doesn’t help me in my work at all.
Explain how users are getting hurt when they are warned about using a closed source web browser that has a terrible reputation for not fixing its security vulnerabilities, not adhering to web standards, lying to its users about other browsers features and performance*, keeping the web stagnant during the period when Microsoft had unfairly* eliminated the competition with its monopoly, cost users millions of dollars in extra development effort for IE compatibility and is produced by a company who is known to help the NSA exploit their own software?
*unfaily because they used the state via IP laws to gain and maintain its monopoly.
* http://alexw.me/compare-ie9-with-other-browsers-the-truth/
* http://www.theguardian.com/world/2013/jul/11/microsoft-nsa-collaboration-user-data
Richard,
Many users have no choice as to which browser they will use. So if you decide to deliver a painful experience to IE users, you are hurting the user alone. As was pointed out earlier, Microsoft would very much love it if old versions of IE just up and vanished – they don’t enjoy getting calls from their clients any more than you or I do from ours.
As for updates, Microsoft just shipped ~25 updates today alone patching vulnerabilities in versions of IE from 6 to 11. Meanwhile, Facebook is blocking the use of developer tools to prevent scammers from leveraging Google Chrome (their attack won’t work in Firefox or IE) in self-xss attacks.
With regards to browsers claiming better performance than their competition, one doesn’t have to look far to see this in all vendor publications. Chrome fashions demos that work better in Chrome. IE does the same, and the other vendors aren’t any less blameless. Not really worth addressing that to any further extent.
Keeping the web stagnant? Wut? Microsoft is responsible for many of the biggest chunks of our modern web. Heck, even some of the more edgy stuff like the idea of custom web components were materializing during the days of IE4 by Microsoft and submitted to the W3C.
I won’t touch the NSA issue, frankly because I am not comfortable singling out Microsoft on that matter. To what extent major software vendors are (or have been) cooperating with the NSA is another matter entirely.
Respectfully.
“Many users have no choice as to which browser they will use.”
On what planet?
Jonathan,
Everyone has a choice. An employer who chooses the browser for his employees is done freely. The employee is in an agreement to do what the employer asks, an agreement that goes well beyond the choice of software. An employee might not have a choice of browser but they also don’t have a choice of many other things such as dress code. However, the employee still has a choice to get another job. No one is holding a gun to their head. Some choices like rewriting the intranet because it only works in IE6 is perhaps an expensive one but it’s still a choice. Bad experiences help users make better choices. The reason some people are still using IE6/7/8 is because the experience is still tolerable. Ironically, it’s only tolerable because of the techniques presented here on this blog entry. If Microsoft really wanted people to upgrade, they wouldn’t be releasing patches for their old browsers. But what would users do?! Well, they would simply have to make a choice, a choice that I’d be glad to help them make.
“Absolutely anyone who thinks that the industry should demean or attack its own users — doesn’t belong in it”
You make a lot of justified demands toward developers while holding Microsoft to none of the same standards. You expect developers to know their “craft” well enough to make adjustments for a company that doesn’t seem to care very much about THEIR craft!
Why the double standard?
Also, how can you compare demanding the same standards from Microsoft as we do from the development community to “Attacking users”? We all want a good experience for the user. That’s everyone’s goal here– Except for Microsoft. I think there has been enough evidence here to support that.
too bad you didn’t mention IE8 which aim is to indeed code as if it’s 2014 without leaving this browser behind: https://github.com/WebReflection/ie8#ie8
IE8 can be used behind other repo such DOM4:
https://github.com/WebReflection/dom4#dom4
IE8 is really not so difficult to support, the one annoying part is the “function expression as declaration” bug but that ain’t something difficult to deal with neither.
Chose your targets and code accordingly ;-)
P.S. also eddy.js works down to IE8 and it makes super-easy to develop for the DOM
Thanks very much i didn’t know selectivizr!
One year, maybe two and it will be not necessary.. I hope.. ;)
Important to note that selectivzr.js works only with a major JS library (e.g. jQuery, MooTools, Prototype, Dojo) loaded before selectivzr is.
Since I started writing my CSS mobile first, Scott Jehl’s Respond.js (https://github.com/scottjehl/Respond) has a permanent place in boilerplate. It’s a polyfill for mediaqueries for IE8 and down.
It’s insane there are still a couple peeps willing (getting paid, JS?) to defend it. All the frustration and wasted time supporting MSIE– Counter-point!
dj: “You want to make money in this life…”
Making cool stuff, not nursing crapware like a bank.
dj: “You want things so automatic that you don’t even need to…”
Ah, duh. That’s why we hack.
Honestly, Microsoft DOES NOT have to be in every market. IE was essentially a vanity project for them — closed source noise.
Bitching tantrum from whining spoiled adolescent DONE
NO, let it DIE
The problem with IE is that it’s bundled with Windows. If users really had to decide which browser to use, they probably wouldn’t use IE. But most users don’t know they have a choice and don’t see the point of downloading and installing another browser when they already have one on their system. And unless you run a killer site like YouTube, people won’t install a new browser just to access your site.
Yeah. I’d go perhaps Modernizr instead of HTML5shiv. Does the HTML5 leg work but then you have all the other feature detection, so it becomes more about feature detection rather than browser sniffing. But Selectivizr and HTML tag conditional comments are a must I would say.
yes, let IE die.. true there are still many employers that distribute ie on their networks and do not allow their employees any other alternatives and yes there are still a number of archaic websites that will only work properly when viewed in internet explorer.. BUT the sooner that WE stop supporting older legacy versions of IE, then the sooner said employers and developers of these archaic websites will have to follow suit because their users will demand alternatives.
otherwise IE will continue to keep us stuck in the past and force us to keep bogging down and overloading our pristine work.. and worst of all hindering the full potential for growth..
yes the web has been exploding with advancement after advancement over the last few years.. but we can’t truly run if we’re dragging around the IE ball and chain..
bottom line is, if your new site’s target audience isn’t overwhelmingly geared towards the elderly or developing countries then stop supporting IE!
All efforts are in vain?I don’t think so.
Internet explorer should die completely. Everyday lots of develepores all around the world strogling to use their modern Ideas to work on this MONSTER browser. All IE generation should die.
Excellent suggestions David!
I think some of the readers of this post have forgotten what their job actually is. While I love to push the boundaries of current web standards and specifications, that is usually not my job. I am a web designer/programmer. My job (and for the large majority all web designers/developers/programmers) is to disseminate information to the end user. That is what our industry is based on, and why it continues to grow. The more and more people gain access to the web, the more and more important our primary function becomes–make the content accessible to ALL users.
I work for a educational institution in the U.S. We do a lot of work with the Department of State. Guess what; they HAVE to use Windows XP and therefore IE8. We also get a lot of traffic from developing countries and even developing counties within the U.S. A lot of these people are using computers and laptops (running on borderline dial-up speeds) which were donated to them.
Should we tell these people, that at an institutional level, we don’t believe they are worthy of the information we have to offer? Should we tell them that due to their economic status they shouldn’t receive the services we are offering? That’s not progress–it’s regression. That is not what our industry stands for.
Or, on the other hand, should we take this into consideration and supply support for EVERY person connected to the web? Is it difficult? Hell yes. But, for us, it is a necessity as well as a privilege.
So stop crying about supporting older browsers and start doing your jobs.
Jimmy, the only reason enormous bureaucracies like the Dept. of State refuse to update their systems is because people like *YOU* continue to agree to work on their outdated systems.
And rather than admit that you’re contributing to the government’s refusal to update their systems, you disseminate the lie that they told you: “We HAVE to use Windows XP”.
Nobody “has to” do anything. Nobody “has to” accept a job where they are supporting outdated software or hardware. Nobody “has to” use a browser.
Humans require motivation to change their behavior. If we fail to motivate humans to improve their systems, humans will not improve their systems. This goes for massive government agencies as well as developing countries.
no Jimmy, nobody HAS to use Windows XP in the Department of State or anywhere else because Windows XP is not a supported software anymore and it is officially insecure and disaster prone.
Yes, we cannot ignore minorities or people stuck behind a not so updated or fashioned software, but supporting death Operating Systems? Who are they going to blame once the most basic virus will hit them if not you or whoever still writes software for them?
No, this is not what software is about. Think about cars engine, you don’t want to support steam based cars, they **HAVE TO** change car at some point.
Thanks for sharing your knowledge with HTML development with IE. It will encounter more issues, and that create more workload!