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.
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
Compile both styles.less and styles-ie.less.
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]-->Discussion is welcome using github issues
Curating a list of sites I'm using to spread the idea and collect feedback.