Read more

Making media queries work in IE8 and below

Arne Hartherz
May 07, 2014Software engineer at makandra GmbH

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.

Illustration online protection

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

  • Prevents you from data breaches and liability risks
  • Upgrade at your own pace
  • Works with modern Rubies
Read more Show archive.org snapshot

Though there are several options (like mediatizr and css3-mediaqueries), Respond.js Show archive.org snapshot 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:

    //= 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:

    /[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.

Posted by Arne Hartherz to makandra dev (2014-05-07 10:16)