IE8, Respond.js and Wordpress

I had a hell of a time spending an afternoon trying to get my custom Wordpress theme (which is based off of the excellent Starkers framework) to display properly in IE8 and below by using Respond.js, but I finally got it to work and though I'd share.

Media Queries and Respond.js

I've spent the past few months building my first responsive site using CSS media queries and a mobile-first approach. After creating three views that I was satisfied with, I was let down yet again by IE, learning that IE8 and below can't interpret media queries. A quick search led me to Respond.js, a tiny Javascript file that enables media query support in IE8 by reinterpreting the stylesheet after it has been loaded into a format that IE8 can understand. Rad!

So, I included it under my CSS file as instructed:

wp_register_script('kiss-respond', get_template_directory_uri(). '/js/respond.min.js');
wp_enqueue_script('kiss-respond');

Easy enough. Refreshed my IE8 instance on Browserstack, and..!

..nothing.

I ran my HTML and CSS through a validator, which gave no clues as to what the issue was.

Reading through the issues list at the github repo made a few things clearer:

  • CSS files can't be read if they are included using @import or are inline styles. Don't do that. Use a standard <link> to include your CSS, or better yet, allow Wordpress to include your CSS the right way using wp_register_style();
  • CSS Comments should include anything to confuse the Respond.js plugin. This means remove any curly braces, mentions of @media or any other questionable symbols that could interfere with the way Respond.js works.
  • Your media queries should be written and formatted with the proper spacing, meaning no extra spaces before or after your min-width or max-width definitions, and one space after the colon character.

Still, after reviewing these issues, nothing. Ready to give up, smash my computer, drink a beer. Until....

I remembered! IE8 doesn't natively support all HTML5 elements, which my theme utilized heavily. Luckily, there's another nifty javascript plugin called html5shiv.js which gives IE8 a good kick in the pants and allows for usage of most now-common HTML5 elements (header, article etc.)

I included the html5shiv.js as instructed in my theme's header.php file:

<!--[if lt IE 9]>
 <script src="dist/html5shiv.js"></script>
<![endif]-->

Refreshed the page, and..!

It worked!

Still, you may notice some inconsistencies in what you'd expect to be displayed, but that's just coding for IE8 ingeneral and I refuse to talk about that here

Review:

1.) Make sure you're enqueuing respond.min.js after your CSS file or utilizing the Respond.js Wordpress plugin.

2.) If your theme's code is written in HTML5, make sure you also enqueue html5shiv.js

3.) If your CSS is using @import or is coded inline, Respond.js can't read it. Include your CSS using a typical <link> and it should be accessible just fine.

3.) Make sure your media queries are formatted properly, with no double-nested brackets:

@media only screen and (min-width: 380px) {  h1 { /* styles here... */ }}

4.) Run your CSS and HTML through a validator and see if it leads you to any potential issues.

5.) Drink a beer, go hug your dog, or call an old friend. I feel bad.