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

• Testing different media types

Spreading the word

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

• less.js pull #643
• less.js issue #965
• coding.smashingmagazine.com - Techniques For Gracefully Degrading Media Queries