Strive for design perfection in all browsers, sizes, and devices. We’re not there yet, but almost. Most browsers follow Web standards and display designs accurately and consistently. In the near future, designers will “design once for all,” with high-fidelity and cross-browser consistency for everyone.
The achilles heel on the team is Internet Explorer, especially the older versions (anything less than IE9). IE has improved significantly with version 9, however older versions remain popular among Windows users.
Supporting these older versions of IE is facilitated via built-in conditional comment filters that enable us to target any version(s) of IE. For example, the markup for this page includes the following conditional comment to target all IE less than version 9:
<!--[if lt IE 9]>
<link rel="stylesheet" media="all" href="css/ie.css">
<script src="js/html5shim.js"></script>
<![endif]-->This method enables us to deliver version-specific code – CSS, JavaScript, HTML ‐ to Internet Explorer. For more extensive support, awesome scripts like Selectivizr, Modernizr, and ie7-js can make things a lot easier. Such scripts are generally plug-n-play, and are included for older versions of IE via conditional comments. For example, we can use the powerful ie7-js script with three lines of code:
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->Likewise, to make older IE behave like a modern browser with Selectivizr, four lines of markup make it happen:
<!--[if (gte IE 6)&(lte IE 8)]>
<script src="selectivizr.js"></script>
<noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->Using JavaScript to support older browsers works great, but fails when JavaScript is not available in the visitor’s browser. Fortunately this scenario is disappearing as technology moves forward, but it remains a possibility. To provide a fallback for such visitors, we can include additional HTML and/or CSS via <noscript> tags, as seen above in the Selectivizr example.