Foundation 5をIE8に対応させるためのTIPS

Web制作

2015/05/25 追記しました。

 

CSSフレームワークといえばBootstrapとFoudationが有名ドコロでしょうか。
私はBootstrapしか使ったことがないのですが、Bootstrapのclass指定の冗長さが気になってきまして、今回はFoundationを使って構築してみることにしました。

FoudationはBootstrapよりもクラスがスッキリしているのはいいですが、問題はIE8に対応していないということ…。
IE8のサポートは2016年1月12日まで。無理に対応させなくてもいいじゃないのと思うのですが、まだまだ使っている人が多いのも事実…。そこで無理やりIE8に対応させる方法をメモしておきます。

元ネタはここ↓です。


Foundation 5 and IE8 | Foundation Forum from ZURB

IE開発者ツールのエミュレーションだと、この方法だけだとうまくいきませんでした。私なりに試行錯誤した方法を記述しておきます。

ヘッダに追加
<!--[if lt IE 9]>
	<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
	<script src="//s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script>
	<script src="//html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
	<script src="js/ie8/rem.min.js"></script>
	<link rel="stylesheet" href="css/ie8.css">
<![endif]-->

まずIE8のためにjquery1系を読み込ませています。

そのあと、レスポンシブやhtml5に対応させるためのjsファイルを読み込ませます。元ネタにはremをどうにかするjsがなかったので、rem.js（chuckcarpenter/REM-unit-polyfill）も追加。

さらに、それでも調整ができなかったパーツのために微調整するためのcssを追加しました。

BODY書き換え
<!--[if gte IE 9]><!-->
    <script src="js/vendor/jquery.js"></script>
<!--<![endif]-->
<script src="js/foundation.min.js"></script>
<script>
    $(document).foundation();
</script>

最後に、BODYの最後の方にあったjquery2系について、IE9以降のみ読み込むよう変更しました。

今のところこれで大丈夫そうですが、javascriptの処理が絡んでくる部分についてはまだ未テストということと、IEの開発ツールがいまいち不安定で挙動がおかしいことが多々あるので、何か不具合があったら追記します。

追記：

rem.jsについて、「Error: アクセスが拒否されました。」という表示になって読み込みに失敗するようになってしまいました。
XDomainRequestのセキュリティまわりの問題のようなのですが、jQuery-ajaxTransport-XDomainRequestを導入してみても変わらず…。しかもたまに成功することもあるので、さすがie悩ませてくれるじゃないといったところでしょうか。
仕方ないのでrem.jsは外して、ie8-grid-foundation.cssというスタイルシートを読み込んで対応することにしました。細かい調整が必要にはなってきますが、グリッド部分についてはこれで大丈夫そうです。