Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Layout Basics CSS Layout Project Creating and Styling the Layout Containers

Daniel Kurowski
Daniel Kurowski
11,231 Points
Posted by Daniel Kurowski
Daniel Kurowski
11,231 Points

Media Queries and IE

Ok, I like the idea of Mobile-First approach etc. But IE still does not support media queries (not 100%). So, how do you deal with that guys?

Shahar Polak
Shahar Polak
5,756 Points

Hi Daniel,

First of all, I try for the most part to use frameworks. The benefit of using frame works is that you get a solid code base that for the most part is tested, use good practice coding and give you the time to develop instead of reinventing the wheel.

Most websites share a very similar (not to say identical) structure. The aim of frameworks is to provide a common structure so that developers don’t have to redo it from scratch and can reuse the code provided. In this way, frameworks allow us to cut out much of the work and save a lot of time.

For responsive mobile first frameworks I highly recommend to use one of the following :

And as for your question IE 10 and 11 (Edge) are almost fully support media queries, as for the older versions (in case you still do not wish to use any of the common frameworks) I can suggest this article - it got some hacks how to make it work.

EDIT ANSWER

As Eric mentioned the right way to go will be by using polyfill such as HTML5SHIV. This can be accomplished by adding the js file to your website

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document with shiv</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
...

The added benefit of using this solution that you will be able to use some of the HTML5 semantics as well.

P.S. I do apologize for my earlier answer and for supplying information that might confuse someone

Eric Butler
Eric Butler
33,512 Points

Shahar, It's true that Bootstrap and Foundation are good site-building frameworks -- but even they will only work on IE8 and back correctly IF you follow their template and include respond.js to handle media queries for those older browsers. Actually, you'd have to go back to Foundation 4 (they just released 6) to find a version of Foundation that supports IE 8 -- and that's only with a hack.

And it's certainly not necessary to use a framework in order to use media queries.

Also, there is no need to write such hack-y CSS for IE as the kind you've provided a link to. That's from 2012, we've come a long way since then.

Others reading this: don't bother visiting Shahar's linked-to article, it will likely only mess you up.

2 Answers

Eric Butler
Eric Butler
33,512 Points
Eric Butler
Eric Butler
33,512 Points

Hi Daniel, IE 9 and up has full support for mobile-first media queries. If you must support IE 8 or below, the common solution is to use media queries as you normally would, then also include a small JavaScript "polyfill" like respond.min.js once right after your stylesheets that basically forces those browsers to process the media queries correctly.

Don't let people tell you that you can't use the new CSS3 features because some version of IE doesn't support them. Reference caniuse.com regularly, use vendor prefixes where necessary, and just make sure your site doesn't completely bork ("gracefully degrades") on IE 8. There is no excuse anymore for IE 7. Fewer and fewer web companies are even still supporting IE 8 (WordPress, e.g.); you shouldn't either.

Anyway here's how you'd set up Respond.js if you need to use it:

  1. Go to its GitHub page. Click the "Download ZIP" button to download the whole project. Unzip it on your computer.

  2. The file you want is in the "dest" folder. It's called "respond.min.js". You don't need to open it or edit it in any way; just put it wherever you want in your website's directory.

  3. Then in your webpage's <head>, you'd write:

<!-- blah blah normal head stuff -->
<link rel="stylesheet" href="path/to/my-stylesheet-with-media-queries.css">
<link rel="stylesheet" href="path/to/other-stylesheets-with-media-queries.css">
<script src="path/to/respond.min.js"></script>
<!-- blah blah rest of head and rest of webpage -->

Done.

p.s. If you want to use HTML5 elements/syntax/DOCTYPE but think you can't because blah blah blah, you're wrong: just add HTML5Shiv's html5shiv.min.js file in the same way that I did Respond.js above and you're good to go.

Daniel Kurowski
Daniel Kurowski
11,231 Points
Daniel Kurowski
Daniel Kurowski
11,231 Points

Thank you guys for quick response :) It'll definitely will help me solve the issue.