When Ignoring IE isn't an Option

Let's face facts. Building HTML, CSS, and JavaScript for older versions of Internet Explorer is painful. Various communities on the Internet exist simply to vent this frustration. Many developers could tell stories for hours about the gnashing of teeth, pulling of hair, and overall loss of time. In fact, IE6 Countdown is an entire website dedicated to the subject. In more recent times, websites and articles have recommended eliminating support for these older browsers. The development community is harmonious in their elimination, but what happens when ignoring IE isn't a possibility? The vast majority of users no longer use IE6, but many still use IE7/IE8. Although they would love the opportunity, developers cannot control what browser a user uses. Furthermore, certain industries such as health care, education, and government have stipulations requiring the use of a specific approved browser.

When ostracizing older versions of Internet Explorer isn't an option, it's important for developers to educate themselves about the pitfalls. The following section outlines a few tips and tricks:

• Use a JavaScript library such as jQuery to help eliminate differences between browser versions. Be aware that jQuery 2.0 (slated for early 2013) will no longer support some of IE6/7/8's oddities.
• Use a CSS Reset file. This file attempts to reset the format of all HTML elements to a consistent baseline. CssReset.com provides a list of common reset files used on websites. This is an important first step in cross-browser development.
• Become familiar with quirks mode and doctypes. These options define how a browser will interpret the CSS on a web page. QuirksMode.org provides a deep dive into the explanation and differences between the options.
• Get comfortable with the "Developer Tools" toolbar available in IE9/10. It can provide a representation of a web page in older versions of IE. The word "representation" is key. It is not the complete engine from an older version. Some nuances do exist. Additionally, be aware that "compatibility mode" falls under these same parameters. The browser and document mode are invaluable due to the difficulty of installing multiple versions of IE on the same computer.
• Support for different CSS styles varies heavily in older versions of IE. QuirksMode.org provides an excellent worksheet of styles and their applicable browsers. For instance, IE7 struggles to support many table styles and selector options.
• Different versions of IE can be targeted by using conditional comments. MSDN provides a thorough explanation of the subject. Any HTML can be placed in these comments, including JavaScript and CSS. It is advisable to create one stylesheet per older version of IE (e.g. IE7.css, IE8.css) for special overriding styles.
• Do not lay out a web page with older versions of IE in mind. Build for modern browsers, then utilize conditional comments to target problem areas. Modern designs require floating elements through CSS. Unfortunately, older versions of IE struggle with this. The website Css-Class.com provides a comprehensive demonstration of these issues.
• Older versions of IE have support for newer CSS options such as gradients and opacity, but they utilize a proprietary set of styles under the "filter" attribute. MSDN provides a detailed series of examples on this feature. This attribute can be used along with modern styles (which older versions of IE will ignore) to provide a consistent look between browsers.