貯金2000万からのセミリタイア継続中

40代・貯金2000万円で無謀なセミリタイア生活を始めて5年以上継続中。気がつけば50代に…

調子こいてCSSいじってたらIEの表示がおかしくなってた

まだ細かくCSSいじってます

まぁデザイン的にはほぼほぼこれでいいかな、と思っているんですが、まだ細かくCSSいじっています。

  • デスクトップ(Chrome,Firefox,Opera)
  • タブレット
  • スマホ

でチェックしてると、細かいとこで思ったとおりになってない部分もあったりしましたし。

IEでチェックしてみると表示がおかしい!

最後にIEでもチェックしておかねば・・・とIE11でチェックしたら表示がおかしい!

IEの表示

タイトルのバックグラウンドが真っ白け。他にも色々と思った設定になっていません。

IEはCSSカスタムプロパティ(CSS Variables)非対応

今後いじりやすくしようと、複数設定が入っている色設定にCSS Variables(変数)を使ったのが失敗だったようです。

:root {
--thema-color: #0250a3;
}

body {
background-color: var(--thema-color);
}

 IEはこれに非対応なんですね。知らずにやってしまってました。ということでこの設定を元に戻して表示が正常に戻りました。

IEの利用率はまだまだ高い!

ブラウザのシェアと言えば、今はChromeがIEを抜いて大きく引き離している印象があります。

webrage.jp

日本国内は海外ほどの差ではありませんだ、それでもIEのシェアは20%ほど。

ただ、旧ブログのアクセス解析(デスクトップ)では、Windows10の26.3%、Windows7の54.6%、Windows8.1の66.2%がIEです。

OSのシェアがそれぞれ47.8%、28.9%、7.4%なので、トータルしたIEのシェアは33.2%になります。流石にこれでは無視するわけにはいきません。

MicrosoftはEdgeを使って欲しいんだろうけど・・・

EdgeはCSS Variablesに対応しています。MicrosoftもWindows10のユーザにはEdgeを使ってもらいたいのだと思いますが、思ったようには進んでいないようです。

そもそもWindows7を使ってるユーザも多いわけですしねぇ。

 

世界一やさしいウィンドウズ 10 最新版