IEだけじゃない？ Microsoft Edgeでも崩れが。各ブラウザのみに対応するCSSの書き方は？
2020.03.25
普段の買い物はもっぱら「Suica」でしたが、最近は友人との割り勘をするために「PayPay」デビューをしました。
小銭がない時はその分だけ送金すればいいので、非常に便利ですよね。
買い物は「Suica」、友人に送金するために「PayPay」と使い分けていましたが、先日「LINE Pay」で送金してくれと言われました。
サービスが複数あると管理が煩雑になるので、統一してくれというのが最近１番の願といっても過言ではありません。
みなさま、こんにちは。
話は続きますが、これは電子マネーに限ったことではありません。
色々なサービスが出ることは、巡り巡って消費者に還元されるので良いことなのですが、それに対応しないといけない技術者にとっては恐怖でしかありません。
制作者を悩ませるブラウザの多様化
web制作者にとって「ブラウザ」の多様化がそれに当てはまります。
最近は株式会社LIGがIE対応を辞めるという決断をし、話題になりました。
今後LIGが制作するWebサイトは、Internet Explorerの対応をやめます。
これは非常にありがたい。
とはいえ、いまだにIEを使っている人はいるので、どのブラウザでも崩れないように制作したいと思います。
前文が長くなりましたが、今回はある一部のブラウザで崩れた場合に対応できるよう、それぞれのブラウザのみに対応するCSSの書き方をまとめました。
chrome・Firefox・Edge・Internet Explorer、それぞれに別のCSSをあてたい
まずはサンプルサイトを作成したのでchrome・Firefox・Edge・Internet Explorerを使用し確認してみてください。
【DEMO】IEだけじゃない？ Microsoft Edgeでも崩れが。各ブラウザのみに対応するCSSの書き方は？
各ブラウザで文字色が変わっていたのが確認できましたでしょうか。
それではソースコードを記載しますので、参考にしてみてください。
まずは、 SCSS で書いたソースを。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.text { margin-top: 20px; /* chrome opera */ @media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) { color: darkred; } /* Firefox */ @-moz-document url-prefix() { color: darkorange; } /* Edge */ @supports (-ms-ime-align: auto) { color: darkgreen; } /* IE */ @media all and (-ms-high-contrast:none) { color: darkmagenta; } } |
次に各ブラウザごとに小分けにしたソースを CSS で記載していきます。
chrome
|
1 2 3 4 5 |
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { .d_flex .box .text { color: darkred; } } |
Firefox
|
1 2 3 4 5 |
@-moz-document url-prefix() { .d_flex .box .text { color: darkorange; } } |
Edge
|
1 2 3 4 5 |
@supports (-ms-ime-align: auto) { .d_flex .box .text { color: darkgreen; } } |
Internet Explorer
|
1 2 3 4 5 |
@media all and (-ms-high-contrast: none) { .d_flex .box .text { color: darkmagenta; } } |
もしchrome・Firefox・Edge・Internet Explorer、どれかのブラウザで崩れが起きた際は、上記 CSSを適用し調整してみてください。
※「Safari」は確認する手段がなかったので記載しませんでしたが、調べてみると多くの方がアウトプットしていましたので、そちらを参考にしてみてください。
