Brennan’s Blog

It has been a long time since we have seen a new release of Internet Explorer. As I look up the history of Internet Explorer I see IE 5.5 was released in 2000 while IE 6.0 was released in 2001. Since then there have only been multiple stability and security related updates but virtually nothing to address problems with CSS compliance.

The push to deliver IE7 has driven by security concerns. When the IE team was gearing up to produce this release the web community demanded fixes for rendering bugs and the team has done their best to provide those fixes. Some attention has also been put into Javascript now that AJAX has become a very popular feature of modern websites.

With 5 years to prepare for IE7 we should be ready. I believe I am all set and have been able to adapt my own website very easily for handle IE7. What I have done follow the techniques and advice from Jeffrey Zeldman, Eric Meyer, Dave Shea and Molly E. Holzschlag. They have authored various books the past several years which I have found to be invaluable.

• Designing with Web Standards (Zeldman)
• Eric Meyer on CSS: Mastering the Language of Web Design (Meyer)
• The Zen of CSS Design: Visual Enlightenment for the Web (Shea, Holzschlag)

If I had to boil down their collective advice, I would say it is to understand what you can do with web standards and develop your websites using standards driven techniques. These standards were carefully planned with the goal of introducing new features in such a way that it would not force you to break legacy browser support. It does not always seem easy, but it can be quite elegant if you know how to employ the right techniques. Due to the level of standards support in the browsers available today it is realistic to walk the standards walk. That gives us great options. And generally I choose between adapting or gracefully degrading.

Adapting

The CSS specification requires a web browser to ignore the rules it does not understand and then continue along normally. This is a powerful feature you can use to allow your website to adapt for newer browers. By exploiting the fact that newer browsers can understand certain CSS syntax while older browsers ignore it, you can effectively provide different rules to different browsers without using tricky Javascript methods or server-side content switching. Techniques to exploit this feature can allow you to make very minor adjustments to adapt for legacy browser bugs or to carry out dramatically different layouts.

You can see a brilliant example of this CSS feature in action at the CSS Zen Garden. That site is a showcase for CSS designs and what is possible when the same markup references a different stylesheet. In particular, Gemination makes use of the fact that IE6 does not recognize a newer CSS selector syntax which Firefox does.

Gemination in Firefox, IE7 and IE6

With CSS you group rules together using a selector, and IE6 only supports the most basic selector syntax. Firefox supports a CSS selector which IE6 does not which allows Gemination to do this adaptation. Specifically, it uses a child selector. The rules Gemination applies to Firefox are done with a child selector while the simple selector provides IE6 with different instructions to render the page. The change is dramatic, but controlled.

You will notice that IE7 recognizes the CSS rules which were only applied to Firefox previously. I personally use this feature to correct layout bugs in IE6. When I know I have done the math right to get a layout to fit perfectly and it still does not work in IE6 I know it is due to a bug. So I set the CSS rules properly for Firefox which handles the layout properly, and employ this technique to give IE6 a different set of dimensions in the same stylesheet using fully compliant CSS.

Gracefully degrading

The strategy of gracefully degrading your website assumes you are going to use modern techniques which will work in the modern browsers, but put little effort into adapting for older browsers. And it is possible to help these legacy browsers to at least retain some basic functionality for your website.

This technique is normally employed because a website is going to start using a new layout with CSS instead of a heavy table layout. If an older browser does not handle or recognize the CSS you are using, then it will not appear as you intended. But what if you could help the website to degrade gracefully? If the CSS is positioning portions of the page in absolute positions it will look very different in a browser which does not apply those positioning rules. But if you were to create the markup of the page to support the most basic HTML layout and then stylize it with CSS to make it look as you intend, you have created a site which may perform well in legacy browers. And it may also work better with search engines. This strategy has been covered very effectively in Zeldman's books and through his website, A List Apart.

These and other techniques I have employed to create cross-browser capable websites will serve me well as I now have to support IE6 and IE7. But you have to wonder how important it will be to support IE6 once IE7 is out. Back 1999 you knew that it would take 6 months to a year for the majority of your website visitors to get the latest release of their chosen web browser. Since IE7 is touted as a security upgrade and is included with the automatic Windows update system, it will be dispersed more rapidly than any other release. In a matter of a week we may see IE6 drop from around 90% to 10% and IE7 jump to 80%. With such a huge shift in a short period it could be disruptive, but you can fix your websites now. If you have not been using the above strategies you may have a lot of work ahead of you. You may consider learning these strategies and employ them during this transition because it will not be long before Microsoft wants to push out IE7.5. And you will not know what level of CSS compliance it will handle. You should make your website conform to standards now, so you will not have headaches later.

[ Web Development Tools for the Power Developer ]