Old Browsers Are Holding Back The Web
Old Browsers Are Holding Back The Web
Because of how far certain Web technologies like HTML5 and CSS3 have brought us, many would say that—from a Web platform perspective—the future is now. Sounds like a cliché, I know. At the very least, it feels like the future is starting to bubble up to the surface… but it’s just not quite there yet.
When we use new DOM features, HTML5 APIs and the latest in CSS3, the possibilities that open up are astounding. These new technologies help us easily build Web applications with less reliance on hacks, plugins, images, and bloated scripts. This makes life easier not only for Web developers (for both building and maintaining these projects) but also for the end user who gets a faster and stronger overall experience.
But there is a huge road block preventing our “future” from truly becoming the now. What is this roadblock? It’s old browsers. Let’s delve into this topic a little bit so we can see why this is a problem and what we can do to help it.
> Internet Explorer’s Usage Share
According to StatCounter estimates, even with the recent mobile explosion, desktop usage still trumps mobile by a large margin. 90% of internet activity worldwide occurs on the desktop. Granted, some reports have mobile shares higher than the current 10% shown by StatCounter. Whatever the case is, the fact remains that a lot of people are accessing our websites and Web apps by using a desktop browser.
Which desktop browsers? Well, let’s look at StatCounter’s usage share for desktop browsers for May 2012, with a specific focus on Internet Explorer:
As shown above—to the joy of developers everywhere—worldwide stats for versions of Internet Explorer prior to IE8 are very low. IE6 is so low that it’s not even showing up in some of StatCounter’s charts anymore. If you find similar stats for your own projects, then, depending on the overall traffic numbers, you may be able to drop support for IE6 and IE7 and start using a number of features that those browsers don’t support. But what about IE8 and IE9?
As you can see from the image and link above, worldwide usage for IE8 and IE9 is just about 30%, combined. But that might not be the full story. Compare those numbers to the ones taken from two other websites.
First, Net Applications, from April of this year:
Their stats show a whopping 38% of users still on IE6-8, with more than two thirds of those on IE8. In addition, IE9 holds another 16% share. That’s more than 50% of users on IE6-9.
Now look at StatOwl’s April 2012 report:
Large preview.
Like Net Applications, StatOwl places IE8’s and IE9’s shares significantly higher than StatCounter’s—this time about 20% for each. Combined with the 8% on IE6 and IE7, that’s almost 50% on IE.
The debate about why these different browser usage stats are showing higher numbers for IE6-9 is something that’s been in industry news of late. These details are certainly beyond the scope of this article, but you can check out the links below for more info:
Understanding Browser Usage Share Data (Windows Team Blog)
Microsoft says Chrome didn’t top Internet Explorer last weekend (Computerworld Blogs)
StatCounter to Microsoft: You’re wrong, Chrome beat Internet Explorer last weekend (Computerworld Blogs)
> Why Is The Old Browser Problem Such A Big Deal?
Some people might be thinking “What’s the big deal? Use progressive enhancement and you’ll just give old browsers a lesser experience and the users won’t know what they’re missing”. This might be true with certain CSS3 and HTML5 features for which it’s easy to provide fallbacks and even some lightweight polyfills. But other more complex features are not that simple.
Let’s first take a look at IE8. To give you an idea of how many features IE8 lacks, here’s a list of what you gain as a developer when you stop supporting IE8:
. Media Queries
. opacity (without IE filters)
. border-radius
. box-shadow
. RGBA, HSL/HSLA colors
. HTML5 elements (that don’t need the html5shiv)
. Data URLs
. getElementsByClassName
. CSS Transforms
. <canvas>
. Crossorigin Resource Sharing
. Lots of CSS3 selectors (:nth-child(), :target, :enabled, etc)
. matchesSelector
. Navigation Timing API (performance.timing)
. Multiple backgrounds
. background-clip, background-origin, background-size
. Real HTML5 Video/Audio with no messy fallbacks
. WOFF Fonts
. SVG images, inline SVG, SVG in CSS backgrounds
. Geolocation
. Server Sent Events
Also, this list doesn’t take into consideration the number of bugs and performance problems that occur in IE8. So when you consider all of the features above, along with bugs and performance issues, a high number of users still on IE8 becomes a major roadblock to progress on the Web.
Of course, this is not to say that support for these features is perfect in new browsers. Many of these features are still in flux in the spec. But a very high percentage of in-use browsers outside of IE8 have pretty good support for everything listed above.
> What Else Can We Do To Help?What Else Can We Do To Help?
If you have any friends or colleagues using an older version of Internet Explorer (or any old browser), help them upgrade to the latest version of Chrome, Firefox, Safari, or Opera. You might even want to show them a CSS3-rich or HTML5-rich website in a modern browser and compare it to IE8.
In other words, prove to them that their browser is an out-of-date, unstable, slow piece of software. You might even have a little fun trying to show them why non-IE browsers are better.
DISPLAY A MESSAGE TO USERS ON OLD BROWSERS
Another thing you can do is display a message to users if they’re visiting your website in an older browser like IE8. Don’t assume this is too intrusive. A couple of years ago, YouTube started phasing out support for many older browsers. The message shown below is now displayed to users visiting the website with IE6:
By Louis Lazaris
