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
最新のブログ記事(新着順)
- くちばしフォント【商用可】
- 小説表紙などに使えそうな商用可なフォント「になロマン」
- 筆で書いたようなカナ書体「筆竹仮名B」
- 無料・商用利用可な丸文字ピクセルフォント「マルミーニャＭ」
- スペースコブラ風フォント
- Next.jsのVercelから商用利用可能なフリー汎用フォント「Geist Font 」
- 無料で使えるいい感じの日本語フォント「しっぽり太ゴシック」
- CSSのみで実装された５００種類のローディングアニメーション「CSS Loaders」
- 画像ホバーで様々なエフェクトをかけられる「Izmir」
- CSSのbox-shadowをGUIで生成できる「CSS Box Shadows Generator」
- 過去のエントリ
