純粋なCSSだけで各ブラウザ間の表示互換性が保てればベストだが、実際の現場ではそのようなことがないのはよく知られている。そのため、各ブラウザ向けにCSSハックが登場しており、表示の互換性を保つために使われている。

どのハックが有効かチェック

だがFirefoxの各バージョン、Google Chromeなど様々なブラウザに対してそれが有効であるか無効であるか知っている人は少ないはずだ。そんなときには使えるハックなのかどうか、CSS Selector Shellを使ってチェックしよう。

今回紹介するオープンソース・ソフトウェアはCSS Selector Shell、CSSテスターだ。

CSS Selector Shellでは二つのテキストエリアが表示されている。左側のテキストエリアには幾つかのCSSが記述されている。Geckoエンジン向けのハックや、IE7用、IE6以前用、WebKit用などのハックも記述されている。ここは自由に変更できる。

Firefoxで試したところ

そしてTest Itボタンを押すと、右側に表示しているブラウザに対して有効なCSS設定のみが記述される。WebKitの場合は入れ子のCSS記述は使えるようだが、他のブラウザ向けのハックは消えているので使えないことが分かる。

さらにサンプルのHTMLに対してそのCSSを適用した結果も表示される。ここでハックを試し、デザインの乱れがないことを確認すれば開発作業も効率化されるだろう。ブラウザの種類とともにレンダリングエンジンも増えている昨今、ハックを使わないで済めばベストだがそのようなことはない。現場で役立つソフトウェアだ。

**Selector Shell

　**
http://selector-shell.appspot.com/

selector-shell - Google Code

　http://code.google.com/p/selector-shell/