自動的にクラスを付加してくれるJavaScript – offspringjs

JavaScript

疑似クラスを多用し、シンプルなCSSマークアップを行いたい。そう思っている人は少なくないはず。しかし、ブラウザシェアの大半を占めているInternet Explorer6、7でサポートしている疑似クラスが少ないため、first-childやlast-childなどを利用することが出来ない。そこで登場するのが「offspringjs」というJavaScript。これを利用することにより、IE6やIE7などの非モダンブラウザでも、自動的に疑似クラス風(?)のクラス付けを行い、マークアップの手助けをしてくれる。

offspringjs

簡単に説明すると「offspringjs」は、first-childやlast-childなどを疑似クラスではなく、クラスとして利用できるように、HTMLを自動的に解析してくれるマークアップサポートJavaScriptだ。Alex Bischoff氏により開発され、Google CodeにMITライセンスとして公開され、開発されている。

offspringjs – Google Code
http://code.google.com/p/offspringjs/

例えば、以下のソースコードがあったと仮定する。

<ul>
<li>TEST A</li>
<li>TEST B</li>
<li>TEST C</li>
<li>TEST D</li>
<li>TEST E</li>
</ul>

通常Safari3などのCSS2疑似クラスをフルサポートしているブラウザで、TEST Aのテキストカラーをredにしたい場合、以下のようにCSSに表記する。

ul li:first-child {
color:red;
}

CSS3で策定中の疑似クラスに、nth-childというものがある。例えば、偶数行の場合に、テキストカラーをred、奇数行の場合にblueにしたい場合は、以下のようにマークアップする。

ul li:nth-child-even {
color:red;
}
ul li:nth-child-odd {
color:blue;
}

さらに策定中のCSS3より、何番目の要素のスタイルを適応させるための疑似クラス、nth-child()を使い、3番目のリストタグのみ、テキストカラーをblackにできる。

ul li:nth-child(3) {
color:black;
}

もちろんこれらの疑似クラスは、IE6,IE7などのブラウザでは動作はしないのだが、「offspringjs」を動作させることにより、HTMLが以下のように表記されたかのように、ブラウザ側に認識させることができる。

<ul>
<li class="first-child nth-child-odd nth-child-1">TEST A</li>
<li class="nth-child-even nth-child-2">TEST B</li>
<li class="nth-child-odd nth-child-3">TEST C</li>
<li class="nth-child-even nth-child-4">TEST D</li>
<li class="last-child nth-child-odd nth-child51">TEST E</li>
</ul>

つまり、先述したような疑似クラスを使う事を前途とした、シンプルはHTMLを表記することが可能になる。つまり、先ほどの疑似クラスを使ったマークアップのようにするためには、以下のようにCSSを表記すればよい。

<!-- リストタグの初めの要素のテキストカラーをred -->
ul li.first-child {
color:red;
}
<!-- リストタグの偶数行をred、奇数行をblueに -->
ul li.nth-child-even {
color:red;
}
ul li.nth-child-odd {
color:blue;
}
<!-- リストタグの偶数行をred、奇数行をblueに -->
ul li.nth-child(3) {
color:black;
}

offspringjsによりコーディング工数を削減

このoffspringjsを用いることにより、今までidやclassを多用して実現していたガチガチのデザインを、必要最小限のソース表記で実現することが可能になり、結果的にコーディングに費やす時間を大幅に削減することが出来ることだろう。特に近年のMicrosoftのご乱心により、極限まで複雑化したCSSマークアップの工数を考えると、HTMLコーディングは出来る限り手をかけず、CSSに専念したいコーダーは相当多いはずなので、かなり重宝するのではないだろうか。

しかし気をつけたい点が何点かある。一つはJavaScriptを実行できる環境ではないと動作しない事。PC用のブラウザでは気にしなくても良いだろうが、その他の端末となると話が違ってくるので注意が必要だ。次に実行速度の問題。offspringjsを動作させるにあたり、HTMLをフルに解析するので、ソースコードの量によって速度は大きく変わってくる。JavaScriptはクライアント側の処理速度によってスピードが大きく変化するため、ターゲット層によっては問題になってくることだろう。

上記の問題をすべてクリアしたのなら、offspringjsは大きな即戦力になる。個人的な体験談に、オープンソースのWebアプリをカスタマイズする案件があった。PHPで書かれており、ガチガチのスタイル付きHTMLタグを書き出す、めちゃくちゃめんどくさいWebアプリだったが、各スタイルを無効にするJavaScriptを書いて1回リセットした後に、offspringjsを読み込ませてCSSマークアップを行ったところ、当初見込んでいた工数が大幅に削減された。今思うと、HTMLタグを書き出すところを見つけ出し、すべて書き直していたら恐ろしいほど時間がかかっていたことだろう。あぁ恐ろしい・・・。

上記はほんの一例だが、同じような案件や、新規に制作するサイトはもちろん、既存サイトの修正にも利用でき、汎用性は相当高いJavaScriptに違いないだろう。好き嫌いはあると思うが、HTML側はシンプルに、CSSでがっつりとデザインしたいコーダーに是非お勧めしたい。

related story