Mobile-first media queries and MSIE backwards compatibility

If you have to support Internet Explorer 8 (or, gasp!, even earlier versions of IE) in a modern website design, you’ll probably run into issues with media queries (especially if you’re using a mobile-first approach).  One option is to use Respond.js, but in my experience this can lead to a significant performance hit and cross-domain issues (if you’re using a CDN for assets, for example).  I recently discovered an alternate approach which in my opinion is much cleaner and simpler (especially if you’re already using Grunt as part of your build process).

Check it out: grunt-stripmq

grunt-stripmq is a Grunt task to generate a fallback version of your fancy mobile first stylesheet. Since IE8 and lower don’t support media queries, you can use a javascript library like Respond.js to enable this, or generate a fallback version on build-time with this task.

Once configured, grunt-stripmq will create a “desktop only” version of a mobile-first stylesheet by parsing the media queries, applying a configured viewport (for example 1024×768), and outputting only the rules that apply to that viewport.  You can then use MSIE conditional tags to load the desktop only version for Internet Explorer 8 and below, while serving the original stylesheet to everyone else.

Alternatively, I’ve created desktop-only versions of each major Bootstrap release (as of 4/3/20014—I’ll try to update it from time to time).  You can download the appropriate copy at:

Enjoy!