もう7月も終わりですね、martinです。相変わらず時の流れは速いもので。
このサイトのブログの基本テーマ(スキン)「Basic」では、試験的にHTML5を導入しています。HTML5では新しい要素がいくつか追加 されていますが、IE9未満のブラウザでは、articleやheader, navなどのクールで新しい要素に対するスタイルシート指定が効かない、という事が昔から知られています。これに対するアプローチとして、 document.createElementを使うとスタイルシートでの指定が可能になるよ、というのがよく知られています。初出は Sjoerd Visscher さんあたりでしょうかねぇ。document.createElement(”article”); // 未知の要素articleに対してIEでもCSS指定が可能になる
このdocument.createElementを使うテクニックは、いろんなところで見かけることができて、有名どころでは、Remy sharp氏のhtml5.js あたりですね。
もっとも、このテクニックを使っただけでは、IEでHTML5化を効かせたページを印刷したときまでは反映されないので、これに対しては、IE Print Protector がよく知られていると思います(個人的には、印刷のサポートまではあまり興味がありませんが)。
で、この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氏のブログ もこうなっています。
"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 Object はマイナーですかね。
短さ命で、グローバル変数の汚染なんて気にしないぜっ、という向きには以下のようなものもありかと思います。
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);
以上、トリビアルなエントリーでした
1. yoseyama Blog — 2011/01/18@23:48:06
続き »