小粋空間  -  a cheap joke and a play on words site

Google ChromeとSafariのCSSハック

Google ChromeとSafariのCSSハックを紹介します。

CSSハックに用いる文字列は以下です。

@media screen and (-webkit-min-device-pixel-ratio:0) {}

使い方ですが、適用したいセレクタ全体を上記の文字列でまるっと括れば、括ったセレクタ（青色）がGoogle ChromeとSafariのみに適用されます。

@media screen and (-webkit-min-device-pixel-ratio:0) {
    #hoge {
        padding-top: 1px;
    }
}

複数のセレクタを適用したい場合は、次のようにまとめて書くことができます。

@media screen and (-webkit-min-device-pixel-ratio:0) {
    #hoge {
        padding-top: 1px;
    }
    .huga {
        margin-bottom: 2px;
    }
}

参考記事は以下です。タイトルには「Chrome alone」とありますが、WebKit系のブラウザに有効なようです。

Mahaveer's Blog - CSS Chrome Fix (Chrome alone css hack)

こういったCSSハックを使わないのがいいことは理解しています。すいません。