他のブラウザには適用せずにChromeだけに特定のcssを適用する方法

どうしてもブラウザ間で挙動が異なってしまって別の対応をしなくてはならないことがある。

今回はChromeだけheightを1pxにしたくて、他のブラウザは100%にしたいってことがあった。

調べたらWebkit系列のGoogle Chromeだけ特別にcssを適用するには、以下のように記述すればいいらしい.

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .abc { height:1px; }
}

上記のabcってところはいつも通りCSSで指定したいものを記述.

上記の@mediaより前に他のブラウザに適用するCSSを書いておけば、それらはInternetExplorerやFirefoxに適用される. 最後に記述しているmediaだけがWebkit系列に適用される.

About the author

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です