CSSハック等に応用できそうなブラウザが解釈しているCSSがわかる「Selector Shell」
2009年01月22日-
スポンサード リンク
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ハック等に応用できそうなブラウザが解釈している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サイト開発にすごい便利ですね。
関連エントリ
スポンサード リンク
By.KJ : 2009年01月22日 12:07 
間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- 15000以上のいい感じの線形アイコン「Lineicons」
- CSSやTailwindでのCSSスニペットライブラリ「CSS Snippets Library」
- AIを使ってサイトマップが作れる「Octopus.do」
- ライブラリ依存のないモーダルオープンライブラリ「Blendy」
- 個性的な明朝フリーフォント「築豊初号明朝OFL」
- CSSで太陽が差し込むようなアニメーション実装
- 可愛くアニメーションする「beautifully crafted animated icons」
- アイソメトリックなアイコンがアイコンがPNG,SVGでゲットできる「Isoicons」
- ユニークなカタカナフォントtorisippo
- 美しいメッシュグラデーションをCSSで簡単に取得できる「MSHR」
- 過去のエントリ
