Simple Browser Detection and Redirect with Conditional Comments

There are numerous ways to detect a users browser and then do with them as you wish (redirect, alternate style sheets, etc). Most of this involves JavaScript or server side scripting of some flavor. All of which is fine and good, but I wanted an even simpler way to detect a users browser, without any client or server side scripting. So, I created a simple way to do this using conditional comments. Of course, when I did this, I thought I was a genius for about 2 seconds until I realized that it was so simple, that probably lots of people have done this… so I did a quick Google search and found exactly that. However, no two approaches are exactly the same, and here is my truly unique (because it came straight from me brain) approach.

For my current project (in development), Microsoft IE6 and IE7 will not be supported browsers (big shock I know). So I want my conditional comments to target any IE browser less than version 8 and prevent the user from accessing the site, and offer them alternatives to either, upgrade their browser, or switch to a more modern browser.

Now, before we get started, I must state that I did not spend a ton of time trying to make this aesthetically pleasing. If the site visitor is using IE6 or IE7 to access a website, then they should not be expecting a whole lot… there are no rounded corners, fancy fonts, transparencies, etc.  Just a bare bones message to get the point across.

Step 1 - In the body of the page, right before the closing body tag , I put the following html:

<!--[if lt IE 8]>
<div id="IEredirect">
<div id="IEredirectText">
<p>You are attempting to view this website using an outdated browser.  To view this site, please upgrade your version of Internet Explorer or consider using a more modern browser via the links below.</p>
<br />
<p id="safari">
<a href="http://www.apple.com/safari/">Apple Safari&lt;/a>
</p>
<p id="chrome">
<a href="http://www.google.com/chrome/">Google Chrome</a>
</p>
<p id="firefox">
<a href="http://www.mozilla.com/en-US/">Mozilla Firefox&lt;/a>
</p>
<p id="ie8">
<a href="http://www.google.com/toolbar/ie8/index.html">Microsoft IE8</a>
</p>
</div>
</div>
<[endif]-->

Step 2 – In my linked CSS stylesheet I apply the following styles to the unique ID’s:
/*begin IE redirect*/

#IEredirect {
position: absolute;
width: 100%;
height: 100%;
background-color: #000000;
z-index: 1000;
left:0px;
top:0px;
background: url(../images/bgBlack30p.png) repeat fixed center top;
}

#IEredirectText {
position: relative;
width: 500px;
height: 400px;
margin-left: auto;
margin-right: auto;
text-align: left;
background-color: #ffffff;
margin-top: 100px;
border-bottom: solid 2px #000000;
border-top: solid 2px #000000;
border-left: solid 2px #000000;
border-right: solid 2px #000000;
}

#IEredirectText p, ul {
padding-top: 20px;
margin-right: 20px;
margin-left:20px;
}

#IEredirectText a {
margin-left:60px;
font-size: 20px;
}

#IEredirectText a:hover {
color: blue;
}

#IEredirectText #safari {
height: 50px;
background: url(../images/icon_safari_bw.png) no-repeat left 0px;
}

#IEredirectText #safari:hover {
background: url(../images/icon_safari_color.png) no-repeat left 0px;
}

#IEredirectText #chrome {
height: 50px;
background: url(../images/icon_chrome_bw.png) no-repeat left top;
}

#IEredirectText #chrome:hover {
background: url(../images/icon_chrome_color.png) no-repeat left top;
}

#IEredirectText #firefox {
height: 50px;
background: url(../images/icon_firefox_bw.png) no-repeat left top;
}

#IEredirectText #firefox:hover {
background: url(../images/icon_firefox_color.png) no-repeat left top;
}

#IEredirectText #ie8 {
height: 50px;
background: url(../images/icon_ie_bw.png) no-repeat left top;
}

#IEredirectText #ie8:hover {
background: url(../images/icon_ie_color.png) no-repeat left top;
}

Step 3 – I put the following images in the above referenced “images” directory:

(don’t forget that last little square there)

Now when someone visits the page, they will see the image below with a 30% transparent black overlay background (in IE7) or a white background (ie6).  If they want to upgrade their browser, all they have to do is click one of the icons listed.  On hover, the icon goes from black & white to color.

Gregg – http://richterwebdesign.com


This entry was posted in CSS, Development, html and tagged , . Bookmark the permalink.

5 Responses to Simple Browser Detection and Redirect with Conditional Comments

  1. Eric says:

    Love the fix. Just a few issues with the tutorial, this is not copy and paste. The html code has fake quotes. Meaning they are end quotes (”), not regular quotes (“), therefore is not functional. The icon/image names in the CSS are not named accordingly to the ones on the site when they are dragged and dropped. Anyway, thanks!

  2. gregg says:

    Eric, thanks for the comment! I’ll put together a sample download folder with all the appropriate code and images sometime soon.

    Gregg

  3. So I’m revamping my site and I’m using your redirect (which I will credit you in the CSS comments). I’m having a funny issue, when I put the CSS in it screws up my nav elements. Even if the html is not in the document it will still mess with it. It looks like it is pushing just the nav elements (inline list) over 15px. I can send screenshots.

    What do you think?

  4. Found it.
    The comma after the “p” was screwing it up.

    #IEredirectText p, ul {
    padding-top: 20px;
    margin-right: 20px;
    margin-left:20px;
    }

  5. gregg says:

    Good catch Aaron.

    Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>