I used to use respond.js to make IE8 media query-friendly, but that script stopped working for me suddenly last week in WordPress. I still don’t know why, but after several hours of trying to fix it I realized that I really didn’t need to. Why was I worried about media queries in IE8 anyway? I really wasn’t – my real concern was that I was serving the mobile-first styles to that browser instead of the desktop styles.

But I’m using Sass – have been for a few months now, I love it – and Sass makes it easy to deal with that problem. It’ll help you create desktop styles, sans media queries, and serve those exclusively to IE8 via conditional comments.

I found some good references for how to do this, but I was so frustrated by that time (it was late and I’d been banging my head on the desk for an hour or two) I had a hard time getting my head around any of them. Once I finally got it, it was an ‘aha’ moment! I’m writing this post in hopes that I can make it super-easy for you to use this technique if you’ve recently had a frustrating time with IE8 too.

Compass and Breakpoint

You’ll need to use Compass and the Breakpoint extension for this tutorial. Breakpoint is a Sass mixin that makes it easy to write media queries – learn more about what Breakpoint does here.

Get Breakpoint going by first installing it:

Then if you’re starting a new project with Compass, you can require it now:

Otherwise you’ll need to add this line to your existing config.rb file in your project folder:

Finally, you’ll need to import the Breakpoint partial into your style.scss file (after you import Compass):

And you’re ready to go.

Creating the Media Queries and IE8 Fallbacks

In your utility partial, or maybe in a variables file, add a media query using Breakpoint. It will look like this assuming we want a min-width of 760px:

(Read the examples here if you want more details on the different kinds of media queries you can use).

Now normally you’d use this in your .scss files like this:

And that produces this compiled CSS:

But because we want to take care of old IE by not serving the media queries to it, you’ll first need to add this new mixin to your utilities file (wherever you’ve put the Breakpoint media queries):

And then instead of the @include snippet above, you’ll use this one in your .scss files:

So instead of ‘@include breakpoint($grande)’ you’re using ‘@include grande.’

If you look in the compiled CSS file you’ll see this:

And then, you’ll just need to enable the .ie8 class for IE8 by using this conditional comment in the head section of your site:

Now IE8 will see your width styles and you won’t need to worry about it not seeing the media queries anymore. Sweet!

What you’ll want to do is create one of the new mixins for each breakpoint you add – so if you have 5 breakpoints, you’ll have 5 new mixins.

This works so nicely, and no need for any special Javascript to force IE8 to be mq-friendly. I hope you found this tutorial helpful!

References:

 

Recently I developed a WordPress site that uses a custom post type for Events. This is a typical event page – note the More Info section in the left sidebar.

The client needed to be able to insert a list of links under More Info, and the number of links will change for every event. I needed a way to make this super-simple for the client, so in the Events custom post editor, the links are entered one per line like so:

Then, I needed to convert that line break-delimited list into an unordered list for formatting… I had no idea how to do that but after some hunting around I found this post that completely answered my questions.

Then in my single-events.php template, I have this section including the wonderful code snippet from wordpressismypuppet that converts the entries into a standard unordered list:

So now the result is a ul under ‘More Info.’ formatted to match the other sidebar widgets. The client has a bare minimum of HTML to contend with and has control over what appears in the list – everyone’s happy!