At this point I'd like to re-iterate an earlier point: it's almost certainly possible to polyfill the majority of HTML5 and CSS3 features for older browsers but the resulting user experience will be heavily laden with JavaScript and potentially less usable than it would be without the polyfills. Needless to say, it's important to consider the performance implications of such a choice. Just because you can, doesn't mean you should!
Furthermore, even without polyfills (which we shall look at shortly), in my experience, adding, testing, and configuring IE specific CSS code to make IE6 and IE7 (and to a lesser extent IE8 and IE9) render pages so they look as similar as possible to a modern standards compliant browser takes at least as much time as visually enhancing a site for modern browsers—just far less enjoyable! Is that how you or your client want to spend the allocated development time?
Let's revisit some of the ground we covered in Chapter 1, Getting Started with HTML5, CSS3, and Responsive Web Design. Whilst conceding that statistics are always open to interpretation, we noted that from July 2010 to July 2011 global mobile browser usage (as measured by Global Stats at http://gs.statcounter.com) had risen (from 2.86 percent to 7.02 percent) whilst usage of Internet Explorer 7 had dropped (to 5.45 percent). For the last month of 2011, the stats are even more revealing: Internet Explorer 7 was just 4 percent with Internet Explorer 6 enjoying just 1.78 percent. Mobile browser usage meanwhile had increased to 8.04 percent.
An even more interesting fact is that for December 2011, a single modern browser, Google's Chrome (I'm including both, versions 15 and 16), accounted for 25.7 percent of global browser usage; almost the same amount accounted for by versions 6,7, and 8 of Internet Explorer (27.9 percent). Once you then factor the numbers for other modern browsers such as Safari (4.3 percent, excluding the iOS version) and all versions of Firefox (21.01 percent), and then the relevant mobile browsers, it's not difficult to appreciate that developing and enhancing the user experience for modern browsers, rather than patching up the holes in old ones makes more sense. At least to me!
The bottom line: usage of ailing versions of Internet Explorer (6, 7, and 8) is diminishing whilst usage of modern browsers (both desktop and mobile) is increasing.
Currently, my personal stance for new website builds is that I ensure tight visuals in the current version of Internet Explorer (v9 at the time of writing) and the nearest prior version (for example, IE8). Tweaking layout and style issues in older versions is then negotiable due to the additional time needed.
That doesn't mean I simply disregard any fundamental usability problems with versions such as IE7, I merely limit development time to ensure that basic layout and functionality works, and disregard minor alignment issues and visual enhancements that aren't supported within the browser such as background gradients, rounded corners, box-shadows, and so on. These things don't affect usability; for the most part they are merely progressive enhancements that I wouldn't expect (and nor should anyone else!) to see on aging browsers.
Tip
Testing sites across multiple browsers
Typically, standards compliant browsers, such as Chrome, Safari, and Firefox, render HTML5 and CSS3 based web pages pretty similarly. At present, the majority of smart phones (those based on Android and iOS), like their desktop Safari and Chrome counterparts, use WebKit as their base and also render pages as you would expect. However, the different versions of Internet Explorer are entirely different and there'll no doubt come a point where you'll need to check your design there too (unless it's your default browser in which case you have my sympathy). I usually use IE Tester (http://www.my-debugbar.com/wiki/IETester/ HomePage)—a free utility to run multiple versions of Internet Explorer on a single machine. However, there are plenty of alternatives and this feature on Smashing Magazine gives a good overview of some common choices:
http://www.smashingmagazine.com/2011/08/07/a-dozencross- browser-testing-tools/
To illustrate this approach, after looking at http://www.andthewinnerisnt.com in IE8, it's obvious we've got some fundamental work to do, merely making it functional. We're going to use a great JavaScript tool called Modernizr and a polyfill to patch things up for old IE. I'm not sure that IE deserves it after all the pain it causes but that's just the kind of guy I am. However, before we get to that, let's understand Modernizr a little more.