Respond README

The project's README from github.com/scottjehl/Respond. As one markdown file: README.md.

Respond.js

A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)

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).

If you're unfamiliar with the concepts surrounding Responsive Web Design, you can read up here and also here

Demo page (the colors change to show media queries working)

Usage Instructions

  1. Craft your CSS with min/max-width media queries to adapt your layout from mobile (first) all the way up to desktop
    @media screen and (min-width: 480px){
        /** ...styles for 480px and up go here **/
    }

  1. Reference the respond.min.js script (1kb min/gzipped) after all of your CSS (the earlier it runs, the greater chance IE users will not see a flash of un-media'd content)

  2. Crack open Internet Explorer and pump fists in delight

CDN/X-Domain Setup

Respond.js works by requesting a pristine copy of your CSS via AJAX, so if you host your stylesheets on a CDN (or a subdomain), you'll need to set up a local proxy to request the CSS for old IE browsers. Prior versions recommended a deprecated x-domain approach, but a local proxy is preferable (for performance and security reasons) to attempting to work around the cross-domain limitations.

Support & Caveats

Some notes to keep in mind:

How's it work?

Basically, the script loops through the CSS referenced in the page and runs a regular expression or two on their contents to find media queries and their associated blocks of CSS. In Internet Explorer, the content of the stylesheet is impossible to retrieve in its pre-parsed state (which in IE 8-, means its media queries are removed from the text), so Respond.js re-requests the CSS files using Ajax and parses the text response from there. Be sure to configure your CSS files' caching properly so that this re-request doesn't actually go to the server, hitting your browser cache instead.

From there, each media query block is appended to the head in order via style elements, and those style elements are enabled and disabled (read: appended and removed from the DOM) depending on how their min/max width compares with the browser width. The media attribute on the style elements will match that of the query in the CSS, so it could be "screen", "projector", or whatever you want. Any relative paths contained in the CSS will be prefixed by their stylesheet's href, so image paths will direct to their proper destination

API Options?

Sure, a couple:

Alternatives to this script

This isn't the only CSS3 Media Query polyfill script out there; but it damn well may be the fastest.

If you're looking for more robust CSS3 Media Query support, you might check out https://code.google.com/p/css3-mediaqueries-js/. In testing, I've found that script to be noticeably slow when rendering complex responsive designs (both in filesize and performance), but it really does support a lot more media query features than this script. Big hat tip to the authors! :)

Respond (scottjehl/Respond)

Searching Database…

11.2K ·GitHub
Respond
archived
What is this?A fast, lightweight JavaScript polyfill that brings min/max-width CSS3 media query support to browsers that lack it — chiefly Internet Explorer 8 and under — so responsive web designs work there.
Is this a CSS framework or just a script I drop into a page?Not a framework — one small script (3kb minified, 1kb gzipped) with no dependencies besides a bundled matchMedia polyfill. Browsers that already support media queries are opted out via a quick test, so it effectively runs only where needed.
How do I start using it on my site?Write min/max-width media queries into your CSS as usual, then reference respond.min.js after all of your CSS — the earlier it runs, the less chance IE users see a flash of un-styled content.
Does it support every kind of media query?Deliberately narrow: only min-width and max-width queries (across all media types) are translated. Nested media queries are not supported, and CSS pulled in via @import or inside style elements is ignored.
Where does this run — in the browser, or do I need anything on the server?Purely client-side, but it re-requests your CSS text via Ajax, so pages must be served over HTTP (file:// fails) and stylesheets hosted on a CDN or subdomain need a local proxy to serve them to old IE.
Is this still maintained — should I use it today?No. The repository is archived, and its target browsers (IE 6-8) are long obsolete — every modern browser handles media queries natively. Treat it as a legacy patch for very old codebases, not a dependency for new work.
Why does it have to re-download my CSS?IE 8 and older strip media queries out of parsed stylesheets, so Respond.js fetches the original CSS via Ajax, finds query blocks with regexes, and injects them as style elements it enables or disables as the window width changes.
What are the nastiest gotchas to watch out for?Keep @font-face rules outside media queries or IE 7/8 will hang during load, stay under 32 stylesheets or IE throws an error, avoid UTF-8 BOM encoding, and note that Sass/SCSS debug-info comments break the parser.
Does it expose any JavaScript API?A small one: respond.update() re-runs the parser after you add a stylesheet, respond.mediaQueriesSupported reports whether the browser handles queries natively, and respond.getEmValue() returns the pixel value of one em.
What are similar projects?fastclick, FileSaver.js, history.js, material, q, vue-resource, material-design-lite, jquery
Which topics is it in?polyfill, legacy, cross-browser, responsive, javascript-library, deprecated, css, browser, utility, web-development, frontend, library
Creator
scottjehl
Size
0.3 MB
Stars
11.2K
Updated
CommitJan 27Release1.4.2Jan 29
Age
15y
Commits · 90 Days