Selector Shell

CSSハック等に応用できそうなブラウザが解釈しているCSSがわかる「Selector Shell」。
ボックスにCSSを入力して「Test It」を押せば解釈されているCSSが分かります。



これを使えば、どんなCSSがちゃんと利いていて作用するかっていうのが分かりますね。

たとえば、次のようなCSSがサンプルで最初からはいってます。
Gecko, IE用や, Webkit 用などさまざまなハックを使っていますが、各種ブラウザで「Test It」してみれば何が利いているかが一目瞭然です

/* Some example CSS */
body .class1 {
  border-color: black;
}
/* Gecko hack. */
@-moz-document url-prefix() {
  body .class1 { border-color: orange; }
}
/* Pre IE7 hack. */
* html body .class1 {
  border-color: green;
}
/* IE7 hack. */
body .class1 {
  *border-color: purple;
}
/* Webkit hack. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  body .class1 { border-color: red; }
}

これは、CSSサイト開発にすごい便利ですね。

関連エントリ

• サイトのCSSを見たままリアルタイムに編集するツール色々
• JavaScriptを使わずCSSのみでシンプルなツールチップ実装
• CSSでデザインされたツールチップボックスいろいろサンプル