:focus-visibleについて

INDEX

こんにちはミズノです。

2021年からモダンなブラウザのUA style sheet(ユーザーエージェントスタイルシート)に:focus-visibleが使用されるようになってきました。ChromeのUA style sheetを見ると全ての:focusが:focus-visibleになっています！

今回は:focus-visible擬似クラスの紹介をしていこうと思います。

:focus-visibleが実装された経緯は開発者がマウスユーザーのためにoutline:0を指定してフォーカスリング(フォーカスインジケータ)を消し、キーボードユーザーがサイトにアクセスできなくなることを防ぐために設計、実装されたようです。

/* マウス操作時 */
.example:focus {
  outline: 1px solid #fdfe00;
}

/* キーボード操作時 */
.example:focus-visible {
  outline: 1px solid #46e678;
}

input要素とbutton要素に:focusと:focus-visibleを使用した場合のマウス操作時とキーボード操作時の比較。

2022年1月26日現在のブラウザの対応状況(Can I use)ではChrome、Firefox、Edgeなどが対応されていますが、Safariが未対応となっています。

しかし、今月の20日に公開されたRelease Notes for Safari Technology Preview 138によるとSafari Technology Previewで:focus-visibleが使用可能になったのでSafariのサポートも間近だと思われます！

公式のPolyfillも用意されているので未対応のブラウザを対応したいときはこちらで対応しましょう。

「この青い線の見た目変えられませんか？」と依頼されたときは、:focusより:focus-visibleで対応しましょう！

以上、:focus-visibleの紹介でした。

BLOG2024.11.12

BLOG2024.11.06

BLOG2024.10.11