こんにちは、システムチームのKです。
今回はCSSとブラウザ対応について書いてみようと思います。
CSSにはブラウザによって対応しているものと非対応のものがあります。
わたしたちが開発中に使用するブラウザ、GoogleChromeは、
ブラウザの中でも一番多くのCSSプロパティに対応しているため、
開発中はCSSのエラーに気づかないということがあります。
GoogleChromeでの開発、IEでのテストを行うこと
だからといって、GoogleChrome以外のブラウザで開発を進めると、開発スピードは間違いなく落ちます。
GoogleChromeは検証ツールが圧倒的に優秀なので、
開発はGoogleChromeで行えばよいですが、
その場合は、他ブラウザでのテストをしっかりと行わなくてはいけません。
うちでは
・Internet Explorer
・Edge
・FireFox
・GoogleChrome
・iOSSafari
この5種類のブラウザでテストを行います。
同時に5ブラウザもチェックしながらの開発は時間がかかるので、
開発途中や開発後、リリース後にテストの時間を取り、
その時にまとめてチェックします。
開発途中にどうしても確認しておきたい場合は、
IEで確認しましょう。
これは、上に挙げた5つのブラウザの中でも、
IEがCSSの対応数が一番少ないからです。
IEで動いていれば、ほぼ、他のブラウザでも動きます。
最新の便利CSSに安易に飛びつかない
実現したいことがあって検索すると、いろんなやり方が出てきますよね。
ですが、安易にそのやり方に飛びつくのは危険です。
例えば、
○○：unset;
という「○○プロパティをリセットし、親から自然に継承された場合は継承値、そうでなければ初期値を設定」する値ですが、
これはIEでは非対応です。
「おっ、簡単に初期値に戻せるじゃ～ん！」と安易に飛びつくと、
IEでは動かず、
しかも、検証を行わずに開発を最後まで進めてしまうと…あとはもうわかりますね…。
こうならないようにするためには、見知らぬプロパティを使わないことなのですが、
それだと自分の知識ベースで判断することになるので、
下記のサイトでCSSの対応ブラウザを確認しましょう。
「でも便利だし使いたい」、「他のサイトでは使っているのに！」
わかります。
ですがここで大事なことは、
ウチのサービスの対応ブラウザが何か、
つまり、お客さまは主にどのブラウザを使っているか、
ということです。
2021年4月のブラウザシェア
https://news.mynavi.jp/article/20210503-1882887/
世の中的には、GoogleChromeの使用率が約70%、
IEに至っては1％と、
圧倒的GoogleChrome優位です。
が、
デキテルのお客様のブラウザ使用率は違います。
GoogleChromeが約36%
IEは約16%
と、まだまだIEを使っているお客様が多いことがわかります。
IE非対応のCSSを使うということは、
この16％のお客様の環境では間違いなくエラーが出るということです。
対応ブラウザの判断は定期的に必要
IE自体は、MicrosoftもEdgeの使用を推奨しているように、古いブラウザです。
また、IE11へのサポートが2022年6月15日で終了することが発表されました。
いずれはウチのサービス・サイトもIEへの対応を停止するかもしれませんが、
前述したようにIEを使用しているお客様が一定数いるので、ウチのサービスはIE対応です。
その前提で開発を行いましょう。
