Dealing with legacy browsers

Within the question "mobile-first or desktop-first?" there's an area that we need to cover about legacy browsers. Each project, each client, and their corresponding analytics (if they have any, which they should) have different requirements that affect how we are supposed to deal with those older browsers.

If you're building with a desktop-first approach, your current workflow should remain the same as this is pretty much what we've been doing since before RWD became practically mandatory.

This means that you would still use something like this:

header {
    //Desktop-first declaration
    width: 50%;
    @include forSmallScreens(768) {
      //Target small screens (mobile devices)
      width: 100%; }
}

This compiles to the following:

header {
    width: 50%;
}

@media (max-width: 48em) {
    header {
      width: 100%;
    }
}

IE7 and IE8 do not support media queries, but the preceding code will work just fine because the header { width: 50%; } rule is not inside a media query.

However, if you're doing mobile-first, then header { width: 50%; } is going to be inside a media query so that IE7 and IE8 won't be able to see that rule:

.article {
    //Mobile-first declaration
    width: 100%;
    //IE7 and IE8 won't be able to see this rule.
    @include forLargeScreens(768) {
      width: 50%;
    }
}

This compiles to the following:

header {
    width: 100%;
}

@media (min-width: 48em) { 
    header {
      width: 50%;
    }
}

What do you do then? The solution is quite simple: use the Respond.js script.

How to use Respond.js for RWD

Respond.js is a type of script called a polyfill. A polyfill, according to the one who coined the term in the first place, Remy Sharp, is a piece of code that provides the technology that we, web developers, expect browsers to provide natively.

In web design and development, polyfills are more abundant as JavaScript implementations, in our case, Scott Jehl's Respond.js. But we could also say that there are polyfills in CSS too, for example, the well-known reset.css from Eric Meyer and Normalize.css from Nicolas Gallagher and Jonathan Neal.

The Respond.js script is a polyfill that makes legacy browsers (IE6/7/8) support a particular CSS feature they were never made to support: media queries.

You can download Respond.js from https://github.com/scottjehl/Respond.

Tip

Although I'm suggesting the use of a polyfill, we need to be mindful of the additional HTTP request the site/app needs to make in order to fetch this JavaScript file. The fewer requests our sites/apps make, the faster they are going to be creating many benefits such as improved user experience and positive SEO impact.

So, here's what you need to do:

Make sure the call to Respond.js is after the call to your CSS file(s) (hopefully it is just one CSS file).
Call the Respond.js script.

Tip

Performance best practices recommend placing nonessential scripts at the bottom of the markup right before the closing </body> tag. Since Respond.js is aimed at legacy browsers, let's go ahead and do that. Another benefit of placing scripts at the bottom of the markup is that it helps to avoid blocking the rendering of the page.

Here's our example HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Mastering RWD with HTML5 &amp; CSS3</title>
    <link href="styles.css" rel="stylesheet">
</head>
<body>
    <header>Logo goes here…</header>
    <article>Content goes here…</article>
    <script src="js/respond.min.js"></script>
</body>
</html>

In our styles.scss file, we type the following lines:

//Mobile-first declaration
article { background: red;
    //Target screens 640px wide and larger
    @include forLargeScreens(640) {
        & { background: green; }
  }
}

This compiles to the following:

article {
    background: red;
}

@media (min-width: 40em) {
    article {
         background: green; 
    }
}

So, when you resize an IE7 or IE8 browser window, it will be able to display a red background if the window width is 640 pixels or less, and a green background if the window is 641 pixels or more.

The days of an IE-specific style sheet are dead

I've avoided creating IE-specific style sheets since I started writing CSS. The reasons for this are simple:

File management: The fewer files there are to manage when going to production, the smoother every process goes; not to mention being less prone to errors.
Scalability: If you need to add, remove, or edit a style, you and your team know that the final change(s) needs to end up in your main and only CSS file, in our case, the SCSS file.
Organization: Keep everyone on the same page when adding, removing, or editing IE-specific styles in the right CSS file(s), in our case, SCSS file(s).
Performance: One less HTTP request is a good thing, a very good thing. Anything we can do for performance, no matter how small, can go a long way for a good user experience; not to mention a fast website is good for SEO.

Other benefits of not using an IE-specific style sheet

In legacy browsers, page rendering is not blocked when they try to download the IE-specific style sheet. Also, troubleshooting is easier. So what do we use then?

There are several ways to deal with IE by keeping everything in one style sheet:

Use CSS hacks (not recommended).
Use Modernizr.js.
Use conditional classes in the <html> tag.

Let's talk a bit more about a popular method, using conditional classes.

Use conditional classes in the <html> tag

Paul Irish's 2008 article (http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/) specifies a method that I recommend for several reasons:

It's easy to implement; it's just a matter of copying and pasting this block of markup at the top of our HTML file.
It's not intrusive, since there's no need for anyone in the chain (users, browsers, servers, and us) to deal with additional files.
It doesn't require JavaScript to work; if a visitor has JavaScript unavailable or disabled, everything will still work.

This is the one I use:

<!--[if IE 8]> <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->

Tip

IE10 and above does not support conditional comments anymore, that's why there isn't any mention of IE10 in the conditional classes markup.

With the preceding conditional classes in place, targeting a specific IE (IE7 in this example) looks like this:

.ie7 nav li {
    float: left;
}

If we need to target all IEs, we would do this:

.ie7, .ie8, .ie9 {
    nav li {
        float: left;
    }
}

This compiles to the following:

.ie7 nav li, .ie8 nav li, .ie9 nav li {
    float: left;
}

For all other browsers, we would do this:

nav {
    display: flex;
}

It doesn't matter which of the methods you use, Modernizr.js or conditional classes, it's all personal preference. You'll be doing the right thing by using either of those two methods.

Remember, avoid CSS hacks at all costs. As web designers and web developers, we have a moral responsibility of creating a better web for everyone.

Previous Chapter

Sass mixins for the mobile-first and desktop-first media queries

Next Chapter

How to deal with high-density screens

Table of Contents for Mastering Responsive Web Design

Dealing with legacy browsers

How to use Respond.js for RWD

Tip

Tip

The days of an IE-specific style sheet are dead

Other benefits of not using an IE-specific style sheet

Use conditional classes in the <html> tag

Tip

Table of Contents for
Mastering Responsive Web Design