Posted almost 7 years ago. Visible to the public. Deprecated.

Making media queries work in IE8 and below

Microsoft does not support IE8 anymore, and neither do we.

When using @media CSS queries, Internet Explorer 8 and below will fail to respect them.

Though there are several options (like mediatizr and css3-mediaqueries), Respond.js was the only one that worked for me.


If you do not want to pollute your application's default JS file with Respond.js, simply:

  1. Create an extra JS file (like media_queries_polyfill.js) that loads Respond.js:

    Copy
    //= require respond-1.4.2
  2. Make sure it's added to config.assets.precompile

  3. Embed that JS file in your layout only for old IEs. Looks like this in Haml:

    Copy
    /[if lt IE 9] = javascript_include_tag 'media_queries_polyfill'

Note: Using an IE conditional means other super-ancient browsers that do not support media queries (like Safari 2.x, or Firefox 3.0 and below) will still not respect them. You are probably fine with that.

Once an application no longer requires constant development, it needs periodic maintenance for stable and secure operation. makandra offers monthly maintenance contracts that let you focus on your business while we make sure the lights stay on.

Owner of this card:

Avatar
Arne Hartherz
Last edit:
almost 3 years ago
by Henning Koch
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Arne Hartherz to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more