IE8でのHTML5要素有効化あれこれ

category-icon

 もう7月も終わりですね、martinです。相変わらず時の流れは速いもので。

 このサイトのブログの基本テーマ(スキン)「Basic」では、試験的にHTML5を導入しています。HTML5では新しい要素がいくつか追加Link されていますが、IE9未満のブラウザでは、articleheader, navなどのクールで新しい要素に対するスタイルシート指定が効かない、という事が昔から知られています。これに対するアプローチとして、 document.createElementを使うとスタイルシートでの指定が可能になるよ、というのがよく知られています。初出は Sjoerd VisscherLink さんあたりでしょうかねぇ。
document.createElement(”article”); // 未知の要素articleに対してIEでもCSS指定が可能になる

 このdocument.createElementを使うテクニックは、いろんなところで見かけることができて、有名どころでは、Remy sharp氏のhtml5.jsLink あたりですね。

 もっとも、このテクニックを使っただけでは、IEでHTML5化を効かせたページを印刷したときまでは反映されないので、これに対しては、IE Print Protector Link がよく知られていると思います(個人的には、印刷のサポートまではあまり興味がありませんが)。

 で、このcreateElementを使うテクニックは、ベタに書けば以下のような感じになります。

// ここでは簡潔化のため、以下の6個の新要素に絞ってます。
<!--[if lt IE 9]>
var html5_elements = ["header", "nav", "article", "section", "aside", "footer"]; 
for (var i = 0, len = html5_elements.length; i < len; i++){
 document.createElement(html5_elements[i]); // 各要素に適用
}
<![endif]-->
 どこで最初に見かけたのか失念しましたが、これを一行(ワンライナー)で簡潔に済ませたスクリプトを見たときはいたく感心しました。Dean Edwards氏のブログLink もこうなっています。
"header,nav,article,section,aside,footer".replace(/¥w+/g, function(a){document.createElement(a)});
 上のポイントは、replaceメソッドの引数に関数を指定できて、その関数内では、正規表現にマッチした要素を適宜適用していく点です。ループみたいなことを勝手にやってくれる点ですね。おそらくこれ以上短くは書けないのではないかと思うのですが、息抜きに自分なりにいくつか考えてみました。
"header,nav,article,section,aside,footer".split(',').sort(function(a){return document.createElement(a)*1});
 これも、似たような発想からですね。自動でなんかやってくれるという。
with("header,nav,article,section,aside,footer".split(',')))while(length)document.createElement(pop());
 ここではwith構文を使ってみました。これもなかなかシンプルです。同じくwithと、Enumeratorを使って、
with(new Enumerator("header,nav,article,section,aside,footer".split(',')))for(;!atEnd();moveNext())document.createElement(item());
 これは、ちょっと長いし、Enumerator ObjectLink はマイナーですかね。

 短さ命で、グローバル変数の汚染なんて気にしないぜっ、という向きには以下のようなものもありかと思います。

s="header,nav,article,section,aside,footer".split(',');while(s[0])document.createElement(s.pop());

 for文関連では、

for(i in s="header,nav,article,section,aside,footer".split(','))document.createElement(s[i]);
とか
for(i=0;n="header,nav,article,section,aside,footer".split(',')[i++];document.createElement(n));
とかですかねぇ。

 ちなみに、配列を作るのに、文字列にsplit()をかませるというのは、よく見かける手法です。ここでの、6個ぐらいの要素数ではあまり差は出ませんが、要素数が増えてくると、逐一ダブルクォート(or シングルクォート)で括っていくやり方と大きく差が付いてきます。

var html5_elements = ["header", "nav", "article", "section", "aside", "footer"]; // これより
var html5_elements = "header,nav,article,section,aside,footer".split(','); // こっちが記述が短い 

 正規表現から配列も出来ますね。

var html5_elements = "header,nav,article,section,aside,footer".match(/¥w+/g);

 以上、トリビアルなエントリーでした

   

— posted by martin at 12:18 pm   commentComment [13]  pingTrackBack [1]

この記事に対するコメント・トラックバック [14件]

scrollUp1. yoseyama Blog Website — 2011/01/18@23:48:06

何かと一歩遅れた感のあるメジャーブラウザ「IE」ですが、html5に対しても他のブラウザと比較すると、まだまだのようです。でも、待っているばかりでは先に進めません。今回、このサイトの構築の際、IEに対しての対応策をまとめてみました。...
続き »

2. レプリカ腕時計販売 Website — 2017/03/07@12:09:23

唯一の正しいURL:JpSuperGreat7.CoM_スーパーコピー時計,レプリカ腕時計販売[日本人気店]JpSuperGreat7「15% OFFセール開催中!」。スーパーコピー時計直営店.会員登録頂くだけで2000ポイント 取得できます!
唯一の正しいURL:www.jpsupergreat7.com/
レプリカ時計 http://www.jpsupergreat7.com/Link

3. ロレックススーパーコピー腕時計 Website — 2017/03/08@14:55:44

ロレックススーパーコピー腕時計_レプリカロレックス(N級) JPwatch365.CoM 責任者:山田!当店は【1~8万円】スーパーコピー全商品一覧ロレックスのみを取り扱っていますので、品質も2年間保証しています!
ロレックスコピー http://www.jpwatch365.com/iowares/watches-io1/Link
ロレックス エクスプローラー http://www.jpwatch365.com/iowares/watches-small-io3/Link

4. スーパーコピー Website — 2017/03/09@14:08:51

唯一の正しいURL:www.JPwatch365.CoM!!スーパーコピー時計,人気ロレックスコピー時計大特価通販JPwatch365.CoM!!!ロレックススーパーコピー時計,Hublotコピーなどのスーパーコピー品を扱っております。世界のブランド腕時計スーパーコピーが大特価!
スーパーコピー http://www.jpwatch365.com/Link
ロレックススーパーコピー http://www.jpwatch365.com/iowares/watches-io1/Link

5. スーパーコピーパネライ Website — 2017/03/10@14:32:52

パネライスーパーコピー腕時計_レプリカパネライ(N級) JPwatch365.CoM
スーパーコピーパネライ http://www.jpwatch365.com/iowares/watches-io2/Link

scrollUp6. レプリカウブロ(N級) Website — 2017/03/11@18:11:26

ウブロスーパーコピー腕時計_レプリカウブロ(N級),責任者:山田!当店は【1~8万円】スーパーコピー全商品一覧ウブロのみを取り扱っていますので、品質も2年間保証しています!
スーパーコピーウブロ http://www.jpwatch365.com/iowares/watches-io4/Link

7. ロレックススーパーコピー Website — 2017/03/13@14:36:06

スーパーコピーロレックス代引き専売店NO.1!
ロレックススーパーコピー http://www.keepgoing365.com/tokei/b1/Link
ロレックス サブマリーナ http://www.keepgoing365.com/tokei/s5/Link

8. スーパーコピー代引き専売店 Website — 2017/03/14@17:47:37

スーパーコピー時計,スーパーコピー代引き専売店NO.1!
偽物時計 http://www.keepgoing365.com/Link

9. パネライコピー品の販売専門 Website — 2017/03/16@11:35:05

スーパーコピーパネライ代引き専売店NO.1!世界大人気 激安パネライスーパーコピーの新作品を探していますか。パネライコピー品の販売専門ショップです.
パネライコピー http://www.keepgoing365.com/tokei/b2/Link
時計コピー http://www.keepgoing365.com/Link

10. スーパーコピーガガミラノ Website — 2017/03/16@15:51:39

スーパーコピーガガミラノ代引き専売店NO.1!.
スーパーコピーガガミラノ http://www.keepgoing365.com/tokei/b11/Link

scrollUp11. スーパーコピーロレックス Website — 2017/03/17@16:59:29

ロレックススーパーコピー腕時計_レプリカロレックス(N級) JPwatch365.CoM 責任者:山田!当店は【1~8万円】スーパーコピー全商品一覧ロレックスのみを取り扱っていますので、品質も2年間保証しています!
スーパーコピーロレックス http://www.jpwatch365.com/iowares/watches-io1/Link

12. レプリカ腕時計販売 Website — 2017/03/20@18:39:35

スーパーコピー時計,レプリカ腕時計販売[日本人気店]JpSuperGreat7
スーパーコピー http://www.jpsupergreat7.com/Link
ロレックスコピー販売 http://www.jpsupergreat7.com/pewares/watches-pe1/Link

13. 人気スーパーコピーブランド時計 Website — 2017/03/22@11:13:45

スーパーコピー時計通販、人気スーパーコピーブランド時計一覧! 世界大人気激安時計スーパーコピーの新作品を探していますか。ブランド時計コピー品の販売専門ショップです
レプリカ時計 http://www.always777.com/Link

14. 代引き専売店 Website — 2017/03/24@12:18:19

スーパーコピー時計,スーパーコピー代引き専売店NO.1! 世界大人気 激安時計スーパーコピーの新作品を探していますか。ブランド時計コピーの販売専門ショップです スーパーコピー時計
http://www.keepgoing365.com/Link

この記事に対する TrackBack URL:

設定によりTB元のページに、こちらの記事への言及(この記事へのリンク)がなければ、TB受付不可となりますのであらかじめご了承下さい。

コメントをどうぞ。 名前(ペンネーム)と画像認証のひらがな4文字は必須で、ウェブサイトURLはオプションです。

ウェブサイト (U):

タグは使えません。http://・・・ は自動的にリンク表示となります

:) :D 8-) ;-) :P :E :o :( (TT) ):T (--) (++!) ?;w) (-o-) (**!) ;v) f(--; :B l_P~

     
T: Y: ALL: Online:
Created in 0.0193 sec.
prev
2017.5
next
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31