Dear Reader,
We noticed you're using Microsoft Internet Explorer 6.0. While this website does support your browser, we strongly encourage you to upgrade to the latest version of Internet Explorer or better yet, go Get Firefox or Get Chrome so you can see what the internet actually looks like.
Browser Statistics on Wikipedia
IE Market Share
Multiple IE
$_SERVER
strstr
explode
array_shift
array_combine
Believe it or not, 18.85% of web browsing still occurs in an eight year old browser called Internet Explorer 6. It's two year older brother IE 5 only commands .04% of the public's browsing, so when are we going to put the kibosh on IE6?
Hopefully today, after reading this call to arms, you are going to go home to your websites and add in some code to every page that will help with the oddly painful final good bye. Let's help everyone upgrade by making it really hard not to! I mean these people don't even know what the internet looks like. Let us reach down into the muddy squalor and pull our users out of the ghettoized web browsing experience. It is our duty.
There are many interface approaches to choose from, but this one is my personal favorite. I feel like it really draws the user in and makes them feel safe and forces them to make a conscious decision in order to continue using the site. Give the Toggle Message Demo a shot before we do anything else.
We can achieve this in a number of ways as well. There's the javascript approach, there's .htaccess mod_rewrite
(RewriteCond
/RewriteRule
) and so on, but here I'm going to offer the plain old php and html approach. No matter how we choose to do it, we're going to be looking at the user agent profile to determine browser type and version and then doing something unique based on that.
The user agent profile is a bit of data about a browsing agent in the network. Spam bots have them, search engine spiders have them, and so do you. For instance, here's yours:
CCBot/2.0 (https://commoncrawl.org/faq/)
If you were browsing with Internet Explorer 6, you would've seen something like this:
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30)
This one happens to be from a windows machine running Multiple IE. But what ever, the system information may be, only IE browsers will contain the 'MSIE' + '%version #%' string and that is what we are going to look for and serve a message based on.
Your user agent string is available via the PHP super-global $_SERVER, seen here:
Easy, right? Now we can use this information to determine if the visitor is using IE and what version. Since we want to display a different message based on which version is being used, we'll need to parse of the string to figure out what we're working with.
<?php $browser["agent"] = $_SERVER["HTTP_USER_AGENT"]; //Tells you everything you need to know about the visitor and and puts it in the browser variable $browser["version"] = array_combine( array("name", "number"), explode(" ", array_shift( explode( ";", strstr( $browser["agent"], "MSIE" ) ) ) ) ); } else { $browser["agent"] = null; $browser["version"]["name"] = null; $browser["version"]["number"] = null; $browser["version"]["int"] = null; } ?>
Let's walk through that shall we?
$browser
array, at the key agent
.
$browser
array, at the key version
.
This will be an array. Starting from the inside:
strstr( $browser['agent'], 'MSIE' )
explode(';', [substring])
(this will split the string at any occurence of ';')array_shiftarray_shift
explode(' ', [first element])
array_combine
, assign the last explosion to array keys array('name', 'number')
$browser['version']
array, at key int
null
so we dont trigger errors.Now lets do something with that. We'll say, if the browser is IE and the version is 4.0, 5.0, 5.5, or 6.0 is found, serve a message inviting the user to upgrade, or get Firefox.
<?php if( $browser["version"]["name"] == "MSIE" AND $browser["version"]["int"] <= 6 ) { //the following block of html gets rendered if the visitor is browsing with IE 4, 5, 5.5 or 6 ?> <div class="fail"> <div class="container"> <p>Dear Reader,</p> <p> We noticed you’re using Microsoft Internet Explorer //renders the current version number of IE based on our semantic $browser variable values ?>. While this website does support your browser, we strongly encourage you to <a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">upgrade</a> to the latest version of Internet Explorer or better yet, go <a href="http://www.mozilla.com/firefox/">Get Firefox</a> or <a href="http://chrome.google.com/">Get Chrome</a> so you can see what the internet actually looks like. </p> <br /> <br /> Love, <br /> -the html times </div> </div> <?php } ?>
Now we'll close that if statement statement and open the second condition for showing a message:
<?php if( $browser["version"]["name"] == "MSIE" AND $browser["version"]["int"] >= 7){ //the following block of html gets rendered if the visitor is browsing with IE 7 or 8 ?> <div class="fail"> <div class="container"> <p>Dear Reader,</p> <p> We noticed you’re using Microsoft Internet Explorer //renders the current version number of IE based on our semantic $browser variable values ?>. ?> While this website does support your browser, we strongly encourage you to go <a href="http://www.mozilla.com/firefox/">Get Firefox</a> or <a href="http://chrome.google.com/">Get Chrome</a> so you can see what the internet actually looks like. </p> <br /> <br /> Love, <br /> -the html times </div> </div> <?php } ?>
If you run that bit of php at the top of any page, you'll get the unstyled message in a div
with a class of "fail" when visiting in IE. If you'd like to use the styles that we use on the html times (viewable by toggling the demo at the top of this page), than copy this class into you're stylesheet:
.fail{ background:#FBE3E4;border-bottom:2px solid #FBC2C4;color:#8A1F11; font-size: 16px; margin:0 auto; padding:1em 0; z-index:100; }