scottjehl/respond

Respond.js is a small JavaScript file that adds support for CSS media queries to older versions of Internet Explorer (versions 6 through 8) that do not understand them natively. It was created in 2011 and targets a specific, now largely historical, browser compatibility problem. CSS media queries are the technique behind responsive web design: they let a stylesheet apply different visual rules at different screen widths, so a single HTML file can look appropriate on a phone, a tablet, or a desktop. Internet Explorer 8 and earlier do not recognize these rules at all, which means a responsive layout would appear broken in those browsers without a fix like this one. Respond.js works by fetching copies of the page's CSS files using an internal web request, scanning them with a regular expression to find media query blocks, and then enabling or disabling those style blocks as the window width changes. Because it re-fetches the CSS files, it requires that stylesheets be served from the same domain as the page. Hosting stylesheets on a different domain or a CDN requires setting up a local proxy. The script weighs about 3KB uncompressed and roughly 1KB after minification and compression. It handles only min-width and max-width queries, which are the most common building blocks of mobile-first responsive design. It does not support nested media queries, styles loaded via @import, or media queries inside inline style elements. There are also documented edge cases involving UTF-8 byte-order marks, @font-face rules placed inside media query blocks, and pages that reference more than 32 stylesheets in IE. The project notes that other media query polyfills with broader feature coverage exist, but positions Respond.js as the fastest option for the common min-width and max-width case. It is licensed under the MIT license.