CSS3からの新しい単位「rem」をIE8でも利用できるようにするスクリプト -REM unit polyfill
Post on:2014年4月11日
sponsors
当ブログで紹介した「フォントのサイズ指定はpx？ em？ 既存の再検討とこれからのテクニック」でこれからのfont-sizeの単位に「rem」を使う方法など、CSS3の新しい単位「rem」は非常に魅力的ですが一つ問題があります。
それは「rem」はIE8をサポートしていないこと。
ここで紹介するのは、その問題を解決するIE8でも「rem」を使えるようにするスクリプトです。使い方はスクリプトを外部ファイトとして記述するだけなので簡単！
REM unit polyfill
REM unit polyfill -GitHub
CSS3からの新単位「rem」とは
まずは、「rem」のおさらいを簡単に。
サイズの単位には「px」「pt」などの絶対単位、「em」「%」などの相対単位があります。「rem」はその中の相対単位で「em」と似ています。
「em」は親要素に対して相対的に値が求められ、「rem」は常にルート（またはhtml要素）に対して相対的となります。「rem」の利点は、html要素にフォントのサイズを一つ定義するだけで、すべての子要素を「rem」で定義することができます。
実際の使い方は、下記ページなどを参考にしてみてください。
REM unit polyfillのデモ
デモは残念ながらオンラインのものはなく、ダウンロードファイルに含まれているものを紹介します。
デモ：ローカルサーバーで表示
7つのdiv要素がそれぞれ異なるCSSで実装されており、バーの長さに「rem」を使用しています。外部スタイルシート、@import、フォルダを異なるスタイルシートなど。
「rem」非対応のIE8は、Browserstackで検証してみました。
IE8での表示：スクリプト有り
期待通りに表示されています。
スクリプトが有効なのか確認するため、スクリプト無しの状態でもチェックしてみました。
IE8での表示：スクリプト無し
スクリプト無しにすると、バーの長さの「rem」が無効になっています。
REM unit polyfillの使い方
Step 1: 外部ファイル
当スクリプトを外部ファイルとして</body>の上あたりに記述します。
<body> ... <script src="js/rem.js" type="text/javascript"></script> </body>
これで完了！
あとは、CSSで「rem」を使用することができます。
スクリプトは「rem」非サポートブラウザでは、「rem」を使用しているユニットを全て「px」に計算しなおして表示させています。
sponsors
