つみかさね

【ブラウザ月報】ES6・Flexboxはデスクトップ全対応、autocompleteとDNSSECに課題 — 2026年8月

2026-08-01データソース: Can I Use, Chrome Platform Status
Chrome
v最新
68 features
Firefox
v最新
70 features
Safari
v最新
66 features
ChromeFirefoxSafariEdgeECMAScriptCSSDNSSECブラウザ

今月のサマリー

Can I Use の2026年7月31日スナップショットをもとに、使用率96%超の主要Web機能372件の互換性状況を整理しました。今月も Chrome Platform Status データが未提供のため、Can I Use ブラウザ対応状況の分析に絞っています。ES6・Flexbox・calc() などモダンフロントエンドの基盤はデスクトップ主要ブラウザで完全対応が定着した一方、CSS text-indent のキーワード指定・autocomplete の on/off 値の尊重・DNSSEC/DANE では部分サポートが継続しており、実装時の注意が引き続き必要です。

今月のハイライト

CSS text-indent — キーワード指定はSafariのみフルサポート

text-indent プロパティ自体はどのブラウザでも古くから利用できますが、each-line(各行にインデントを適用)や hanging(ぶら下げインデント)といったキーワード指定については、今月のスナップショットでも**Safariのみがフルサポート(y)**を達成し、Chrome・Firefox・Edge・Android WebView・iOS Safari はいずれも部分サポート(a)にとどまっています。

基本的な text-indent: 2em のような字下げは全ブラウザで問題なく動作しますが、each-line / hanging を用いた高度なタイポグラフィ制御を実装している場合は、Safari以外での表示崩れに注意が必要です。段落デザインでこれらのキーワードを使う際は Progressive Enhancement を前提とし、未対応環境でも読める基本レイアウトを土台にしてください。

互換性: Chrome a / Firefox a / Safari y / Edge a

autocomplete on/off — off の尊重に依然ブラウザ差

input 要素の autocomplete 属性は、ブラウザによる自動補完のオン/オフを制御するための標準属性です。しかし今月のデータでも、**Chrome・Firefox・Safari・Edge のいずれも部分サポート(a)**となっており、特に autocomplete="off" を指定してもブラウザが尊重しないケース(パスワードマネージャーやログインフォームでの自動補完)が残っています。

セキュリティ上の理由から、多くのブラウザはユーザー保護のために off を意図的に無視する挙動を持ちます。フォーム実装で自動補完を厳密に制御したい場合は、off 一択に頼らず、フィールドの役割に応じた autocomplete トークン(new-passwordone-time-code など)を明示的に指定するアプローチが有効です。

互換性: Chrome a / Firefox a / Safari a / Edge a

DNSSEC / DANE — 全ブラウザで部分サポートが継続

DNSSEC(DNS Security Extensions)と DANE は、DNS応答の正当性を検証しなりすましを防ぐセキュリティ技術です。今月のスナップショットでも**Chrome・Firefox・Safari・Edge・Android WebView・iOS Safari のすべてで部分サポート(a #1)**が続いており、ブラウザ単体での完全な検証はOSやDNSリゾルバの構成に依存する状況が変わっていません。

Webアプリ側で直接制御できる領域ではありませんが、インフラ選定時にDNSSEC対応のリゾルバ・権威DNSを利用しているか確認しておくと、ドメイン乗っ取りやDNSキャッシュポイズニングのリスク低減につながります。

互換性: Chrome a / Firefox a / Safari a / Edge a

ブラウザ別更新まとめ

Chrome(Chromium)

今月のスナップショットで確認できる部分サポート機能:

  • CSS text-indent: 部分サポート(each-line / hanging キーワードに制限)
  • autocomplete on/off: 部分サポート(off の尊重に実装差)
  • DNSSEC / DANE: 部分サポート(OS/DNSリゾルバ依存)
  • WAI-ARIA: 部分サポート継続(支援技術との組み合わせでテストが必要)

全サポート達成済み(ポリフィル削除機会): ES6(ES2015)、Flexbox、CSS calc()、Web Storage、Canvas 2D、IndexedDB、WebSockets、Web Workers、requestAnimationFrame

Firefox

多くの機能でフルサポートを維持。今月の注目点:

  • ES6(ES2015): フルサポート(y #2 — 一部注記付きで完全対応)
  • CSS text-indent: 部分サポート(each-line / hanging に制限)
  • autocomplete on/off: 部分サポート(a #3off の扱いが独自)
  • WAI-ARIA: 他ブラウザ同様の部分サポート(スクリーンリーダー差異あり)

Safari(WebKit)

  • CSS text-indent: 主要ブラウザ唯一のフルサポートeach-line / hanging を含めて対応
  • autocomplete on/off: 部分サポート(a #5off の尊重が独自挙動)
  • IndexedDB: iOS Safari では部分サポート(a #2 — 一部制約が残る)
  • WAI-ARIA: 部分サポート(VoiceOverとの組み合わせでテストを推奨)

モバイル環境(Android WebView / iOS Safari)

レガシー環境で引き続き注意が必要な機能:

  • ES6(ES2015): Android WebView・iOS Safari で部分サポート(a)— 旧バージョン端末ではトランスパイルが安全
  • const 宣言: モバイルで部分サポート(a #2 #3
  • Constraint Validation API: モバイルで部分サポート(a #1 #2 — フォームバリデーションの挙動差)
  • CSS 2D Transforms: Android WebView で -webkit- プレフィックス必要(y x
  • Page Visibility API: Android WebView でプレフィックス依存(y x

Web API / CSS の互換性変化

全ブラウザでフルサポート済みの主要機能

以下は2026年8月のスナップショットで、デスクトップ主要ブラウザの対応を確認できる機能です:

機能ChromeFirefoxSafariEdge
ECMAScript 2015(ES6)yyyy
CSS Flexible Box(Flexbox)yyyy
CSS calc()yyyy
CSS Border-radiusyyyy
CSS Box-shadowyyyy
Canvas 2Dyyyy
Web Storage(localStorage/sessionStorage)yyyy
IndexedDByyyy
WebSocketsyyyy
Web Workersyyyy
requestAnimationFrameyyyy
WOFF Webフォントyyyy

部分サポートが継続している機能

機能ChromeFirefoxSafariEdge主な課題
CSS text-indentaayaeach-line/hanging 未対応
autocomplete on/offaaaaoff 値の尊重差
DNSSEC / DANEaaaaOS/リゾルバ依存
WAI-ARIAaaaa支援技術との動作差
ES6(モバイル)aaaa旧端末で部分対応
Constraint Validation(モバイル)aaaaフォーム検証の挙動差

モバイル環境でのベンダープレフィックス

CSS 2D Transforms と Page Visibility API は、Android WebView で -webkit- プレフィックス付き実装(y x)が現時点でも必要です。アニメーションやタブ非表示時の処理制御では、標準プロパティとプレフィックスを併記するアプローチが安全です。

/* CSS 2D Transforms(Android WebView 対応) */
-webkit-transform: rotate(45deg);
transform: rotate(45deg);

開発者への影響

ポリフィル削除の機会

今月のスナップショットでデスクトップ全ブラウザのフルサポートを確認できた以下の機能は、ポリフィルやトランスパイルを見直せる段階に到達しています:

  • ES6(ES2015) — Promise / Class / Arrow Function / let・const など、デスクトップでは完全対応
  • CSS Flexbox — レイアウトの基盤、全ブラウザ安定
  • CSS calc() / Border-radius / Box-shadow
  • Web Storage(localStorage / sessionStorage)
  • IndexedDB / WebSockets / Web Workers
  • requestAnimationFrame
  • WOFF Webフォント

ただしES6は Android WebView・iOS Safari の旧端末で部分サポートのため、モバイルの幅広いレガシー環境をサポート対象に含む場合は、トランスパイル(Babel等)を残す判断が引き続き妥当です。

注意が必要な実装

CSS text-indent のキーワード指定: text-indent: each-linehanging を使用しているケースでは、Safari以外で意図した字下げにならないことがあります。基本の字下げ(数値指定)で土台を作り、キーワードは装飾的な上乗せとして扱うのが安全です。

autocomplete=off の過信を避ける: off はブラウザに無視されることがあります。自動補完を制御したい場合は、new-passwordone-time-codecurrent-password など役割に応じた明示的トークンを使い分けてください。

Constraint Validation API(モバイル): checkValidity()setCustomValidity() を使ったフォーム検証は、モバイル環境で挙動差が残ります。重要なフォームではサーバーサイド検証を必ず併用してください。

Progressive Enhancement の活用

モバイルのベンダープレフィックス問題やキーワード未対応は、機能検出と Progressive Enhancement で安全に吸収できます。まず全環境で動く基本実装を土台に置き、対応ブラウザ向けに高度な指定を上乗せする方針を取れば、レガシー環境でも破綻しないUIを維持できます。

まとめ

2026年8月の Can I Use スナップショットは、モダンフロントエンドの基盤が高い成熟度に達したことを示しています。ES6・Flexbox・calc()・Web Storage・IndexedDB といった中核機能は使用率96%超でデスクトップ全ブラウザに安定普及しており、ポリフィルの棚卸しに適したタイミングです。

一方で、CSS text-indent のキーワード指定は Safari 以外で部分対応が続き、autocomplete の off 尊重や DNSSEC/DANE はブラウザ・インフラ構成に依存する状況が変わっていません。加えて、Android WebView や iOS Safari の旧端末では ES6・const・フォーム検証で部分サポートが残るため、サポート対象にモバイルレガシー環境を含むプロジェクトでは、トランスパイルとクロスブラウザ実機テストが引き続き重要です。


データソース: Can I Use(fetchDate: 2026-07-31) AI解説は Claude API により自動生成されています。正確性については原文をご確認ください。

Xでシェアはてブ
データソース: Can I Use (CC-BY-4.0), Chrome Platform Status
AI解説は Claude API により自動生成されています。正確性については各データソースの原文をご確認ください。