【CSS3】メディアクエリをIE7、IE8でも使えるようにする

Tweet

Category css, html5 2013/04/12

問題

あら？IE8はメディアクエリ（cssの@media何々）使えないんでしたっけ？

答え

IE9からはメディアクエリが使えるけど、IE6、IE7、IE8は使えない。

こちらのスクリプトを使うと、何とかなるでしょう。

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

HTML5も！というときは、こちら。

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

外部WebサイトのJSを読み込むのはNGなシステムの場合は、ダウンロードしてきて、自分のサーバーに置いて、そちらを読み込むとよいでしょう。

そして、このJSライブラリを使うときの注意点はこちら

• @importで読み込んだスタイルシートには適用されないようで、<link>や<script>要素を使って書くようにとのこと。

  Note: Doesn’t work on @import’ed stylesheets (which you shouldn’t use anyway for performance reasons). Also won’t listen to the media attribute of the <link> and <script> elements.

• <link>のmedia属性で指定するのは効かないらしい。

• @media (min-width: 1200px){…}
  はダメで、
  @media screen and (min-width: 1200px) {}
  とmedia typeがないと効かない環境があるらしい。

• http://roka404.blog84.fc2.com/blog-entry-16.html
• http://www.imaginationdesign.jp/blog/html5css3/1592/

メモ： 各ブラウザのHTML5、CSS3対応状況 → http://fmbip.com/litmus/

追記）簡単なサンプルを作ってみました。この程度ならIE7でもメディアクエリが使えました。

メディアクエリをIE7、IE8で使ってみる例

古いIEでtwitter bootstrapをちゃんと表示させるなどには無理な感じ。