2020.3.18

cssをブラウザごとに適用する方法【IE \ Chrome \ FireFox \ Safari】

  • WEB
  • コーディング
cssハック

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をさらに書き加えることでも適応されます。

 

いつも必要になる度に調べて探していたので、備忘録的に書きました。ブックマークなどしていただけると幸いです。

Share Please

Read this too