【CSS】IEやAndroidで崩れてる！？CSSハックのご紹介！

今回の内容は完全に備忘録というかメモというか…
最近、久しぶりに使用したので書き記しておきます。

コーディングをする際は、Chromeをメインで確認しながら始める方が多いと思いますが、ほとんどのCSSプロパティに対応してますし、CSSの記述が足りなくても察してくれますし優秀ですよね。

そこに依存していると、崩れてしまうのがIEですね。

■IEでの崩れ

単純にCSSが適応されていないものも多くあります。対応されてないと思って使っていないですが、最近はどうなんでしょうか。
例えばこんなCSS

width: max-content;
justify-content: space-evenly;

あとは、「position: absolute;」にした時に、置きたい位置に収まっているからと「top」「left」等の記述をサボると崩れたりしますよね。

他にも、フォントによって位置が多少ズレる、文字の間隔が違うなど、様々な要因で崩れます。

そもそも対応していないCSSは使わなければいいのですが、フォントとかは仕方ないのでIEのみのCSSを当てて修正します。
それがこちら。

@media all and (-ms-high-contrast: none){
  .hoge{
    letter-spacing: 0.02em; /* IE10以上 */
  }
}

これで、IEだけにCSSを当てることはできます。IE10以上の対応になりますのでそれ以外にも適応させなければならない場合はこちらを参考にしてください。

ここで一つ注意点ですが、ツールや拡張機能とかで一括で「ベンダープレフィックス」を付けてしまうとChromeにも効いてしまうので注意ですね。私は以前、一括付与した際にChromeでもCSSが効いてしまっていてしばらくハテナマークが出ていました…

次によく崩れるのがAndroidかなと思います。

■Androidでの崩れ

Androidでの崩れるイメージはテキスト部分ですかね〜。テキスト間隔が少し広くなっている気がしますね。段落ちしてほしくない箇所で落ちてしまうことがあります。
AndroidのみにCSSを当てたい時はこちら。

if ( navigator.userAgent.indexOf('Android') > 0 ) {
    $("body").addClass("Android");
};

このスクリプトを追加して、「body」に「Android」のクラス名を付けてCSSを指定してあげます。
反映されてるかわからない時は、一旦大幅に変えてみてから調整するのがいいと思います。

他にもブラウザ・OS毎のCSSハックがございますので下記にまとめておきます。

■ブラウザ毎のCSSハック

・IE

@media all and (-ms-high-contrast: none){
  .hoge{
    letter-spacing: 0.02em; /* IE10以上 */
  }
}

・Firefox

@-moz-document url-prefix(){
  .hoge{
    letter-spacing: 0.02em;
  }
}

・Chrome

@media screen and (-webkit-min-device-pixel-ratio:0){
  .hoge{
    letter-spacing: 0.02em;
  }
}

・Safari

@media screen and (-webkit-min-device-pixel-ratio:0) {
  ::i-block-chrome, .hoge{
    letter-spacing: 0.02em;
  }
}

■OS毎のCSSハック

・Androidのみ

if ( navigator.userAgent.indexOf('Android') > 0 ) {
    $("body").addClass("Android");
};

・iPhoneのみ

if ( navigator.userAgent.indexOf('iPhone') > 0 ) {
    $("body").addClass("iPhone");
};

他には「css_browser_selector」というものもあるようなのですが、私は使ったことがないので参考URLをご覧ください。

それではまた。

■参考URL

https://qiita.com/katsunory/items/0cbb26bf23d961161642