:focus-visibleフォーカスされ、かつブラウザがフォーカスリングを表示している要素にスタイルを適用する
:focus-visible 擬似クラスは、要素が :focus 擬似クラスに一致している（つまり、閲覧者の操作によって要素がフォーカスされている）状態、かつブラウザが「フォーカスリング」を表示するなど、そのフォーカスを可視化すると判断した状況で、フォーカスされた要素にスタイルを適用します。
:focus-visible 擬似クラスを使用することで、フォーカスインジケータが表示される状況において、その外観だけを変更することができます。
:focus-visibleのサンプルソース
:root {
--focus-outline-color: red;
}
:focus-visible {
outline: 1px solid var(--focus-outline-color);
}
主要ブラウザの対応
| IE11 | × |
|---|---|
| Edge（EdgeHTML） | × |
| Edge（Chromium） | ○ |
| Chrome | ○ |
| Firefox | ○ |
| Safari | ○+15.4 |
| iOS Safari | ○+15.4 |
| Android Chrome | ○ |