0から目指すWebマスター Web制作に関する備忘録
検索

JavaScript

IEでhtml5のタグを認識させるJavaScript

IEでは、html5で追加されたタグを使用しても認識してくれません。
そのため、html5でマークアップしたIEでは「CSSが効かない!」とか「レイアウトが崩れる!」となってしまうのですが、これを回避するJavaScriptがあったのでメモ。

var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(‘,’);
for(var i=0;i<e.length;i++){
document.createElement(e[i]);
}

これだけ。あとはこのスクリプトをIEにだけ適用するようにする。

var isMSIE = /*@cc_on!@*/false;
if (isMSIE) {

var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(‘,’);
for(var i=0;i<e.length;i++){
document.createElement(e[i]);
}
}

てっきり、IEの場合はhtml5で追加された要素をdivやspanに置き換えて、みたいな処理をしてるんだろうな、と思っていたのでhtml5の導入を先延ばししてたのですが、それが大きな勘違いだったことを知りました。
もはやhtml5で書かない理由がなくなったので、これから作るサイトはhtml5でマークアップしていこうと思います。