Introduction

Even hearing the name "Internet Explorer 6" can make the most seasoned web developer cringe. While its prominence has steadily dropped since the introduction of IE7, it still holds approximately 25% of the browser market. And this means that for the time being, we are stuck supporting its quirky behaviour. Fortunately, while we can not avoid IE6 entirely, we can detect its presence both on the client side using JavaScript, and in our server side code using the .NET framework class HttpBrowserCapabilities.

Market Share by Browser (September 2008)

What Is Being Done

There are strong initiatives to drop support for IE6 completely, including sites that give you scripts to nag your users to upgrade. While we wouldn't recommend going this far, if your site simply can't function properly for an IE6 user, it might make sense to politely inform them that they must upgrade before reaching your service.

Example

Internet Explorer 6 is no longer supported by this website. Please upgrade your web browser to Internet Explorer 7 to experience the full capabilities of our offerings. We apologize for any inconvenience this may have caused you.

What You Can Do For Now

While IE6 will continue to lose market share, while it survives we must deal with its intracacies to provide the best user experience we can.

There are two approaches we will address. The first is on the client side using JavaScript.

MSDN suggest the following approach.

Client Side Solution

function getInternetExplorerVersion()
{
    var rv = -1;

    if (navigator.appName == 'Microsoft Internet Explorer')
    {
        var ua = navigator.userAgent;
        var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
        if (re.exec(ua) != null)
            rv = parseFloat( RegExp.$1 );
    }

    return rv;

}

function checkVersion()
{

    var msg = "You're not using Internet Explorer.";
    var ver = getInternetExplorerVersion();

    if ( ver > -1 )
    {
        if ( ver >= 7.0 ) 
        msg = "You're using a recent copy of Internet Explorer."
    else
      msg = "You should upgrade your copy of Internet Explorer.";
    }

    alert( msg );

}

There are two parts to this implementation of version detection.

The first function, getInternetExplorerVersion returns a floating point value that corresponds to the version of IE. For example, getInternetExplorer might return 5.0, 6.0, 7.0, etc.

To take advantage of this function, checkVersion compares this value to 7.0, which corresponds to IE7. If you are interested in continuing to support IE6, but denying IE5 users, change this value to 6.0.

So, that was the client side solution. Now let's look at its server side counterpart.

Server Side Solution

private float getInternetExplorerVersion()
{
  
    float rv = -1;
    System.Web.HttpBrowserCapabilities browser = Request.Browser;
    if (browser.Browser == "IE")
    rv = (float)(browser.MajorVersion + browser.MinorVersion);

    return rv;
}

This function takes advantage of the .NET class HttpBrowserCapabilities, which provides various details about the capabilities of the current browser.

A full list of HttpBrowserCapabilities member variables can be found HERE.

Why Is This Useful

One useful implementation of this technique pertains to IE6's lack of native support for transparent PNGs. If we have an image that currently points to a transparent PNG, then IE6 users will not see what we expect them to. However, if we have a standard PNG (without alpha transparency) waiting in the wings, we can swap it in at runtime based on detecting their browser version.

Swap Image for IE6 Only

private void Page_Load(object sender, System.EventArgs e)
{

    double ver = getInternetExplorerVersion();

    if (ver > 0.0)
    {
        if (ver < 7.0)
        PNGImage.ImageUrl = "notransparency.png";
    } 

}

While this example is simple, it underscores the point that we can provide a varying experience to our users depending on their browser capabilities.

We hope that this tutorial has given you the confidence to gracefully deprecate your cutting edge technology for IE6 users, and leave it in tact for the rest of us!