IE8以下でもメディアクエリーに対応する Respond.js の紹介と動かない時の対処法

Posted by admin at 4:09 日時 2013/06/20

Respond.js とは

IE6〜8などCSS3メディアクエリーの min/max-width に対応していないブラウザのための、高速で軽量なpolyfillです。MITとGPL2のデュアルライセンスで公開されています。

このスクリプトのいいところはメディアクエリー非対応のブラウザでメディアクエリーを使えるようにするという1点に用途を絞っているところです。

ファイルは極力小さくなるように設計されており、メディアクエリー対応ブラウザではできるだけ早いタイミングで処理を中断するようになっているので、パフォーマンスにあまり影響を与えません。

また、他のライブラリーに依存しないのも高ポイントです。

使い方は簡単で、JSファイルを通常通り読み込ませるだけです。Respond.js がHTMLから呼ばれているCSSを正規表現で解析し、表示しているブラウザのウィンドウサイズによってメディアクエリーを解釈し、メディアクエリーを含まないCSSに変換してくれます。

Respond.js は @import で読み込まれているCSSを解釈することができません。そもそもこの方法はパフォーマンスに影響もありますし、あまり使わないほうがいいでしょうね。
ブラウザーによっては file:// で始まるURL（ローカルのCSS）も解釈できないようです。サーバーにアップロードして確認するのがよさそうです。
link要素のmedia属性でのメディアクエリー指定もサポートしていますが、それによって読み込まれるCSS内にメディアクエリーが含まれていると、動作しないようです。どっちかにせえということのようで。
BOM付きのUTF-8だとダメ
@font-face ルールがメディアクエリーの中にあると動作が遅くなるので注意ということです

そしてこれはドキュメントにも書いてなくてハマったのですが、404（リンク切れ）になっているCSSファイルがあると動作しませんでした。おそらくCSSを解析する段階でエラーが起こるのだと思います。

しかし、この原因追求だけでえらく時間がかかってしまいました…。動けばIE8でもバッチリメディアクエリー解釈済みのCSSが反映されますので、大変ありがたいスクリプトです。