HTML5.jsの中身を見てみよう

リクリ忘年会 with リクリチャット3rd

HTML5.jsの中身を見てみよう

2010.12.18

自己紹介

かみやん (Twitter@kamiyam)
システム開発会社
ほとんどWebのシステム
Java・C#

最近はクライントサイド(HTML5・Javascript)の勉強をしてます。

HTML5.jsって何？

IE6/7/8でHTML5を使いたい時に便利なjavascriptライブラリ

html5shiv - Google Code: http://html5shiv.googlecode.com/svn/trunk/html5.js

使い方

HTML5.jsを読み込む: IE9以前のIE6/7/8に適用させる


          <!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

使い方

cssを定義する: IE6/7/8はHTML5要素の事について何も知らないのでCSSを定義する


          <style type="text/css">
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary
{
	display:block;
}
</style>

HTML5.jsの中身

うん、何かめんどくさそうですね(´・ω・`)

// html5shiv MIT @rem remysharp.com/html5-enabling-script  // iepp v1.6.2 MIT @jon_neal iecss.com/print-protector  /*@cc_on(function(m,c){var z="abbr|article|aside|audio|canvas|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video";function n(d){for(var a=-1;++a<o;)d.createElement(i[a])}function p(d,a){for(var e=-1,b=d.length,j,q=[];++e<b;){j=d[e];if((a=j.media||a)!="screen")q.push(p(j.imports,a),j.cssText)}return q.join("")}var g=c.createElement("div");g.innerHTML="<z>i</z>";if(g.childNodes.length!==1){var i=z.split("|"),o=i.length,s=RegExp("(^|\\s)("+z+")",  "gi"),t=RegExp("<(/*)("+z+")","gi"),u=RegExp("(^|[^\\n]*?\\s)("+z+")([^\\n]*)({[\\n\\w\\W]*?})","gi"),r=c.createDocumentFragment(),k=c.documentElement;g=k.firstChild;var h=c.createElement("body"),l=c.createElement("style"),f;n(c);n(r);g.insertBefore(l,  g.firstChild);l.media="print";m.attachEvent("onbeforeprint",function(){var d=-1,a=p(c.styleSheets,"all"),e=[],b;for(f=f||c.body;(b=u.exec(a))!=null;)e.push((b[1]+b[2]+b[3]).replace(s,"$1.iepp_$2")+b[4]);for(l.styleSheet.cssText=e.join("\n");++d<o;){a=c.getElementsByTagName(i[d]);e=a.length;for(b=-1;++b<e;)if(a[b].className.indexOf("iepp_")<0)a[b].className+=" iepp_"+i[d]}r.appendChild(f);k.appendChild(h);h.className=f.className;h.innerHTML=f.innerHTML.replace(t,"<$1font")});m.attachEvent("onafterprint",  function(){h.innerHTML="";k.removeChild(h);k.appendChild(f);l.styleSheet.cssText=""})}})(this,document);@*/

処理だけを簡単に書くと

HTML5の各新要素をjavascriptでdocument.createElement()する
IE6/7/8印刷用のCSS処理

document.createElement()?

『document.createElement("{HTML5新要素}")』を実行すると新要素のタグが認識されるようになります

abbr	article	aside	audio	canvas
details	figcaption	figure	footer	header
hgroup	mark	meter	nav	output
progress	section	summary	time	video

ちなみに

document.createElement()を使う前はこんな感じでタグが認識されてしまいます

IE6/7/8印刷用のCSS処理

このままではIE6/7/8で印刷すると表示が崩れるので、それを修正するライブラリの処理をHTML5.jsでも使っているようです

どんなライブラリ？

IE6/7/8でHTML5要素を崩れず印刷するライブラリ

IE Print Protector: http://www.iecss.com/print-protector/

これで印刷もバッチリ！のはずが、会社のIE6とIE8(XP)ではちゃんと動きませんでした・・・

IE Print Protector（を使ったHTML5.js）の変な所

IEで『印刷プレビュー』を一度キャンセルした後、さらに『印刷プレビュー』

印刷プレビュー

見事にCSSが適用されなくなりました・・・

やっぱりチェックが必要？

元々ブラウザに無いものをjavascriptを使って無理矢理実装しているので、実際の仕事で使う時は気をつけたほうがいいかも？

(※2010/12/19追記): HTML5.jsの問題点としてIssue1があがってました（発表後、気が付きました（汗））; http://code.google.com/p/html5shim/issues/detail?id=1

本日のこれ豆知識な

先日、Twitter@5509さんがHTML5.js(と同じような処理）をしてからjavascriptでゴニョゴニョするとCSSが適用されないんだぜ！って言って（書いて）ました

HTML5でコーディングしたページでjQueryを使うときに気をつけること: http://5509.me/log/notification-of-using-jquery-with-html5

まとめ

HTML5.jsはIE6/7/8にHTML5要素を適用するためのjsライブラリ
HTML5ブロック要素はIE6/7/8のためにCSSで定義(display:block)しましょう
IE6/7/8では印刷時に表示が崩れるのでIE Print Protectorを使っている
けど、なんかIE Print ProtectorもおかしいのでIEの印刷は気をつけましょう
IEで印刷気にするならHTML5なんか使わないほうがいいんじゃないですか？って誰かが言って(ry

ご清聴ありがとうございました

〜お疲れ様でした〜