cssをブラウザごとに適用する方法【IE \ Chrome \ FireFox \ Safari】
cssをブラウザごとに適用する方法です。コピペしてそのまま使えます。
IE
@media all and (-ms-high-contrast: none) {}
Chrome
@media screen and (-webkit-min-device-pixel-ratio:0) {}
Firefox
@-moz-document url-prefix() {}
Safari
::-webkit-full-page-media, :future, :root{}
基本的に｛｝の中に通常のcssを記載すればOKです。
【使用例】
@media all and (-ms-high-contrast: none) {
クラス名 {
適応させたいcss
}
}
@media all and (-ms-high-contrast: none) {
.test {
font-size: 16px;
}
}
Safariのみちょっと書き方がほかのブラウザと異なります。
::-webkit-full-page-media, :future, :root セレクタ {
適応させたいcss
}
::-webkit-full-page-media, :future, :root test {
font-size: 16px;
}
メディアクエリ内に記載する
メディアクエリ内に記載するには、丸ごとメディアクエリ内に書いてしまえばOKです。
@media screen and (max-width: 768px) {
@media all and (-ms-high-contrast: none) {
クラス名 {
適応させたいcss
}
}
}
IEとChromeなら
@media all and (-ms-high-contrast: none) and (max-width: 768px){}
@media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 768px){}
のようにandをさらに書き加えることでも適応されます。
いつも必要になる度に調べて探していたので、備忘録的に書きました。ブックマークなどしていただけると幸いです。
関連記事
