SASS 3.2 Media Queries and Internet Explorer Support

Question

I recently implemented this technique with SASS 3.2 using @content blocks in a project I was working on, and I just got to the point where I needed to enable support for older browsers like IE7 and 8.

Example:

 .overview { padding: 0 0 19px; @include respond-to(medium-screens) { padding-top: 19px; } //medium-screens @include respond-to(wide-screens) { padding-top: 19px; } //medium-screens } 

Both of them do not support media queries, and I often handled this in the past, showing all the styles to these browsers when my media queries were divided into separate partial files, such as _320.scss, _480.scss and loaded in my IE stylesheet them like this:

 @import 320.scss; @import 480.scss; etc. 

To load all styles and always assign layout and styles to IE7 - 8 940px (or regardless of the maximum width). Using the nested styles in SASS 3.2 inline, it eliminates the need for separate parts of the stylesheets, but completely offends how I load styles for IE.

Any ideas or solutions on how to deal with this? I could use polyfill, such as response.js, to force IE to use media queries, but would rather just serve an inflexible site in IE.

Any ideas on how to best organize these files, or a better solution?

Answer 1

You can create a separate stylesheet for IE <9, which contains everything that your regular sheet has, but with flat media requests based on a given width.

The full explanation is here http://jakearchibald.github.com/sass-ie/ , but basically you have this mixin:

 $fix-mqs: false !default; @mixin respond-min($width) { // If we're outputting for a fixed media query set... @if $fix-mqs { // ...and if we should apply these rules... @if $fix-mqs >= $width { // ...output the content the user gave us. @content; } } @else { // Otherwise, output it using a regular media query @media screen and (min-width: $width) { @content; } } } 

What you will use as follows:

 @include respond-min(45em) { float: left; width: 70%; } 

This will be inside all.scss , which will compile to all.css using media queries. However, you also have an additional all-old-ie.scss :

 $fix-mqs: 65em; @import 'all'; 

It just imports everything, but aligns the media request blocks using a fake width of 65 m.

Answer 2

I use LESS for most of my work, but in large projects with a lot of people working with files, I do not like to use checkpoint files such as 1024.less.

My and my team use a modular approach, such as header.less, which contains all the header-only code, including related breakpoints.

To get around IE problems (we work in a corporate environment), I use this approach:

 @media screen\9, screen and (min-width: 40em) { /* Media queries here */ } 

The code inside the media query is always executed by IE7 and less. IE9 and above are subject to media queries similar to the correct browser. The problem is IE8. To solve this problem you need to make it behave like IE7

 X-UA-Compatible "IE=7,IE=9,IE=edge" 

I found that this does not always work if it is set in meta tags in HTML, so install it using server headers.

See the gist here: https://gist.github.com/thefella/9888963

Creating IE8 as IE7 is not a solution that works for everyone, but it fits my needs.

Answer 3

Jake Archibald has the best technique I've seen how to do this. This method automatically creates a separate stylesheet for IE with all the same styles inside your media queries, but without the media query itself.

I also campaigned for this technique to be built into the popular breakpoint extension for Sass if you are interested in using this!

Answer 4

If you want to keep everything under one roof and have only one HTTP request for your older browser visitors, you can do something like this

Setting up the initial mix of the response

 // initial variables set-up $doc-font-size: 16; $doc-line-height: 24; // media query mixin (min-width only) @mixin breakpoint($point) { @media (min-width: $point / $doc-font-size +em) { @content; } } 

this will create a min-width media query and output your px ($ point) value as the em value.

From this you need to create this mixin

 @mixin rwdIE($name, $wrapper-class, $IE: true) { @if $IE == true { .lt-ie9 .#{$wrapper-class} { @content; } .#{$wrapper-class} { @include breakpoint($name) { @content; } } } @else if $IE == false { .#{$wrapper-class} { @include breakpoint($name) { @content; } } } } 

Here, if you pass a piece of Sass (SCSS) like this

 @include rwdIE(456, test) { background-color: #d13400; } 

he will return this code

 .lt-ie9 .test { background-color: #d13400; } @media (min-width: 28.5em) { .test { background-color: #d13400; } } 

This will give you the IE and CSS of the new browser in a single file. If you write -

 @include rwdIE(456, test, false) { background-color: #d13400; } 

You'll get -

 @media (min-width: 28.5em) { .test { background-color: #d13400; } } 

I hope this helps, I also have it on the codec - http://codepen.io/sturobson/pen/CzGuI

Answer 5

There is a CSS3 Mixin . I use this variable for IE filters. You could do something like this with a global $ forIE variable or something similar, wrap the mixin media query inside an if, and then generate a stylesheet with or without queries.

 @if $forIE == 0 { // Media Query Mixin } 

Or use @if to import 3rd scss (_forIE.scss?), Which will override all your specific IE styles.