Supporting Internet Explorer 8 in Foundation 5

Foundation 5 is a great CSS framework, providing lots of useful functionality that makes building modern websites easier.

However, Foundation 5 doesn't provide support for IE8, although we can make up for this with a few polyfills and some well-placed conditional comments.

Internet Explorer 8 lives on

Although the days of IE6 are pretty much past, and IE7 can be similarly disregarded as the audience share for a given site is often below 1%, IE8 is different.

IE10 can be regarded as Microsoft's first evergreen browser. Technically, their adoption of a self-updating browser means that users on Windows 7 using IE9 got upgraded to IE10, however users on Vista using IE9 and users on XP using IE8 didn't.

Thus, users on Windows XP who are determined to use Internet Explorer are left with IE8 as the only option until they either adopt a non-Microsoft browser, install a new operating system, or — more likely — move to a new computer.

Even if Windows XP is now unsupported, its share as of writing this remains at around 25% of the browser market, meaning that there will be a significant number of users visiting your site who will be using IE8 for sometime to come.

Therefore, we need to make sure that any site we make will be usable by these XP users running IE8, and this means that we need to do a little bit of work to support:

  • Media queries
  • HTML5 elements
  • CSS3 decorations, such as rounded corners (border-radius)

Media queries aren't actually that important, as IE8 is only available on desktop systems, and most users will use their browser viewport at its maximum size. However, we do want to try and allow a consistent experience where possible across browsers and operating systems.

The solution we use is detailed below.

Polyfills

Thankfully, through the hard work of others, we can fulfil our requirements of Foundation 5 support for IE8 through the use of a number of JavaScript polyfills.

  • the use of NWMatcher to provide CSS3 selectors (for IE6 and IE7)
  • the use of selectivizr to provide CSS3 pseudo-classes and attribute selectors (for IE6 and IE7)
  • the use of html5shiv to provide HTML5 DOM elements (for IE6–IE8)
  • the use of respond.js to provide min/max-width CSS3 Media Queries (for IE6–IE8)
  • The use of CSS3 PIE to provide support for CSS3 decoarations (for IE6–IE9)

We also need to ensure that anything less than IE9 uses the legacy jQuery 1.x.x, while anything from IE9 onwards can use jQuery 2.

If we wish to support REMs, then we can use the REM-unit-polyfill, though be aware of the following note:

There is currently a bug in the REM polyfill that seems to stop it working on an element if a property the element includes the !important rule, in the following screenshots I've just removed !important from .button in foundation.css, until the bug can be fixed.

Conditional comments

We wrap the polyfills in IE conditional comments, such that the specified version/s of IE will detect and load them, but other IE versions and other browsers will simply ignore them, e.g.

<!--[if IE 8]>
    <html class="lt-ie9" xml:lang="en">
<![endif]-->

In the case where we want to target a version of IE but also ensure that normal browsers pick up the polyfill, we use a little trick to reveal the contents of the conditional comments to these browsers:

<!--[if gt IE 8]>
    <!-->
    <html xmlns="http://www.w3.org/1999/xhtml">
    <!--
<![endif]-->

In the above code, the <!--> acts to close the HTML comment started on the previous line for normal browsers, while the <!-- reopens the comment. In this setting, these two lines effectively mean nothing to IE, but serve to close off the beginning and ending IE condtional comments to other browsers.

The full boilerplate for our solution is as follows:

<!DOCTYPE html>
<!--[if IE 8]>
    <html class="lt-ie9" xml:lang="en">
<![endif]-->
<!--[if gt IE 8]>
    <!-->
    <html xmlns="http://www.w3.org/1999/xhtml">
    <!--
<![endif]-->

    <head>
        <meta content="IE=Edge" http-equiv="x-ua-compatible" />
        <meta charset="utf-8" />
        <meta content="width=device-width, initial-scale=1.0" name="viewport" />
        <meta content="en" http-equiv="content-language" />

        <title>Our web site</title>

        <!--[if lt IE 8]>
            <script src="//s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script>
            <script src="//html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js"></script>
        <![endif]-->

        <!-- REM-unit-polyfill is not available on a CDN, so serve locally -->
        <!--[if lt IE 9]>
            <link href="css/ie.css" rel="stylesheet" />
            <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
            <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
            <script src="js/rem.js"></script>
        <![endif]-->
    </head>

    <body>
        <!--[if lt IE 9]>
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
            <script src="//cdnjs.cloudflare.com/ajax/libs/css3pie/2.0beta1/PIE_IE678.js"></script>
        <![endif]-->
        <!--[if gte IE 9]>
            <!-->
            <script src="//code.jquery.com/jquery-latest.min.js"></script>
            <script src="javascript/foundation.min.js"></script>
            <script src="javascript/foundation.topbar.js"></script>
            <script src="javascript/foundation.clearing.js"></script>
            <!--
        <![endif]-->

        <!--[if eq IE 9]>
            <script src="//cdnjs.cloudflare.com/ajax/libs/css3pie/2.0beta1/PIE_IE9.js"></script>
        <![endif]-->

        <script src="javascript/app.js"></script>
    </body>

</html>

Before and after

Before these improvements are made, viewing Foundation 5 in IE8 looks like this:

Once we've made the above improvements, we get a much more pleasing experience:

The inspiration for the above was provided by Jame's Cocker's post on the Foundation Forum.