Skip to content

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.

himedlooff/media-query-to-type

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 

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.

About

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.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages