:focus-visible CSS 擬似クラス
- WD(ワーキングドラフト):focus-visible
擬似クラスは、要素が :focus
擬似クラスに一致し、UA(ユーザーエージェント)がヒューリスティックに要素に特別な表示(通常は「フォーカスリング」)が必要と判断した場合に適用されます。
Chrome
- 4 - 66: サポートされていません
- 67 - 85: デフォルトで無効
- 86 - 123: サポートされています
- 124: サポートされています
- 125 - 127: サポートされています
Edge
- 12 - 18: サポートされていません
- 79 - 85: デフォルトで無効
- 86 - 123: サポートされています
- 124: サポートされています
Safari
- 3.1 - 14.1: サポートされていません
- 15 - 15.3: デフォルトで無効
- 15.4 - 17.3: サポートされています
- 17.4: サポートされています
- 17.5 - TP: サポートされています
Firefox
- 2 - 3.6: サポートされていません
- 4 - 84: サポートされています
- 85 - 124: サポートされています
- 125: サポートされています
- 126 - 128: サポートされています
Opera
- 9 - 65: サポートされていません
- 66 - 71: デフォルトで無効
- 72 - 108: サポートされています
- 109: サポートされています
IE
- 5.5 - 10: サポートされていません
- 11: サポートされていません
Chrome for Android
- 124: サポートされています
Safari on iOS
- 3.2 - 14.8: サポートされていません
- 15 - 15.3: デフォルトで無効
- 15.4 - 17.3: サポートされています
- 17.4: サポートされています
- 17.5: サポートされています
Samsung Internet
- 4 - 13.0: サポートされていません
- 14.0 - 23: サポートされています
- 24: サポートされています
Opera Mini
- すべて: サポートされていません
Opera Mobile
- 10 - 12.1: サポートされていません
- 80: サポートされています
UC Browser for Android
- 15.5: サポートされていません
Android Browser
- 2.1 - 4.4.4: サポートされていません
- 124: サポートされています
Firefox for Android
- 125: サポートされています
QQ Browser
- 14.9: サポートされていません
Baidu Browser
- 13.52: サポートされています
KaiOS Browser
- 2.5: サポートされています
- 3: サポートされています
以前は :focus-ring
としてドラフトされていました
- リソース
- ChromeはCSS Selectors 4の:focus-visibleをサポートしていません
- WebKit bug #185859: [selectors] Support for Focus-Indicated Pseudo-class: `:focus-visible`
- Bugzilla: Add :focus-visible (former :focus-ring)
- Bugzilla: implement :focus-visible pseudo-class (rename/alias :-moz-focusring)
- Mozilla Developer Network (MDN) ドキュメント - :-moz-focusring
- `:focus-visible` のプロトタイプ
- Blink: :focus-visible 擬似クラスの実装意図