今月のサマリー
Can I Use の 2026年5月31日時点のスナップショットから、使用率 96% 超の主要 Web 機能の互換性状況をまとめます。今月は Chrome Platform Status データが未提供のため、Can I Use ブラウザ対応状況に焦点を当てた分析です。大多数の機能はクロスブラウザ対応済みですが、日本語 Web 開発に直結する Ruby アノテーションと CSS writing-mode、そして WAI-ARIA アクセシビリティでは依然として注意が必要な部分サポートが残っています。
今月のハイライト
Ruby アノテーション — Firefox のみフルサポート、主要ブラウザは部分対応
<ruby> / <rt> / <rp> 要素によるルビ（振り仮名・注音符号）は、日本語・中国語・韓国語など CJK テキストに欠かせない HTML5 機能です。2026年6月時点のデータで、**Firefox のみがフルサポート（y）**を達成している一方、Chrome・Edge・Safari・iOS Safari・Android WebView はすべて部分サポート（a）にとどまっています。
<ruby> 要素の基本的なレンダリングはほぼ全ブラウザで動作しますが、ruby-position（ルビの上下位置）、ruby-align（整列方向）、ネストされた複合ルビなど CSS による精緻な制御で挙動差が発生します。日本語サイトで見出しや本文にフリガナを実装している場合、特に iOS Safari や Android WebView での表示確認が推奨されます。
互換性: Firefox「フルサポート」、Chrome・Edge・Safari・Android・iOS「部分サポート」
WAI-ARIA — W3C 勧告ながら全ブラウザで部分サポート継続
WAI-ARIA（Web Accessibility Initiative – Accessible Rich Internet Applications）は W3C 勧告として策定されており、動的コンテンツやカスタム UI コンポーネントをスクリーンリーダー等の支援技術に対応させるための標準仕様です。しかし 2026年6月現在も、Chrome・Firefox・Safari・Edge・Android・iOS Safari すべてで部分サポート（a）が続いています。
基本的な role 属性や aria-label、aria-hidden は広くサポートされていますが、aria-live リージョンの更新通知、複雑な Combobox や TreeView ウィジェットのキーボード操作、支援技術とのイベント伝達では依然としてブラウザ・スクリーンリーダーの組み合わせごとに差異が生じます。アクセシビリティ対応を強化する際は、NVDA + Firefox、VoiceOver + Safari、TalkBack + Chrome など複数の環境での実機テストが引き続き不可欠です。
互換性: 全主要ブラウザ「部分サポート」
CSS writing-mode — モバイルブラウザでのベンダープレフィックス
writing-mode プロパティは縦書きテキストを実現する CSS プロパティで、縦組みの小説・新聞・詩などの日本語コンテンツに使用されます。デスクトップ環境では Chrome・Firefox・Safari・Edge すべてがフルサポートを達成していますが、Android WebView および iOS Safari ではベンダープレフィックス付き（-webkit-writing-mode）の実装を引き続き指定する必要があります（データ内の y x ステータス）。
スマートフォン向けに縦書きコンテンツを実装する際は、以下のように両方を記載するアプローチが現時点でも推奨されます:
/* ベンダープレフィックスを先に記載し、標準プロパティで上書き */
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
互換性: デスクトップ「フルサポート」、Android WebView・iOS Safari「プレフィックス付きフルサポート」
ブラウザ別更新まとめ
Chrome（Chromium）
2026年6月時点では大多数の主要 Web 機能でフルサポートを達成済みです。開発者が把握すべき部分サポートの機能:
- Ruby アノテーション: 部分サポート（
ruby-position等の CSS プロパティで挙動差） - WAI-ARIA: 部分サポート継続（支援技術との組み合わせでテストが必要）
- SVG effects for HTML: 部分サポート（SVG フィルターの HTML 要素への適用で制限あり）
- CSS page-break: 部分サポート（印刷用 CSS で
break-before/break-afterの仕様差） - X-Frame-Options ヘッダー: 部分サポート（clickjacking 対策での利用時に挙動確認を）
- css-crisp-edges（image-rendering）:
y #4— 一部注記あり（pixelatedキーワードは対応）
Firefox
多くの機能でフルサポートを達成しており、今月の注目点:
- Ruby アノテーション: 主要ブラウザ唯一のフルサポート — CJK テキスト処理の完成度が高い
- SVG effects for HTML: フルサポート（HTML 要素への SVG フィルター適用が安定）
- AAC 音声フォーマット: 部分サポート（
a #1：一部コンテナ形式の非対応） - WAI-ARIA: 他ブラウザ同様の部分サポート
Safari（WebKit）
- css-unicode-bidi: 部分サポート（
a x）— 双方向テキスト処理に注意 - Ruby アノテーション: 部分サポート
- WAI-ARIA: 部分サポート（VoiceOver との組み合わせでテストを）
- iOS Safari writing-mode: ベンダープレフィックス必要（
y x）
Android WebView
今月特に注意が必要なモバイル環境:
- css-crisp-edges: 非サポート（
n） —image-rendering: crisp-edges / pixelatedが無効。ピクセルアートや低解像度アイコンで意図しないスムージングが発生 - CSS writing-mode: ベンダープレフィックス必要（
y x） - CSS 2D Transforms: ベンダープレフィックス付き（
y x） - CSS word-break: 部分サポート（
a） - font-unicode-range: 部分サポート（
a）— Web フォントのサブセット指定で注意
Web API / CSS の互換性変化
全ブラウザでフルサポート済みの主要機能
以下は今月のスナップショットで全ブラウザ対応が確認できる機能です（一部プレフィックス注記あり）:
| 機能 | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| Canvas（基本サポート） | y | y | y | y |
| CSS Transforms 2D | y | y | y | y |
| Web Storage | y | y | y | y |
| CSS Viewport Units | y | y | y | y |
| CSS Border-radius | y | y | y | y |
| Geolocation API | y | y | y | y |
| Flexbox | y | y | y | y |
| CSS calc() | y | y | y | y |
| SVG（基本サポート） | y | y | y | y |
| postMessage | y | y | y | y |
部分サポートが継続している機能
| 機能 | Chrome | Firefox | Safari | Edge | 主な課題 |
|---|---|---|---|---|---|
| Ruby アノテーション | a | y | a | a | CSS ruby-position の挙動差 |
| WAI-ARIA | a | a | a | a | 支援技術との組み合わせ差異 |
| CSS page-break | a | a | a | a | 印刷レイアウトの仕様差 |
| SVG effects for HTML | a | y | a | a | SVG フィルター適用制限 |
| X-Frame-Options | a | a | a | a | 実装差異（CSP の使用推奨） |
| DNSSEC/DANE | a | a | a | a | セキュリティ機能の制限 |
| css-unicode-bidi | y | y | a x | y | Safari の双方向テキスト処理 |
Android WebView のみ非サポートの機能
- css-crisp-edges（image-rendering: crisp-edges/pixelated）: Android WebView は
n（非サポート）、他ブラウザはサポート済み
開発者への影響
注意が必要な実装
Ruby アノテーション: ruby-position: over / under や ruby-align の CSS プロパティを使用している場合、Chrome・Safari・iOS Safari で意図した表示にならないケースがあります。シンプルな <ruby>文字<rt>ふりがな</rt></ruby> の基本構文であればほぼ全ブラウザで動作しますが、デザイン上の精密な制御が必要な場合は全ブラウザ実機確認を推奨します。
css-crisp-edges（ピクセルアート画像）: Android WebView では image-rendering: crisp-edges および pixelated が無効です。低解像度のアイコン・ドット絵アセットを鮮明に表示したい場合、Android 向けには 2x・3x の高解像度画像を提供するか、transform: scale() との組み合わせによる回避策を検討してください。
CSS page-break / 印刷スタイル: page-break-before・page-break-after（旧仕様）と break-before・break-after（現行仕様）の両方を記載するアプローチが引き続き推奨されます。全ブラウザで部分サポートが続いているため、印刷プレビューでの動作確認が必要です。
WAI-ARIA 実装のベストプラクティス
W3C 勧告ながら部分サポートが続く WAI-ARIA は、以下の点に注意して実装してください:
aria-role・aria-label・aria-hiddenなどの基本属性は広くサポートされており、積極的に活用できますaria-live="polite"/"assertive"は各ブラウザ・スクリーンリーダーで動作差があるため、重要な通知には複数環境でのテストを- カスタム Select / Combobox / Listbox を WAI-ARIA Authoring Practices に従って実装している場合、定期的に支援技術との互換性確認を実施してください
ポリフィル削除の機会
以下の機能は今月のデータで全ブラウザのフルサポートを確認済みです。これらに対してポリフィルを用意している場合、削除を検討できます:
- Web Storage（localStorage / sessionStorage）
- Viewport Units（vw / vh / vmin / vmax）
- CSS Border-radius
- CSS Transforms 2D
- Canvas 2D
- Geolocation API
- postMessage（クロスドキュメントメッセージング）
まとめ
2026年6月の Can I Use スナップショットが示す Web プラットフォームの互換性は、主要機能において非常に高い水準（使用率 96% 超）に達しています。Canvas、CSS Flexbox、Web Storage、Viewport Units など現代の Web 開発の基盤となる機能はすべてのブラウザで安定して動作する状況です。
日本語 Web 開発者が引き続き注意すべきポイントとして、Ruby アノテーションの Firefox 以外での部分サポート、および Android WebView・iOS Safari での CSS writing-mode ベンダープレフィックスが残っています。また WAI-ARIA は仕様こそ W3C 勧告ですが、全ブラウザで部分サポートが続いており、スクリーンリーダーとの組み合わせテストの重要性は変わっていません。多くの機能でポリフィルを削除できる段階になった一方、CJK テキスト処理やアクセシビリティ実装では依然として丁寧なクロスブラウザ検証が求められます。
データソース: Can I Use（fetchDate: 2026-05-31） AI解説は Claude API により自動生成されています。正確性については原文をご確認ください。