memocarilog

CSS3 で新しく追加されたフォント単位 rem を IE8 以下でも利用できるようにする、JavaScript のライブラリ REM-unit-polyfill の使い方などです。

rem はルート要素(HTMLに指定したもの)のフォントサイズを参照して、文字サイズを指定できるためとても便利です。しかし IE8 以下では対応していません。古いブラウザも対象の場合 rem 指定の際 px や em でのフォントサイズ指定も必要になり、二重で記述することになってしまうため面倒です…。

REM-unit-polyfill を使えば、ライブラリファイルを読み込むだけで簡単に IE 対応ができます。

ダウンロードと使いかた

以下のページよりライブラリを入手出来ます。
chuckcarpenter/REM-unit-polyfill

使い方はとても簡単で、ダウンロードした rem.min.js ファイルを読み込むだけです。
IE8 以下に適用したいので、以下のようにコンディショナルコメントで読み込むほうがよいですね。

<!--[if lt IE 9]>
  	<script src="rem.min.js"></script>
<![endif]-->

導入してみたキャプチャなど

このブログでも rem を使っていますが、面倒臭くて細かい IE へのフォントサイズ調整はしていなかったため REM-unit-polyfill を今回導入してみました。

ちなみにフォント指定は、HTML に対して font-size: 62.5% を指定して、各要素ごとに 14px サイズにしたいときは 1.4rem と指定するというような CSS になっています。

REM-unit-polyfill 適用前

以下の画像のように、デベロッパーツールの IE8 モードでみると rem に対応できないなくて文字がちいさいです。

REM-unit-polyfill 適用後

画面を開いた時に一瞬のタイムラグがあるものの、サイズ調整を REM-unit-polyfill が行ってくれ本来表示したかった文字サイズになりました。

このくらいの手軽さで古いブラウザにも対応できるなら、rem を実用的に使えそうかなと思いました。