A method for creating an IE specific stylesheet that allows the content of media queries to become accessible to Internet Explorer 8 and below. This process uses LESS string interpolation to convert media queries into media types which are supported back to IE6.
CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
styles
README.md
test.html

README.md

Media Queries to Media Types with LESS

Turn this... @media all and (min-width:768px) { ... } into this... @media all { ... }

A method for creating an IE specific stylesheet that allows the content of media queries to become accessible to Internet Explorer 8 and below. This process uses LESS string interpolation to convert media queries into media types which are supported back to IE6.

This is especially useful if you write mobile-first styles and inline (scatter) your media queries instead of writing them in one big block in a separate file.


OR if you're using grunt.js then here is a simple way to strip mobile-first media queries.


Documentation

Step 1:

Setting up the files

// vars.less
// Examples of using LESS's string interpolation to turn your
// media queries into variables.
@respond-to-medium-screens: "all and (min-width: 600px)";
@respond-to-medium-screens-max: "all and (max-width: 599px)";
@respond-to-large-screens: "all and (min-width: 768px)";
@respond-to-large-screens-max: "all and (max-width: 767px)";

// vars-ie-overrides.less
// Used only to override any media queries that affect the "desktop" layout
@respond-to-medium-screens: "all";
@respond-to-large-screens: "all";

// base.less
// Write styles as usual but when writing your media queries
// use the variables you set up: `@media @respond-to-large-screens`
@media @respond-to-medium-screens { ... }
@media @respond-to-large-screens { ... }

// styles.less
// This stylesheet will pull everything together and your
// media queries will be compiled as normal: `@media all and (min-width: 768px)`
@import "vars.less";
@import "base.less";

// styles-ie.less
// This stylesheet is for IE8 and below and also pulls everything together
// except that it uses vars-ie-overrides.less to override any media queries that
// affect the "desktop" layout. Your media queries will now be converted to media
// types and will look like this: `@media all`
@import "vars.less";
@import "vars-ie-overrides.less";
@import "base.less"; // This is the same file as above

Step 2:

Compile both styles.less and styles-ie.less.

Step 3:

All what's left is to serve styles-ie.css to IE8 and below like so.

<!--[if lt IE 9]>      <link rel="stylesheet" href="styles/styles-ie.css"> <![endif]-->
<!--[if gt IE 8]><!--> <link rel="stylesheet" href="styles/styles.css"> <!--<![endif]-->

Contributing

Discussion is welcome using github issues

Spreading the word

Curating a list of sites I'm using to spread the idea and collect feedback.