👹「しんのすけ〜！あんた、CSSの`:focus-visible`もうお勉強したんでしょうね〜！？」

〜埼玉県春我部市にて〜

👩🏻「しんちゃ〜〜ん！」
👩🏻「あなた、CSSの情報はちゃんとキャッチアップしてるの？」
👩🏻「ひまわり組で最初に覚えた内容で止まってないでしょうね〜？」

「アクション仮面みてからするゾ〜！」

👹「あんた！前もそう言ってしなかったじゃないの！！」

👹「知らぬ間に全ブラウザ対応してるものもたくさんあるのよ！」
👹「ちゃんとお勉強しなさ〜い！」

「ほほーい...」

しんちゃんは春日部市じゃなくて、春我部市に住んでるよ！

（ドイツ）の国旗がしんちゃん過ぎるよ！

今日は:focus-visibleをお勉強するゾ〜！

「とは言え、みさえ。」
「何からお勉強すればいいんだゾ〜？」

👩🏻「仕方ないわね〜」
👩🏻「じゃあ、今日は:focus-visibleについてお勉強しましょ〜」

「初めて聞いたゾ〜」
「概要を説明してほしいゾ〜」

What is :focus-visible

👩🏻「じゃあ早速説明するわね！」

👇👇👇

• まず、:focus-visibleは擬似要素である
• キーボード操作（タブキーでの移動）の場合のみ、スタイルが適用される
• マウス操作時は基本的にスタイルが適用されない

👆👆👆

👩🏻「ざっとこんな感じね👆」
👩🏻「つまり、キーボード操作時でinputやbuttonにフォーカスした時のスタイルが設定できるってことね！」

「お〜〜、概要はわかったゾ〜」
「みさえ、やればできるじゃないか〜」

　
　👹
🤜🤛

マウス操作時に基本的にと書いたのは、以下の理由があります！

• キーボードでの入力をサポートする要素はマウス操作時でもスタイルが適用される
  • input要素など...

:focus使えば〜〜？

「でも、かーちゃん」
「inputやbuttonへのフォーカスなら:focusがあるゾ？」
「よしなが先生も:focusを使いましょうって言ってたゾ〜」

👩🏻「確かに:focusもあるわね」
👹「でもあんた、この前アクション仮面のサイト作ってる時に、buttonをクリックしたときのoutlineが気になるってCSSで消してたでしょ!?」

「た、確かに消したゾ...」

👹「レビューの時にコメントしたのにあんた無視したでしょ！！」
「(そうだ...、みさえにレビュー頼んだったんだ...)」
👹「本来はアクセシビリティの観点から、消しちゃダメなものなのよ！」

👩🏻「でも今後は、:focusじゃなく:focus-visibleを使えば、この問題は解消されるのよ〜」
👩🏻「クリック時には適用されず、キーボード操作の時にのみ適用されるからね」

実際、コード見なきゃわかんないゾ

「かーちゃん...」
「そう言われても、実際コード見ないとわからないゾ...」

:focusの挙動

👩🏻「しんちゃんならそう言うと思って、用意してあるわ〜👇」
👩🏻「まずは:focusから見ていきましょ〜👇」
👩🏻「グレーの背景をクリックすれば、一つ目のinputにキーボードで移動できるわ〜」

See the Pen Untitled by limoza (@limoza) on CodePen.

👩🏻「クリック時もキーボード操作時も、フォーカスされたらoutlineが表示されるのがわかるわよね〜」
「わかるゾ〜！！」

:focus-visibleの挙動

👩🏻「これを踏まえて:focus-visibleを見てみましょう〜👇」
👩🏻「同じく、グレーの背景をクリックすれば、一つ目のinputにキーボードで移動できるわ〜！」

See the Pen `:focus-visible` by limoza (@limoza) on CodePen.

👩🏻「どうかしら？」
👩🏻「inputはキーボード入力をサポートする要素よ」
👩🏻「だから、クリック時キーボード操作時の両方でoutlineが適用されているわ」

👩🏻「でも、buttonは、どうかな？」
👩🏻「クリック時はスタイルが適用されず、キーボード操作時のみoutlineが適用されているわ！」

「ホントだゾ〜〜〜！！」
「強調が必要な人をターゲットしてスタイルを当てられてるゾ〜」

👩🏻「これで、:focus-visibleの必要性がわかったかしら？」
👩🏻「見ての通り、とっくにほぼすべてのブラウザでサポートされているわ〜！」

「かーちゃん、オラとってもお勉強になったゾ！」
「これからは:focus-visibleを使っていくゾ〜！」

👩🏻「えらいわね！しんちゃん！」
👩🏻「これからも引き続きお勉強頑張りましょうね〜〜〜〜〜」

「ほほーい！！（チョコビ食べたい）」

　
　
　

▼参考にさせていただいたサイト
https://zenn.dev/sakito/articles/c5034684f2266c
https://evoworx.dev/blog/focus-visible/