Browser Upgrade Message User Control

Older, obsolete browsers like Internet Explorer (yes, IE is obsolete) and Netscape 4 can be frustrating to web designers who want to make beautiful cross-platform web sites. A web developer's instant urge is to herd users towards a more modern browser, one that handles standards like CSS better. Concepts like MOSe, and organizations like The Web Standards Project are good ways to help with the transition. I like to help things along by using this handy ASP.NET control.

Simply add this control to your pages like this:

<%@ Register TagPrefix="brh" TagName="browserswitch" Src="~/browserswitch.ascx" %>
...
<brh:browserswitch runat="server" />

When visited by anyone running any version of IE, Opera 6 or below, or Netscape 4 and below, they will recieve a message (a div tag with the id "browserswitch", so you can style it nicely) that politely points out some modern browsers appropriate to their system - Firefox and Opera 8 for Windows, Safari and Firefox for Mac OS. In my eyes this is better than putting a warning in a hidden div, since even without a style sheet, proper user agents won't see the "ad".

Windows users will see:

Are you missing out on the web at its best? Try Mozilla Firefox or Opera 8 and surf the web faster and smarter!

Mac OS users will see:

Are you missing out on the web at its best? Try Safari or Mozilla Firefox and surf the web faster and smarter!

For a live demo of this control, simply load this page with an old browser like Internet Explorer and look at the very bottom of the page. Note that in a browser such as Firefox, there is no message displayed on the page, nor is there a message hidden in the source! Try visiting this page with your mobile phone or PDA - it won't bug you!

Step-By-Step:

  1. Unzip the archive and copy the two files browserswitch.ascx and browserswitch.ascx.cs into your web site's directory.
  2. Register the tag, as shown in the code above.
  3. Put the tag where you want the message to display, as shown in the code above.
  4. Add a style rule in your CSS for "div#browserswitch" to make the message look pretty.