Respond.js: Fast CSS3 Media Queries for Internet Explorer 6-8 and more

Posted by fg on 02/08/2011

Mobile-first Responsive Web Design may just be the most practical and forward-looking way to address the multitudes of devices and browsers that reach your site. But lack of native CSS3 Media Query support in Internet Explorer 8 and under (among others) presents a serious challenge to the technique.

Filament Group’s own Scott Jehl has released a script to address the problem, and also achieves mobile-optimized filesize (3kb / 1kb gzipped) and near-native performance. You can learn more at the project site on Github: Respond.js Project (documentation here).

Comments

<div id="commentNumber1" class="commentEntry">
<p>Great !

Will it be merged in jquerymobile source code ?

</div>
	<p class="posted"><a href="#commentNumber1">Comment</a> by

Eric Priou on 02/09  at  10:56 AM

<div id="commentNumber2" class="commentEntry">
<p>Sounds great!

A mighty bit smaller than http://code.google.com/p/css3-mediaqueries-js/ - which is like 16kb. I’ll definitely be trying this out.

</div>
	<p class="posted"><a href="#commentNumber2">Comment</a> by

David on 02/10  at  03:25 PM

<div id="commentNumber3" class="commentEntry">
<p>Damn! I need this for sure.

</div>
	<p class="posted"><a href="#commentNumber3">Comment</a> by

Gaurav M on 02/11  at  12:03 AM

<div id="commentNumber4" class="commentEntry fg">
<p>Hi Eric,

Good question. I think we’ll need to give that some thought, particularly once the project begins work on scaling the layouts and components to tablet and desktop interfaces.

</div>
	<p class="posted"><a href="#commentNumber4">Comment</a> by

Scott (Filament) on 02/14  at  10:28 AM

<div id="commentNumber5" class="commentEntry">
<p>Yeah ! Moreover since Nokia enters also in the bandwagon…

</div>
	<p class="posted"><a href="#commentNumber5">Comment</a> by

Eric Priou on 02/14  at  11:14 AM