It is clear that IE6 is not going away just yet, at least not for mainstream websites targeting a large (and non-tech) audience. Quite some time and effort is put into making design and functionality work in IE6 which otherwise works perfectly well in more modern browsers. This is inefficient, but just because IE6 support cannot be dropped does not mean the cause is lost. The key is to not think black and white, instead think in terms of progressive enhancements.
The fundamental concept of progressive enhancements are that anyone may use the functionality, but a more enhanced version is available for those with more advanced browsers.
Having a complex feature with pixel perfect appearance and functionality in all browsers usually means that you implement it on standard compliant browsers, and then provide workarounds to make it work in Internet Explorer (usually a significant amount of work). The key to reduce this waste of time is not to skip IE6 entirely (which may not be an option), but to let go of having everything exactly the same in all browser. Instead, provide the basic functionality to IE6 but add the shinyness and bling to newer browsers.
The old approach
Old (complex) InfoBox implementation
And it should look exactly the same in all browsers. This single line of requirement resulted in the implementation becoming one of the largest and most complex modules in the whole mapping application. Using css sprites for the corners, off-screen rendering to estimate size, lots of IE workarounds and so on… probably 60% of the development time were spent on compatibility issues.
The modern way
I recently had the opportunity to rewrite the info box implementation, using a much smarter approach. The key was that the basic functionality should work in IE6, but it shouldn’t necessary look the same.
This resulted in an implementation that was 1/5 of the number of lines of the original, didn’t require additional images for the corners (reducing number of HTTP requests), no IE hacks and was a lot more flexible.
By using border-radius and box-shadow available in CSS3 the implementation was very simple, and we even got a drop shadow for free.
InfoBox in modern browsers
Using an old or non-standard browser like Internet Explorer resulted in the following look.
InfoBox in Internet Explorer
Still functional and useful, but without the extra visual appearance. However, instead the development time was dramatically reduced and the implementation dead easy instead of very complex.
This is all pretty straightforward, why do it any other way? Usually the challenge is not technical, but rather to communicate this to the stakeholder. Most organizations simply state “Support IE6+, FF2+, …” implicitly resulting in requirements demanding exactly the same functionality pixel by pixel between the supported browsers.
This is where it gets wrong and the challenge is to change it! It is not about being supported or not supported – it is about to what extent should a browser be supported! IE6 may be supported in a way that the core functionality is useful, but it may look less attractive and some fancy (but non critical) features may be removed.
To what extent each browser should be supported should be a conscious and strategical choice! The benefits are huge with productivity gains, less complex code and faster time-to-market. And it is up to you, as a developer, to communicate this and make it happen!