今月のサマリー
Can I Use の2026年8月31日スナップショットをもとに、使用率96%超の主要Web機能372件の互換性状況を整理しました。今月も Chrome Platform Status データが未提供のため、Can I Use のブラウザ対応状況の分析に絞っています。border-radius・Flexbox・calc()・Web Storage などモダンフロントエンドの基盤はデスクトップ主要ブラウザで完全対応が定着した一方、CSS段組み（Multiple column layout）・HTML5フォーム機能・SVG effects for HTML・DNSSEC/DANE・WAI-ARIA では部分サポートが継続しており、機能ごとに「先行しているブラウザ」が分かれる状況です。
今月のハイライト
CSS Multiple column layout — 段組みはSafariのみフルサポート
column-count / column-width などで多段組みレイアウトを実現する Multiple column layout は、今月のスナップショットでも**Safariのみがフルサポート（y）**を達成し、Chrome・Firefox・Edge はいずれも部分サポート（a）にとどまっています。さらに Android WebView ではベンダープレフィックス（a x）が必要な状態です。
基本的な段組み自体はどのブラウザでも表示されますが、break-inside による段抜け制御や column-span の挙動にはブラウザ差が残ります。雑誌的なレイアウトを段組みで組む場合は、Safari以外での段バランスや要素の分割位置を必ず実機確認し、崩れても読める単一カラムを土台に据える Progressive Enhancement が安全です。
互換性: Chrome a / Firefox a / Safari y / Edge a
HTML5 form features — Chrome/Edge が先行、Firefox・Safari は部分対応
日付ピッカーやスライダー、バリデーションなどを含む HTML5 拡張フォーム機能は、今月のデータでChrome・Edge がフルサポート（y）、**Firefox・Safari が部分サポート（a）**という構成です。とくに input[type="date"] や type="range" のネイティブUI・バリデーション表示は、ブラウザによって見た目と挙動が大きく異なります。
フォームの中核をネイティブ実装に寄せる場合は、Firefox・Safari でのカレンダーUIやエラー表示の差異を前提に、必要に応じてカスタムUIやライブラリでの補完を検討してください。入力値の検証はクライアント側だけに頼らず、サーバーサイド検証を必ず併用するのが鉄則です。
互換性: Chrome y / Firefox a / Safari a / Edge y
SVG effects for HTML — フル対応はFirefoxのみ
CSS や foreignObject を通じて SVG のフィルタ・変形効果を HTML 要素へ適用する SVG effects for HTML は、今月のスナップショットでFirefoxのみがフルサポート（y）、Chrome・Safari・Edge・モバイル各環境は部分サポート（a）です。filter: url(#...) によるSVGフィルタ参照など、一部の効果でブラウザ差が生じます。
装飾的なフィルタ表現に使う場合は、未対応環境でフィルタが適用されなくても情報伝達に支障が出ない設計にしておくと安全です。CSS標準の filter() 関数で代替できる効果（blur・drop-shadow など）は、そちらを優先すると互換性を確保しやすくなります。
互換性: Chrome a / Firefox y / Safari a / Edge a
ブラウザ別更新まとめ
Chrome（Chromium）
今月のスナップショットで確認できる部分サポート機能:
- CSS Multiple column layout: 部分サポート（段抜け・
column-span制御に差） - SVG effects for HTML: 部分サポート（SVGフィルタ参照に制限）
- CSS page-break: 部分サポート（
a #1 #2 #3— 印刷改ページ制御の注記多数） - WAI-ARIA: 部分サポート継続（支援技術との組み合わせでテストが必要）
全サポート達成済み（ポリフィル削除機会）: border-radius、box-shadow、Flexbox、calc()、CSS Gradients、Web Storage、Web Workers、WebSockets、requestAnimationFrame、Typed Arrays
Firefox
- HTML5フォーム機能: 部分サポート（
a— 日付ピッカー等のネイティブUIに差） - CSS Multiple column layout: 部分サポート（
a #4） - SVG effects for HTML: 主要ブラウザ唯一のフルサポート — SVGフィルタ・変形効果に対応
- WAI-ARIA: 他ブラウザ同様の部分サポート（スクリーンリーダー差異あり）
Safari（WebKit）
- CSS Multiple column layout: 主要ブラウザ唯一のフルサポート — 段組みを完全対応
- HTML5フォーム機能: 部分サポート（
a— フォームUI・バリデーション表示が独自） - CSS unicode-bidi: 部分サポート＋プレフィックス（
a x #3）— 双方向テキスト制御に-webkit-が必要 - SVG effects for HTML: 部分サポート（
a）
モバイル環境（Android WebView / iOS Safari）
レガシー環境で引き続き注意が必要な機能:
- const 宣言: Android・iOS Safari ともに部分サポート（
a #2 #3）— 旧端末ではトランスパイルが安全 - Constraint Validation API: モバイルで部分サポート（
a #1 #2— フォーム検証の挙動差） - calc(): Android WebView で部分サポート（
a #1） - CSS Gradients: iOS Safari で部分サポート（
a #2） - CSS 2D Transforms / matches(): Android WebView で
-webkit-プレフィックス（y x/a x）が必要 - Audio 要素: iOS Safari で部分サポート（
a #2— 自動再生・制御に制約）
Web API / CSS の互換性変化
全ブラウザでフルサポート済みの主要機能
以下は2026年9月のスナップショットで、デスクトップ主要ブラウザの対応を確認できる機能です:
| 機能 | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| CSS Border-radius | y | y | y | y |
| CSS Box-shadow | y | y | y | y |
| CSS Flexible Box（Flexbox） | y | y | y | y |
| CSS calc() | y | y | y | y |
| CSS Gradients（線形/放射） | y | y | y | y |
| rem（ルートem）単位 | y | y | y | y |
| Web Storage（localStorage/sessionStorage） | y | y | y | y |
| Web Workers | y | y | y | y |
| WebSockets | y | y | y | y |
| requestAnimationFrame | y | y | y | y |
| Typed Arrays | y | y | y | y |
| Content Security Policy 1.0 | y | y | y | y |
部分サポートが継続している機能
| 機能 | Chrome | Firefox | Safari | Edge | 主な課題 |
|---|---|---|---|---|---|
| CSS Multiple column layout | a | a | y | a | 段抜け/column-span 制御差、Android要プレフィックス |
| HTML5フォーム機能 | y | a | a | y | 日付ピッカー等ネイティブUIの差 |
| SVG effects for HTML | a | y | a | a | SVGフィルタ参照に制限 |
| CSS unicode-bidi | y | y | a | y | Safariは要 -webkit- プレフィックス |
| CSS page-break | a | a | a | a | 印刷改ページ制御の注記多数 |
| DNSSEC / DANE | a | a | a | a | OS/リゾルバ依存 |
| WAI-ARIA | a | a | a | a | 支援技術との動作差 |
モバイル環境でのベンダープレフィックス
CSS 2D Transforms と matches() DOM メソッド、Multiple column layout は、Android WebView で -webkit- プレフィックス付き実装が現時点でも必要です。標準プロパティとプレフィックスを併記するアプローチが安全です。
/* CSS 2D Transforms / 段組み（Android WebView 対応） */
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-column-count: 2;
column-count: 2;
開発者への影響
ポリフィル削除の機会
今月のスナップショットでデスクトップ全ブラウザのフルサポートを確認できた以下の機能は、ポリフィルやライブラリ依存を見直せる段階に到達しています:
- CSS Border-radius / Box-shadow / Gradients — 視覚表現の基盤、全ブラウザ安定
- CSS Flexbox / calc() / rem 単位
- Web Storage（localStorage / sessionStorage）
- Web Workers / WebSockets / requestAnimationFrame
- Typed Arrays / JSON（ネイティブ parse/stringify）
- Content Security Policy 1.0 / CORS / Strict Transport Security
ただし calc() は Android WebView、CSS Gradients は iOS Safari で部分サポートのため、モバイルの幅広いレガシー環境をサポート対象に含む場合は、プレフィックス併記やフォールバックを残す判断が引き続き妥当です。
注意が必要な実装
CSS段組み（Multiple column layout）: 段抜け（break-inside）や column-span を用いた複雑なレイアウトは、Safari以外で意図した段バランスにならないことがあります。単一カラムを土台に段組みを上乗せし、Android では -webkit- プレフィックスを併記してください。
HTML5フォームのネイティブUI: input[type="date"] や type="range" のカレンダー・スライダーUIは Firefox・Safari で見た目と操作性が異なります。ブランド一貫性が重要なフォームでは、カスタムUIとの併用を検討してください。
SVG effects for HTML: SVGフィルタ参照（filter: url(#...)）はブラウザ差が残ります。blur・drop-shadow などは CSS標準の filter() 関数で代替すると互換性を確保しやすくなります。
Progressive Enhancement の活用
段組みのブラウザ差、フォームUIの差異、SVGフィルタの未対応は、いずれも機能検出と Progressive Enhancement で安全に吸収できます。まず全環境で成立する基本実装を土台に置き、対応ブラウザ向けに高度な指定を上乗せする方針を取れば、レガシー環境でも破綻しないUIを維持できます。
まとめ
2026年9月の Can I Use スナップショットは、モダンフロントエンドの基盤が高い成熟度に達したことをあらためて示しています。border-radius・Flexbox・calc()・Web Storage・Web Workers といった中核機能は使用率96%超でデスクトップ全ブラウザに安定普及しており、ポリフィルの棚卸しに適したタイミングです。
一方で、今月は「先行ブラウザが機能ごとに分かれる」構図が鮮明でした。CSS段組みは Safari、SVG effects は Firefox、HTML5フォーム機能は Chrome/Edge がそれぞれ先行し、他ブラウザは部分対応にとどまります。加えて DNSSEC/DANE・WAI-ARIA は全ブラウザで部分サポートが続き、Android WebView・iOS Safari では const・フォーム検証・calc()・段組みで部分サポートやプレフィックスが残ります。サポート対象にモバイルレガシー環境を含むプロジェクトでは、プレフィックス併記とクロスブラウザ実機テストが引き続き重要です。
データソース: Can I Use（fetchDate: 2026-08-31） AI解説は Claude API により自動生成されています。正確性については原文をご確認ください。