Cope with old versions of Internet Explorer

Purists usually insist that we should never test for browser brand or version, but instead test for specific browser capability.

That may have been true in the past, but nowadays unless we are using cutting edge functionality we know pretty much where to draw the line. There is Internet Explorer 7 or less, and there is everything else, occasionally with exceptions for later versions of Internet Explorer. Unless you need to be pedantic about obscure minority browsers no-one has ever heard of and are only used by 0.0001% of geeks who should know better, a fall back capability for IE7 is the only case I personally ever consider.

Even then, for many sites it may not be worthwhile and I would only bother to put that capability into the view of a page, never in the edit dialogue or in dashboard pages.

The usual method of doing this in HTML and CSS is to use IE conditional comments. Conditional comments can even be used to set an IE specific style that changes the whole appearance of a site, a sort of precursor to modern responsive layout.

<!--[if lte IE 7 ]>
<style>
.bad-ie{
  ...
  ...
}
</style>
<div class="bad-ie">
...
...
</div>
<![endif]-->

The great thing about conditional comments is that we can just put them into the HTML and let the browser sort them out. Browsers other than IE treat them as comments, while IE processes the condition and inserts the extra HTML.

In JavaScript if you need to adjust or degrade functionality for old versions of IE, there is a handy jQuery browser property.

<script type="text/javascript">
$(document).ready(function(){
  if ( $.browser.msie && $.browser.version < bad_iev) {
    // do old IE specific JavaScript
  } else {
    // do full featured JavaScript
  }
});
</script>

Alas, from jQuery 1.9 this has been removed and we would need the jQuery.migrate plugin to regain it. So while it works with concrete5 now, it may not work in the future. At some point concrete5 will migrate to a version of jQuery that does not support $.browser and code that depends on it may cease to function.

For server side code, PHP provides a method that reads the value of the http user agent, so a block controller could do something like:

// In the block controller
public function on_page_view(){
  $browser = get_browser();
  if($browser->browser == 'IE' && $browser->majorver <= 7) {
    $this->bad_ie_flag = true;
  }
}

It looks simple enough, but unfortunately the user agent string is not 100% reliable. Browsers and firewalls can be configured to not provide it for security. Sometimes a web server is configured not to pass it on to PHP. Even having detected the browser, getting that information to a section of JavaScript in the view is a complication that is unnecessary. So overall, if a problem can be solved with conditional comments, that usually a much cleaner and more reliable solution.

If you are developing a theme, you can put conditional comments into the header to load IE specific style sheets, declare styles, or simply to attach a flag class to the html tag or body tag when an old IE version loads the page.

<!--[if lte IE 7]><body class="bad-ie"><![endif]-->
<!--[if gt IE 7]><!--><body><!--<![endif]-->

CSS can then respond to the enclosing class and JavaScript can detect the class and adapt accordingly. It’s a reliable method of inserting an IE version specific marker into a page, but is only really convenient if you are a theme developer.

An equivalent if you are developing a block, so don't have access to the header or body tag, is to tack a conditional comment defining an empty div to the end of the page just for old IE versions.

// In the block controller
public function on_page_view(){
  // insert a div as a marker for old ie versions
  $this->addFooterItem('<!--[if lte IE 7 ]><div class="bad-ie"></div><![endif]-->');
}

Then, wherever you need to know about old IE versions in JavaScript, you can do:

<script type="text/javascript">
$(document).ready(function(){
  if($("div.bad-ie").length){
    // do old IE specific JavaScript
  } else {
    // do full featured JavaScript
  }
});
</script>

You can even take this further and use the script to then add a flag class to the html tag or body tag to facilitate responsive css.

<script type="text/javascript">
$(document).ready(function(){
  if($("div.bad-ie").length){
    $('body').addClass('bad-ie');
  } 
});
</script>

Tags