v0.2.0 now supports
legacyWidth option to target only matching media queries.
We all are now responsive and mobile-first. Happy, enjoying both.
Well, and then there are this 10 % of folks using IE8 who try to take the fun out.
(Why? IE8 does not support media queries and ignores anything inside them, which – generally – results in showing the mobile layout)
There are three main ways to solve this I am aware of:
Response JS (or similar)
A (jQuery) polyfill emulating the behaviour.
parameters in preprocessors (see in SASS)
Generated stylesheets differ according to the settings.
The problem? It is heavily dependent on the preprocessor. Unusual code segments are needed.
Media query inside
Special stylesheets for each media query.
The problem? More HTTP requests. All rules for each media query has to be together which is non-modular.
I took what I found best in all three of them and managed not to have (the same) problems.
The magic is that during the build process a duplicate stylesheet with flattened media queries is created.
- Clean, universal, hack-free
- Language independent
- Code style independent
- Only one HTTP request (in any browser)
Let’s say we have the following CSS:
Then the stylesheet with flattened media queries would look like this:
The usage is simple, taking advantage of conditional comments we give the flattened file to IE8 and lower and the original file to the rest:
The tool – legaCSSy
To keep it simple as possible the flattened CSS should be generated automatically on build. The most widely used task runner in front-end community is – without a question – Grunt. That is why I made the tool as a Grunt plugin called:
The description reads “Fix your CSS for legacy browsers”. Where, of course, legacy browsers means Internet Explorer 8 and lower.
npm install grunt-legacssy --save-dev
In your Gruntfile.js add the configuration:
The only available option in the present is stripMediaQueries, which is true by default.
Source files can be an array in which case they are concatenated before processing.
More (updated) information is on the project page.
Forks and improvement ideas are welcomed!
Possible problems and future plans
The current version (
v0.1.0) is pretty dumb. It actually flattens every @media rule. Yes, that is even print styles etc. Also legacy browsers will get the style for the highest resolution break point (if you practice progressive enhancement) which is not always desirable.
The idea is that in the options one could specify the legacy width – the tool would then include styles only in matching @media rules. This is planned for the public
Update: Both – flattening only some media queries and legacy width option – is now included in
Another idea – an optimization – is some kind of RE-prefix-free: remove rules old browser can not understand (e.g. those starting with a
Please let me know in the comments if you tried it on your project, discover an error or have a question!