Search code examples
internet-explorer-8breakpoint-sass

How to support IE8 with breakpoint-sass and mobile first


I am using breakpoint-sass gem to handle media queries for mobile first responsive stylesheets.

I need to create a separate css file for IE8 (which does not support media queries), whereby I want to have all the styles, omitting the strings starting with @media ... { and the other one with closing bracket (because IE ignores everything that is in media query).

I'm using the following setup:

$breakpoint-no-queries: true;
$breakpoint-no-query-fallbacks: true;

The problem is, that to make this working I need each time to pass true into breakpoint() mixin. Is there a better way to achieve my goal? Or probably, is there any way to avoid this repetition and make $no-query: true to be permanent?


Solution

  • Taking a look at the No Query Fallbacks page, specifically the No Query Fallbacks | Separate Fallback File section, you can see that if you have set up your breakpoints using variables, you can add 'no-query' true' to breakpoint definitions, and then you don't need to pass it in to the Breakpoint mixin.

    There is no way to tell Breakpoint that you would like all of your media queries to be output in your fallback code as we don't believe that to be a good practice; if your component has three of four breakpoints and only the last one will apply, only that one's code should be served. If you'd like to try to convince us otherwise, please file an issue for a new feature and we can discuss in the issue queue.