2.IDEA

JP | EN

html5shiv.jsを使わないIEに対応したHTML5コーディング方法とは

IE8以下でもHTML5のタグを認識させるhtml5shiv.js(旧名: html5.js)は有名なサイトでも(Bootstrapなんかも)使用されています。IE8が(デスクトップブラウザ市場の)20%以上のシェアを占める状況下では、html5shiv.jsを使ったHTML5コーディングは、デファクトスタンダードだと言っても過言ではない気がします。
しかし「パフォーマンスが落ちる」などの理由でそういう「便利ツール」を毛嫌いする人もいます。今回はそんな人のために、html5shiv.jsを使わないHTML5コーディングについて少しお話します。

html5shiv.jsがやっていること

html5shiv.jsが主にやっていることは、以下です。

document.createElement("HTML5のタグ")

IE8以下でHTML5タグを使うと、ブラウザのHTMLパーサが「そんなタグねーよ」と、HTML5タグ要素をDOMツリーノードに変換してくれません。
そこで例えば、document.createElement("article")としてやると、どういう訳かパーサが「<article>っていうタグがあるのね」と解釈してくれるようになります(なので、document.createElement("mytag")と書くと、<mytag>というタグが使えたりします)。

その他印刷用のCSSの処理もやっていますが、これが本題ではないし完璧にわかっているわけではないので割愛します。

html5shiv.jsを使わないコーディング方法とは

html5shiv.jsを使わずにIE8以下にも対応させる方法は、ズバリ「HTML5タグにCSSをあてない」ことです。「なんだそんなことか」と思った方、そんなことです。ただ私が言いたいのは、HTML5タグの代わりにdiv要素やspan要素を使えということではありません。

具体的には以下のような手順でコーディングしていきます。

  1. 見出し<h1>〜<h6>や文章<p>、リスト<ul>,<ol>などのマークダウンで書けるレベルの最低限なタグで文書構造をつくる
  2. スタイリングする、必要であれば<div>でまとまりをつくる(ここではできるだけまとまりを作らないように工夫します)
  3. 意味的なまとまりをHTML5タグで囲んでいく

1. 文書構造をつくる

デモを見てもらうと分かりやすいかと思います。

デモページ1

文章構造のみのデモページのスクリーンショット画像

<small>以外はタグなしの純正マークダウンで作れる感じですね。スタイリングされてないデフォルトスタイルオンリーなページも結構好きです。

2. スタイリングし、必要に応じて<div>で囲む

スタイリングをします。

デモページ2

スタイリングしたデモページのスクリーンショット画像

必要最低限の<div>を心がけているつもりです..。ヘッダーの部分なんかは、ロゴとナビゲーションを<div>でまとめたくなりますがグッとこらえます。

3. 意味的なまとまりをHTML5タグで囲む

ヘッダーやフッター、記事や補足情報といった「意味的なまとまり」をHTML5タグで囲んでいきます。見た目はまったく変わりません。

デモページ3

WAI-ARIAやmicrodataといった属性もここに書くといい感じです。
ただし、<figure>で囲むときは、デフォルトでmarginが上下に1em、左右に40pxついてるのでリセットするか、そういうスタイルがついているとわかった上で使いましょう。

こんな感じでコーディングすると、HTML5タグが認識されなくてもスタイルが崩れることはありません。また、<div>をできるだけ使わないようにすることで、シンプルなマークアップをする癖がつくようになったりする旨味もあります。

HTML5の理念はセマンティックウェブ

そもそも、HTML5の最も大きな理念は「セマンティックウェブ」だった気がします。
つまり、「見た目」は従来の<div>などを使ってスタイリングし、「意味」をHTML5タグでまとまりをつくってあげたりWAI-ARIAなどの属性をつけてあげたりするのが、新旧が入り乱れる時代のマークアップの最適解なんじゃないかと思っています。早くHTML5だけでやっていける時代が来て欲しいですね。

画像を追加
リンクなど追加

参考

さらなる速さを求めて...

jQueryも必要ないかもしれないです