HTML5になった新スキンで、IEではどういう風になるのかな? | 雷牙@448★のブログ

雷牙@448★のブログ

アメブロのカスタマイズなどのテストなどをおこなっています。

HTML5になった新スキンで、IEではどういう風になるのかな?

カスタマイズ可能な(CSS編集ができる)旧ベーシックなどでは、XHTML1.0でした。
(Transitionalですけど、一応はXHTMLでした。)

そして、新カスタマイズ用スキンはというとHTML5になりました。
(正式勧告は延期されましたが、W3Cが勧告する予定になっています)



現状で、懸念されることとしてはブラウザの対応状況だと思います。



IE8以下では、HTML5特有の要素はDOMで扱えないわけですから、

CSSのセレクタなどで使えないんではないかという疑問がわきました。

とりあえず、試した方がはやいと思いさっそくその辺が確認できるカスタマイズをする事にしました。

試した要素は『hgroup』です。(h1~h6要素をグループ化する要素)

新カスタマイズ用スキンではブログタイトルのh1要素とブログの説明のh2要素を内包しています。

ここの幅を、左サイドバーにあわせた幅にして

ヘッダーの馬鹿でかい広告バナーは絶対配置にして上につめてやることにしました。


.headerBnrArea{
position:absolute;
left:202px;
width:728px;
height:97px;
padding:0;
}
.skinHeaderArea2{
padding:0 0 10px;
}
.skinBlogHeadingGroupArea{
padding:0;
}
hgroup{
width:180px;
}


IEで確認したところ、ちゃんとスタイルが反映されていました(^O^)

で、どうやっているかソースを確認してみたところ、それらしき記述がありました。

<!--[if lt IE 9]><script src="http://stat100.ameba.jp/common_style/js/library/html5js/html5.js"></script><![endif]-->


これは、IE特有のコンディショナルコメントを使ってIE9未満の時は『html5.js』を読み込んでいます。

このスクリプトは単純にdocument.createElementというメソッドで要素を作成しているだけです。

ってことはHTML5に対応できたわけではないですね・・・
(要素を、CSSなどで認識できるようにはなるけど)

なので、実質HTML5の真骨頂である動画や音声、グラフィックの描画というものはIEでは使えないはずです。

といっても、まだ、ドラフト状態であるんでそこは考えないでも良いかと・・・

結局、アメブロの運営も将来的なことを考慮して切り替えたんでしょう・・・