ホーム > ブログ > コーディングTips > IE8以前でHTML5CSS3を対応するメモ

IE8以前でHTML5CSS3を対応するメモ

2014.11.29

こんにちは銀ねこです。

皆さん、IEは好きですか?愚問ですね。
コーディングするためにHTML5やCSS3は便利です。しかし、IE8以降の対応で頭を悩ませると思います…。そこでム●つくIE以降でを対応させる方法をメモしておきます。

必要なJS・CSSをIE8以前の時だけ読み込ませる

問題はIE8以降のブラウザーで見られているときだけなので、その時だけ切り替えます。

切り替えのために<head>内に以下のコード内に必要なJS、CSSをリンクさせます。

<!--[if lt IE 8]>に変えると7以降になります。

  1. <!--[if lt IE 9]>
  2. <script src="●●.js"></script>
  3. <link href="●●.css" rel="stylesheet" type="text/css">
  4. <![endif]-->

IEにより細かに対応したいときは下記の通りに<!--[if It IE 8]>を書き換えるだけ。

参考 How To Create an IE-Only Stylesheet

  1. <!--[if IE]>//すべてのIE
  2. <!--[if !IE]>//IE非対応
  3. <!--[if IE ●]>//IE ●のみに対応※●はバージョン
  4. <!--[if lt IE ●]>//IE ●以下に対応(●は含まない)
  5. <!--[if lte IE ●]>//IE ●を含むそれ以下に対応
  6. <!--[if gt IE ●]>//IE ●以上(●は含まない)
  7. <!--[if gte IE ●]>//IE ●を含むそれ以上

HTML5を対応

HTML5は<section>とか<article>とか新しいタグがあって、IE8では認識してもらえません。そこでこれらのタグをJavascriptで変換すべく、html5shiv.jsを使います。

皆さんよくご存じだと思います。とりあえずここからDL。

html5shiv.js github

フォルダを展開してhtml5shiv.jsだけリンクさせればOK。

ただし、HTML5を正しく書かねばえらい目にあいます。そして、<section>に<section>を入れ子にしてよかったはずなのに認識してくれず、ガチレイアウトが崩れました。

仕方ないので<div>で対応しました。。。

疑似セレクターに対応するJS

tr:nth-child(odd) テーブルの奇数<tr>の色を変えたり、li:last-childで最後の<li>タグの余白の設定変えたりなど、疑似セレクターは重宝します。

CSS3からは疑似セレクタが充実して使い勝手がいいのですがこれももちろんIE8以降対応してません。
そこでselectivizr.jsを使います。

注意点は2点。

  • CSSはhead内に書かずに外部ファイルでおくこと
  • ローカルでは動きませんのでサーバーにアップして使う

CSS3の角丸などの装飾系に対応

PIE.jsを使います。以下からDLします。

PIE.htcを紹介しているのがたくさんありますが、LIGさんのブログにもあるようにバグがあってあまりよろしくないので、Javascriptを使う方が良いようです。

私はよく角丸(border-radius)を使うのですが、やってみましたがいい感じでした。

適応させるためには外部ファイルを読み込ませるだけでなく、別途jsコードととcssに細工が必要です。

次の<div>タグに角丸を対応したい時、まずクラスをpieに設定。

  1. <div class="pie">
  2. 銀ねこ
  3. <div>

Jsは以下を追記。

  1. $(function() {
  2. if (window.PIE) {
  3. $('.pie').each(function() {
  4. PIE.attach(this);
  5. });
  6. }
  7. })

css3はーpie-で別途追記。

  1. div{
  2. border-radius: 3px;
  3. -moz-border-radius: 3px;
  4. -webkit-border-radius: 3px;
  5. -pie-border-radius: 3px;
  6. zoom: 1;
  7. position:relative;
  8. }

背景を指定したいときはposition:relative;を忘れずに。

これを忘れると背景透明になってしまします。

まとめ

最終的に、IE8で別途CSSを読んで微調整するといいですね。

とはいえ、これらのjsは癖があるし必要な時だけ使うのが無難かな~というのが感想。

この記事のタグ