キーボードのタブ移動時はoutlineを表示し、マウスクリック時は非表示にする

2021.07.22

:focus-visibleというキーボードのタブ移動でフォーカスが当たった場合に適用される擬似クラスを利用すると実現が可能。

例えば以下のような感じ。

ただ2021年7月現在のブラウザのサポート状況（caniuse.com）を見るとSafariのみ対応していないので、使用するのはもう少し待ったようが良さそうです。

代わりにポリフィル（Polyfill for :focus-visible）がありますので現時点ではこれを使うのが妥当な感じ。

使い方は簡単でポリフィルをscriptタグで読み込んでCSSを追加するだけです。

仕組みとしては簡単で、タブ移動でフォーカスされた要素にfocus-visibleクラスを追加して、そのクラスを元にCSSで装飾する感じです。

Appleの公式サイトでも似たようなテクニックが使われています。