今月のサマリー
Can I Use の2026年6月30日スナップショットをもとに、使用率96%超の主要Web機能372件の互換性状況を整理しました。今月は Chrome Platform Status データが未提供のため、Can I Use ブラウザ対応状況の分析に絞っています。大多数の機能はクロスブラウザ対応を完了していますが、WAI-ARIAアクセシビリティ機能・Rubyアノテーション・SVGエフェクトでは部分サポートが継続しており、実装時の注意が引き続き求められます。
今月のハイライト
WAI-ARIA — W3C勧告でも全ブラウザ部分サポートが継続
WAI-ARIA（Web Accessibility Initiative – Accessible Rich Internet Applications）は動的コンテンツやカスタムUIコンポーネントをスクリーンリーダーなどの支援技術に対応させるための標準仕様で、W3C勧告として策定されています。しかし2026年7月現在も、Chrome・Firefox・Safari・Edge・Android WebView・iOS Safari のすべてで部分サポート（a）が続いています。
基本的な role 属性や aria-label・aria-hidden は広くサポートされており積極的に活用できますが、aria-live リージョンの更新通知、複雑なCombobox・TreeViewウィジェットのキーボード操作、支援技術とのイベント伝達ではブラウザとスクリーンリーダーの組み合わせごとに動作差が生じます。NVDA + Firefox、VoiceOver + Safari、TalkBack + Chrome など複数環境での実機テストが引き続き不可欠です。
互換性: Chrome a / Firefox a / Safari a / Edge a / Android a / iOS Safari a
Ruby アノテーション — Firefox のみフルサポート継続
<ruby> / <rt> / <rp> 要素によるルビ（振り仮名・注音符号）は日本語・中国語・韓国語などCJKテキストに欠かせないHTML5機能です。7月のデータでも**Firefoxのみがフルサポート（y）**を達成し、Chrome・Edge・Safari・iOS Safari・Android WebViewはいずれも部分サポート（a）にとどまっています。
基本的な <ruby>文字<rt>ふりがな</rt></ruby> 構文はほぼ全ブラウザで動作しますが、ruby-position（上下位置）や ruby-align（整列方向）、ネストされた複合ルビなどCSSによる精緻な制御で挙動差が発生します。日本語サイトでフリガナを実装している場合、特にiOS SafariとAndroid WebViewでの表示確認を推奨します。
互換性: Chrome a / Firefox y / Safari a / Edge a / Android a / iOS Safari a
SVG effects for HTML — Firefox のみフルサポート
filter プロパティや foreignObject 要素を使ったSVGフィルターのHTML要素への適用では、Firefoxのみがフルサポート（y）を達成しており、Chrome・Edge・Safari・Android WebView・iOS SafariはすべてSVGフィルターの一部機能で制限が残ります（a）。
filter: drop-shadow() や filter: blur() といったCSSフィルター関数自体は主要ブラウザで広くサポートされていますが、SVG <filter> 要素をCSS経由でHTML要素に適用する高度なユースケースでは差異が出ます。デザインシステムで複雑なSVGフィルター効果を使用している場合は、Firefoxと他ブラウザでの比較確認を実施してください。
互換性: Chrome a / Firefox y / Safari a / Edge a
ブラウザ別更新まとめ
Chrome（Chromium）
今月のスナップショットで確認できる部分サポート機能:
- WAI-ARIA: 部分サポート継続（支援技術との組み合わせでテストが必要）
- Ruby アノテーション: 部分サポート（
ruby-positionなどCSS制御で挙動差） - SVG effects for HTML: 部分サポート（SVGフィルターのHTML適用で制限あり）
- CSS page-break: 部分サポート（
break-before/break-afterの仕様差） - CSS text-indent: 部分サポート（
each-line/hangingキーワードに制限） - input autocomplete: 部分サポート（
autocomplete="off"の尊重に関する実装差） - DNSSEC / DANE: 部分サポート（OS/DNSリゾルバ依存）
全サポート達成済み（ポリフィル削除機会）: Flexbox、CSS calc()、Viewport Units、CSS Grid、Web Storage、Canvas 2D、Geolocation、PostMessage
Firefox
多くの機能でフルサポートを維持。今月の注目点:
- Ruby アノテーション: 主要ブラウザ唯一のフルサポート — CJKテキスト処理の完成度が高い
- SVG effects for HTML: フルサポート — SVGフィルターのHTML要素への適用が安定
- WAI-ARIA: 他ブラウザ同様の部分サポート（スクリーンリーダー差異あり）
- AAC音声フォーマット: 部分サポート（
a #1— 一部コンテナ形式に非対応）
Safari（WebKit）
- WAI-ARIA: 部分サポート（VoiceOverとの組み合わせでテストを推奨）
- Ruby アノテーション: 部分サポート（
ruby-positionの制御に制限） - CSS unicode-bidi: 部分サポート、ベンダープレフィックス依存（
a x） - input autocomplete: 部分サポート（
autocomplete="off"の挙動が独自） - iOS Safari CSS writing-mode: ベンダープレフィックス必要（
y x）
Android WebView
引き続き注意が必要なモバイル環境:
- CSS Transforms 2D: ベンダープレフィックス必要（
y x） - CSS writing-mode: ベンダープレフィックス必要（
y x） - Font unicode-range: 部分サポート（
a）— Webフォントのサブセット指定で注意 - CSS word-break: 部分サポート（
a） - DNSSEC / DANE: 部分サポート（
a #1）
Web API / CSS の互換性変化
全ブラウザでフルサポート済みの主要機能
以下は2026年7月のスナップショットで全ブラウザ対応を確認できる機能です（一部プレフィックス注記あり）:
| 機能 | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| CSS Flexible Box（Flexbox） | y | y | y | y |
| CSS calc() | y | y | y | y |
| Viewport Units（vw/vh/vmin/vmax） | y | y | y | y |
| Canvas 2D | y | y | y | y |
| Web Storage（localStorage/sessionStorage） | y | y | y | y |
| CSS Border-radius | y | y | y | y |
| JSON.parse / JSON.stringify | y | y | y | y |
| Geolocation API | y | y | y | y |
| SVG（基本サポート） | y | y | y | y |
| TTF/OTF Webフォント | y | y | y | y |
| WOFF Webフォント | y | y | y | y |
| CSS3 2D Transforms（デスクトップ） | y | y | y | y |
| postMessage | y | y | y | y |
部分サポートが継続している機能
| 機能 | Chrome | Firefox | Safari | Edge | 主な課題 |
|---|---|---|---|---|---|
| WAI-ARIA | a | a | a | a | 支援技術との動作差 |
| Ruby アノテーション | a | y | a | a | CSS ruby-position の挙動差 |
| SVG effects for HTML | a | y | a | a | SVGフィルター適用制限 |
| CSS page-break | a | a | a | a | 印刷スタイルの仕様差 |
| DNSSEC / DANE | a | a | a | a | OS依存の制限 |
| input autocomplete on/off | a | a | a | a | off 値の尊重差 |
| CSS text-indent | a | a | y | a | each-line/hanging 未対応 |
| CSS unicode-bidi | y | y | a x | y | Safari のBidi処理 |
モバイル環境でのベンダープレフィックス
CSS writing-mode と CSS 2D Transforms は、Android WebViewとiOS Safariで -webkit- プレフィックス付きの実装が現時点でも必要です。縦書きコンテンツや複雑なTransform実装では、以下のように両方を記載するアプローチが推奨されます。
/* CSS writing-mode（縦書き） */
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
/* CSS 2D Transforms（Android WebView） */
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
開発者への影響
ポリフィル削除の機会
今月のスナップショットで全ブラウザのフルサポートを確認できた以下の機能は、ポリフィルを削除できる段階に到達しています:
- CSS Flexbox — 96.57% のグローバル使用率、全ブラウザ安定
- Viewport Units（vw / vh / vmin / vmax）
- CSS Border-radius（
border-radiusショートハンド） - Canvas 2D API
- Web Storage（localStorage / sessionStorage）
- JSON.parse / JSON.stringify
- TTF / OTF / WOFF Webフォント
- Geolocation API
注意が必要な実装
WAI-ARIA 複合ウィジェット: aria-live・カスタムCombobox・TreeViewを実装している場合、定期的な支援技術との互換性確認を継続してください。基本属性（aria-label・aria-hidden・aria-expanded）は広く動作しますが、複雑なインタラクションパターンでは環境差が発生します。
Ruby アノテーション（CJKテキスト）: <ruby> 要素の基本構文はほぼ動作しますが、ruby-position: over/under や ruby-align を使用しているケースでは、Chrome・Safari・iOS Safariで意図した表示にならないことがあります。CSSで制御している場合は全ブラウザでの確認を推奨します。
SVG フィルター + HTML 要素: CSSの filter: blur() や filter: drop-shadow() は主要ブラウザで問題ありませんが、SVG <filter> を直接HTML要素に適用する高度なユースケースではFirefox以外で制限が残ります。
印刷スタイル（CSS page-break）: page-break-before / page-break-after（旧仕様）と break-before / break-after（現行仕様）の両方を記載するアプローチが引き続き推奨されます。
Progressive Enhancement の活用
Android WebViewやiOS Safariでのベンダープレフィックス問題は、機能検出と Progressive Enhancement で安全に対応できます。縦書きコンテンツや特殊なTransform効果が必要な場合は、まずデスクトップ標準プロパティで実装し、モバイル環境向けに -webkit- プレフィックスを追加するアプローチで安定した動作を実現できます。
まとめ
2026年7月の Can I Use スナップショットが示す Web プラットフォームの成熟度は高く、CSS Flexbox・calc()・Viewport Units・Web Storage・Canvas 2D など現代のフロントエンド開発の基盤となる機能は使用率96%超で全ブラウザに安定普及しています。ポリフィルを整理する良いタイミングです。
一方、WAI-ARIAはW3C勧告にもかかわらず全ブラウザで部分サポートが続き、RubyアノテーションとSVGエフェクトはFirefox以外での完全対応が待たれる状況です。アクセシビリティ実装・CJKテキスト処理・複雑なSVGエフェクトを扱うプロジェクトでは、引き続きクロスブラウザ実機テストが不可欠です。
データソース: Can I Use（fetchDate: 2026-06-30） AI解説は Claude API により自動生成されています。正確性については原文をご確認ください。