Previously I wrote Internet Explorer 7 and Future Proofing your Website which was a primer for preparing the imminent release of Internet Explorer 7. Now we will soon see Internet Explorer 8 which will stir things up again. A couple of months back Microsoft floated the idea of creating multiple standards modes, with the more modern implementation being an opt-in mode that required pages to include a meta value that IE8 would use to switch over to the new modern standards mode. The proposed solution was widely rejected.
Today the IE team announced through the IEBlog, in post a entitled Microsoft's Interoperability Principles and IE8, that Microsoft is withdrawing that idea. There will be only two modes in IE8, quirks mode and standards mode. Initially Microsoft did not want to break all of the pages that were expecting the IE7 standards mode, much like pages were expecting IE6 standards mode when IE7 was released. Now after significant feedback from the community Microsoft will bite the bullet and happily move forward with web standards even if it means breaking many sites that should be updated anyway.
All in all this should not be a big problem. Given that Best Practices for CSS encourage developers/designers build their pages and sites with the most standards compliant browser first and then adapt lesser compliant browsers these cross-browser issues should not be much of a concern. Yet many sites were not built with techniques that are safe across browser versions. Techniques like the box model hack enable support across multiple browser versions that support different levels of web standards. Leveraging how CSS works in this way is how you can future proof your web site.
A great example of navigating predictably across browser versions is the Gemination design for the CSS Zen Garden. In CSS there are a couple of important rules that make Gemination possible. First, all unrecognized rules should simply be ignored in CSS. As new CSS standards are finalized new syntax is introduced which is unknown to older browsers so placing CSS rules with modern syntax is a way of shielding older browsers from those rules. Second, the more specific selector overrides a less specific selector. The Gemination design leverages these key rules by defining one look and feel with older CSS rules that IE6, IE7 and Firefox could all interpret while also defining more specific rules using selectors with more modern syntax that IE6 ignored. The result is two very different, yet completely predictable outcomes that you can see in the following three screenshots. For Gemination, using child selectors allowed IE7 and Firefox to interpret modern rules while IE6 ignored them.
Gemination in Firefox, IE7 and IE6
What is important to realize here is that this is not a hack. This is the way we are intended to work with CSS. As the standards are defined and finalized the standards bodies carefully consider the impact that a new standard will have on older browsers that may be around longer than we would like and for new browsers that do not implement the recommended standards completely or in a timely manner. A carefully planned CSS document can maneuver the various browser versions and platforms by leveraging the level of standards they employ. It is not always easy, but the more you know the easier it becomes.
Adapting for IE8
The best bet is to read books by Eric Meyer, Dave Shea, Molly E. Holzschlag and Jeffrey Zeldman. These authors have been leaders in web standards and have gathered together many great techniques which are covered in their books that leverage the way CSS and the various browser versions work to your advantage. In fact, if you have not read these books you should make it a priority to start reading them once the IE8 Beta is released. With what you will learn you will be able to carefully craft your web sites to work as you expect in IE7, IE8, Firefox and other browsers like Safari and Opera with much less effort and frustration.
A good rule of thumb going forward with web work in the next 6 months will be, if it works in Firefox 3 it will work in IE8. You just have to make sure you are using valid XHTML and CSS. Use the Markup Validator and CSS Validator frequently. Most layout problems are simply due to a mistake in the markup or CSS that a validator will identify immediately and save you hours of hair pulling.
What is next?