「IE最新版を基準に、Chrome と Firefox にだけ別のスタイルを利かせたい。」という特異な例に対面する機会がありました。

解決策は探せばあるものなんですね。。。

CSSでスタイルをIEのみ・Firefoxのみ・Chromeのみに適用する方法

@media all and (-ms-high-contrast: none) {
/* IEに効かせたいスタイルを記述する */
}

@-moz-document url-prefix() {
/* Firefoxに効かせたいスタイルを記述する */
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Chromeに効かせたいスタイルを記述する */
}

なにより驚いたのは、CSSハック的なやり方じゃなくて、メディアクエリとして扱える点です。

メディアクエリ万能すぎるやろ!!

デバイスやブラウザ、解像度、表示デバイス、表示形式などなど、ありとあらゆる状態に対して対応できるやん!

という訳で、CSSの進化に驚いた話でした。

カテゴリー: ブログ