お使いのブラウザーが、画像・動画の形式や、新しいCSS・JavaScriptの機能に対応しているかを一覧でチェックするツールです。
「この画像形式は表示できる？」「このCSSは使える？」を調べたい時や、サイトの表示がおかしい時の原因探しにお使いください。チェックはブラウザーの中だけで行い、結果はどこにも送信されません。
チェック結果
画面サイズやOS、ブラウザーのバージョンはあなたの環境チェッカーで確認できます。
チェックしている項目
| 分類 | 内容 |
|---|---|
| 画像形式 | WebP・AVIFなど、新しい画像形式を表示できるか。実際に小さな画像を読み込んで確認しています |
| 動画・音声 | H.264・HEVC・VP9・AV1などの動画や、AAC・Opusなどの音声を再生できるか |
| CSS | :has()、コンテナクエリ、サブグリッド、ネストなど、比較的新しいCSSの機能 |
| JavaScript・Web API | Service Worker、通知、クリップボード、共有、パスキー（WebAuthn）、WebGPUなど |
| グラフィック | WebGL・WebGL2の対応と、使われているGPU（グラフィックチップ）の名前 |
| 保存領域 | Cookie・localStorage・IndexedDBが使えるか、このサイトで使える保存容量の目安 |
「対応」と表示されても、OSの設定や拡張機能、プライベートブラウズの状態によっては使えない場合があります。逆に、未対応の機能もブラウザーを最新版にすると使えるようになることがあります。
Web制作での使い方
新しいCSSや画像形式を使う時は、対応していないブラウザーでも表示が崩れないように、代わりの書き方を用意しておくのが基本です。たとえばAVIF画像は<picture>タグでJPEGやWebPを予備として指定し、CSSは@supportsで対応している時だけ新しい書き方を使います。
お客様から「表示がおかしい」と連絡があった時は、このページの結果をコピーして送ってもらうと、原因を絞り込みやすくなります。
あわせて使いたいツール
- あなたの環境チェッカー：画面サイズや表示領域、ブラウザー・OSの情報を確認できます。
- カメラ・マイク・スピーカーのテスト：カメラ・マイク・スピーカーが実際に動くかをテストできます。
このツールは役に立ちましたか？
これからの開発の参考にしたいので、いいねボタンで教えてください。
コメント