Getting media queries to work in older browsers

The possibility that you may want media queries to work in older browsers does exist. We normally think of media queries as only being used to create responsive designs, which implies modern browsers on devices like iPhone or iPad. However, there is a JavaScript you can use if you need to support older browsers for other reasons.

There is native support for media queries in Firefox 3.5+, Opera 7+, Safari 3+ and Chrome. For browsers older than that, you can use css3mediaqueries.js, available free from Google.

If you are a Dreamweaver user, or have used my e-book “How to Create a Responsive Web Site Using Dreamweaver CS 5.5,” be aware that this script does not work with @import stylesheets. See Media Queries 101 for some tips on how to use methods other than @import rules for media query styles.

Leave a Reply