As a developer, one of my biggest headaches is Internet Explorer. Coding for earlier versions of IE typically involves adding extra CSS that targets IE8 and below. Internet Explorer 9 and 10 are huge improvements, but some clients still required support for some of their predecessors.
One of my more recent projects involved having to use custom media queries for resolution size on desktop browsers. This was not a problem until I started to test it in Internet Explorer 8. It turns out that Media Query support was only introduced in IE9. This did not surprise me one bit. It also did not surprise me that there are javascript solutions that will fix this.
I used Respond.js. According to Scott Jehl, the script developer,
The goal of this script is to provide a fast and lightweight (3kb minified / 1kb gzipped) script to enable responsive web designs in browsers that don’t support CSS3 Media Queries – in particular, Internet Explorer 8 and under. It’s written in such a way that it will probably patch support for other non-supporting browsers as well (more information on that soon).
It’s very easy to use!
- First, add min/max-width media queries to your CSS, just as you normally would do for responsive development.
@media screen and (max-width: 480px){ .style { width:100% } } - Either copy the code from respond.js into your existing javascript file or add it as a conditional comment to target Internet Explorer 8 and below. This would be best placed after the calls to your CSS.
<!--[if lt IE 9]> <script type="text/javascript" src="path/to/respond.min.js"></script> <![endif]--> - Open Internet Explorer, test and celebrate another small victory over the frustrations of coding for IE.
Note that only only min-width and max-width media queries and all media types (screen, print, etc) are translated using this script. I personally do not think this is an issue since this is exactly what responsive development uses.
The post Media Query Support for IE8 appeared first on Local Wisdom.
