【CSS】ブラウザ別のCSS指定方法

最近CSSをいじることが多く、ブラウザ毎にCSSを適用する場合などがあるので、その方法の覚書。

Google Chrome / Safari / Opera

/* chrome safari opera */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .hack-font {
        color: #666666;
    }
}

Safari

/* safari */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    _::-webkit-full-page-media, _:future, :root .hack-font {
        color: #666666;
    }
}

Firefox

/* Firefox */
@-moz-document url-prefix() {
    .hack-font {
        color: #666666;
    }
}

Edge

調べてみたけど、これだ！！といったものがなかったので、参考になりそうなサイトのURL載せておきます！

https://qiita.com/feo52/items/b58de2c43e1ba7b10b2e

CSSCSS

Posted by akimix