最近便利なCSSおれおれAdvent Calendar 2023 – 02 日目

a:focus とか便利なんですよね。なんかそのシリーズが増えてます。

  • :focus-visible – キーボードを使ってナビゲーションしているとき
  • :focus-within – 自身か子孫要素にフォーカスがあるとき（明日）

:focus-visible でフォーカスリングを制御

たぶん一番多い用途かなと思います。仕様に掲載の例も outline です。

キーボードでフォーカス移動すると枠線が表示されます。

button {
  outline: none;

  &:focus-visible {
    outline: 2px solid blue;
  }
}

対象になるタイミング

実は実装依存です。仕様には好きにしていいよとあります。

User agents can choose their own heuristics for when to indicate focus

(Tests Selectors Level 4 – Example 40)

仕様はないけどおすすめとしていくつかパターンが掲載されています。手元の Chrome と Firefox で試した感じこんなときに対象となる（セレクターにマッチしてフォーカスリングが出てくる）ようです。

  • タブキーで移動したとき
    • もうちょっと言うと “non-pointing device”
    • 音声操作とか視線操作なブラウザーとかあればたぶん対象になりそう
  • キーボード入力が想定される要素に（マウスでも）フォーカスしたとき
    • <input type="text"> ← 出る
    • <input type="range"> ← 出ない
  • フォーカスリングが出ている状態で、スクリプトでフォーカス移動を強制したとき
    • el.focus()
    • 出ていない状態から移動したときは出ない

デモを用意したので試してみてください。

おしまい

ア方面でよく話題になる印象。

キーボードのスペースバーを使ってスクロールしがちなので、フォーカスはマウスでも分かりやすく表示されてくれてると嬉しい派です。少数派の自覚はある。

Can I Use? を見るに、:focus-visible は 2022 年あたりから使えるようになったみたいです。もっと前かと思ってた。Firefox は 2012 年からとかすげえな。

参考