よこのじ（@yokonoji_work）です。
Webサイトの作成は様々な閲覧環境を想定して、できる限りどの環境でも同じように表示できる必要があります。
例えば、linkタグのrel属性にpreloadを付けるとcssファイルを非同期で読み込んでレンダリングブロックを回避することができますが、firefoxでは対応していなかったりします…。
これにより、firefoxでは表示崩れが発生するということが起こりますので、使用するタグがどのブラウザのどのバージョンに対応しているのかを知ることは重要です。
今回はブラウザ、バージョンの対応状況を調べることができる、Can I useというサイトを紹介します。
Webサイト制作におけるお供になるツールかと思いますので、使い方を確認しておきましょう。
Can I use ? のサイトで調べてみる
Can I useは英語表記のサイトですが、使い方は簡単です。
Can I use＿＿?の部分にブラウザの対応状況を調べたいワードを入力するだけです。
調べられる内容は幅広く、htmlのタグ・属性やCSSのセレクタ・プロパティ、画像や音声のフォーマット形式など、Webのコーディングに関することであれば概ね結果を示してくれます。
例として、ファビコンにSVG形式の画像を使おうとした場合のブラウザ対応状況を調べてみました。
表示色により、対応状況を示してくれています。
緑色：対応している
黄色：部分的に対応している
赤色：対応していない
灰色：不明
対応していないブラウザ・バージョンがある場合は、各バージョンのシェア率を確認して影響範囲を確認すると良いかと思います。
この例では、日本で利用されているブラウザの状況においては50.85%（対応+部分的対応）はカバーできているということです。また、各ブラウザのバージョンごとにもシェア率が確認できますよ。
古いバージョンまでサポートすることは難しい場合もありますが、これらの情報をもとに、自身のサイトではこのバージョンまではサポートをするという線引きを行う判断材料にすることができますので、ぜひ参考にしてください。
注目記事：品質を高めるためのHTMLとCSSの文法チェックツール
[itemlink post_id=”3055″]
[toggle title=”参考サイト”]
[/toggle]
