新しいCSSを使う前に、自社サイト訪問者のブラウザ対応状況を確認する

新しいCSS機能を採用するときは、一般的な対応表だけでなく、自社サイトを実際に訪れているブラウザで判断することが重要です。Baseline、アクセス解析、段階的な実装を組み合わせる確認方法を解説します。

対応ブラウザ一覧だけでは、自社サイトの判断にならない

新しいCSSには、少ない記述で柔軟なレイアウトや表現を実現できる魅力があります。ただし「主要ブラウザで対応済み」という情報だけで本番採用を決めると、自社サイトに残っている古い端末やアプリ内ブラウザを見落とすことがあります。

見るべきなのは、機能の一般的な対応状況と、自社サイトの訪問者が使っている環境の両方です。利用者の構成は、企業向けサイト、店舗サイト、採用サイトなどで異なります。

Baselineは、Web機能が主要ブラウザでどの程度広く利用できるかを共通の基準で示す取り組みです。「新しく利用可能になった機能」と「広く利用可能になった機能」を分けて考えられるため、採用時の最初の判断材料になります。

ただし、Baselineは世界全体の基準です。自社サイトで業務上サポートすべきブラウザを自動的に決めてくれるものではありません。

Googleは2026年、Google Analytics APIと接続し、実際の訪問者が新しいWeb機能にどの程度対応しているかを確認するBaseline Checkerを紹介しました。一般的なシェアではなく、自社の利用者に近い数字を確認できる点が重要です。

確認時は直近数日だけでなく、1〜3か月程度を見ます。アクセス数の少ないサイトでは、少数の社内アクセスや検証端末に数字が引っ張られるため、除外設定も合わせて確認します。

新機能を使う場合も、非対応ブラウザで文章、画像、フォームなどの主要機能が失われないようにします。新しいCSSを追加機能として使い、基本表示は従来のCSSで成立させる段階的な実装が堅実です。

見た目の装飾が少し変わるだけなら許容できても、メニューが開かない、ボタンが見えない、入力できない状態は許容できません。採用判断は機能の重要度によって変えます。

解析で割合を確認した後は、代表的なスマートフォン、PC、Safari、Chromeなどで実際に操作します。ブラウザの開発者ツールだけでは、文字入力、スクロール、画面キーボード、アプリ内ブラウザ固有の挙動まで再現できない場合があります。

問い合わせ、予約、購入など事業に直結する導線は、見た目だけでなく最後まで操作して確認します。

制作時点の対応率、フォールバックの有無、確認した端末を簡単に残します。後から問題が出たときに、なぜ採用したのか、どこまでをサポート対象にしたのかを説明できます。

新しいCSSを使うこと自体が目的ではありません。記述量、保守性、表示品質、利用者への影響を比べ、サイトにとって妥当な方法を選ぶことが大切です。

新しいCSSを採用する前には、Baselineで一般的な対応状況を確認し、アクセス解析で自社の利用者を見て、非対応時の表示を用意します。対応率と実機確認を組み合わせれば、新機能を過度に避けず、利用者を置き去りにしない判断ができます。