フォーカス、：フォーカスビジール、およびcssのフォーカスウィチンの違いは何ですか？

目次

• ：focus pseudo-class
• 問題：フォーカス
キーボードを使用した
• インタラクション
• The：Focus-Visible Pseudo-Class
• どうですか：フォーカスウィチン？
  • 実用的なユースケース：フォーカスウィット
• さらに読み取り

---

ご存知かもしれませんが、CSSには3つの同様の響きの擬似クラスがあります。

一見すると、これらの違いといつ使用するかについて混乱する可能性があります。良いニュースは次のとおりです。これらの3つの擬似クラスは、互いに理解するのが非常に簡単で区別されます。 この記事では、正確に何があるかを理解します。フォーカス、：フォーカスビジー、および：フォーカスウィッチン、そしてこれらの擬似クラスのそれぞれをいつ、どのように使用するか。

さらなる読み取り：

擬似クラスの復習が必要な場合は、CSSコースでCSS擬似クラスの章に飛び乗ってください。

The：Focus Pseudo-Class 最初に
最初に、

：フォーカス

---

pseudo-classは、

フォーカス

。 このフォーカスは、マウス（要素をクリックするとき）、キーボード（[押してタブを押してナビゲートするとき）、または基礎となるプログラム（JavaScriptを使用するとき）を使用して作成できます。

さらなる読み取り： あなたは以下を探索することができます：focus pseudo-classはCSS擬似クラスで詳細に詳細 さらに、のみフォーカス可能な要素のみが焦点を受け取ることができ、したがって、フォーカスの主題です。これらは通常、HTMLのインタラクティブな要素です。

？通知

：＆lt; p＆gt;＆lt; h1＆gt;、＆lt; blockquote＆gt;、＆lt; code＆gt;、などの非相互作用要素は焦点を絞ることができず、したがって：フォーカスの主題であることはできません。 Tabindex属性をそれらに設定することにより、それらを明示的に焦点を合わせやすい場合にのみ、それらに適用することを期待できます。

に戻る：フォーカス、この擬似クラスは、選択し、その後、フォーカス状態にあるときに要素にスタイルを適用するために使用され、その後、スタイルを適用します。 おそらく、そうする最も素朴な例は、以下に示すように入力フィールドを考慮することです。

ライブの例

入力フィールドをクリックした瞬間、フォーカスを受信し、その結果、以下に示すように、ブラウザがブラックアウトラインを適用します。

これは、現在多くの入力フィールドの形式内にどの入力があるかをすぐに確認するのに役立ちます。 これの利益をよりよく理解するために、反対を想像してください。入力フィールドをクリックして、そうするときにフィールドに特別なスタイリングが適用されていないと仮定します。

何が私たちが現在どの入力にあるのかを判断することは可能だと思いますか？ あらゆる種類のユーザーインターフェイスを設計する上で理想的なことは、

'すべてを可能な限り簡単にすることです。'

そしてこの場合、この理想的な世界は、次のように採用するだけで非常に簡単に達成できます。 - クラス。 本質的に：

The：Focus Pseudo-Class（他の2つのフォーカスPseudoクラスでさえ）は、Webページのアクセシビリティを改善するのに役立ちます。

彼が現在Webページのどこにいるかについて視覚的に明確に通信することにより、彼がウェブページと対話し、混乱せずに彼の仕事を成し遂げることができるほど簡単にします。 言い換えれば、焦点は、私たちが思うよりも擬似クラスのより重要です。

しかし、それだけで重要なフォーカスベースの擬似クラスではありません。 ：Focus-Visible

もあります

問題：フォーカス

上記の例：フォーカス、基本的なテキスト入力フィールドを検討しました。次の欠点を確認するためにボタンにシフトしましょう：フォーカス。

次のボタンを検討してください。

---

ライブの例

ボタンをクリックした瞬間、以下に示すように、目的の青いアウトラインが得られます。

しかし、一瞬待ちますか？私たちのこの欲求は望ましいですか？

<label>
   <span>Name</span>
   <input type="text" name="name">
</label>

別の言い方を言った：

<button>A button</button>

マウスを使用してボタンをクリックしたときにアウトラインを紹介するのは賢明な決定ですか？

理由を理解しましょう...

ボタンをクリックすると、または一般的に、インタラクティブな要素をクリックすると、アクションを実行することが意図されています

リンク - ウェブページのどこにいるかはすでにわかっています。明らかに、ボタンを意識的にクリックしているため、Webページのどの要素が現在焦点を合わせているかについて混乱することはできません。 この点で、ボタンを視覚的に強調することはあまり意味がありません。

しかし、なぜこれが入力フィールドに対して意味があるのですか？

良い質問。あなたはあなたの観察において正しいです：入力フィールドでそれを使用するとき、フォーカスは絶対にうまく機能し、それには単純な理由があります。マウスを使用して入力フィールドをクリックすると、

ジョブが終了しません。まだフィールドにデータを入力する必要があります そして、私たちの仕事はまだ行われていないので、どの入力が現在アクティブであるかを迅速かつ明確に知る必要があります。 最も重要なことは、入力フィールドとボタンの重要でありながら微妙な区別（および他のそのようなインタラクティブな要素）に注意してください：

• 入力フィールドはタスクをすぐに達成しませんしたがって、マウスを使用して対話する場合でも視覚化するためにフォーカスを必要とします。
ボタンはすぐにタスクを達成します（たとえば、カートにアイテムを追加するため）。したがって、マウスを使用して対話するときに焦点を合わせた状態で視覚的に紹介する必要性をポーズにしません。
したがって、この時点で、入力フィールドは次のことをうまくゲル化していることがわかります。

しかし、この推論は、マウスを使用してこれらの要素と対話する場合にのみ適用されることに留意してください。

キーボードにシフトするとどうなりますか？

調べてみましょう...

キーボードを使用したインタラクション

ご存知かもしれませんが、マウスを使用してウェブページの周りをナビゲートすることは可能ではありません。これにもキーボードを使用できます。

実際には、マウスの相互作用のみを楽しませるためにこの方法でWebページが構築されている場合、それは非常にアクセスできません。

誰かがマウスデバイスを壊し、今では試験の準備をしたいと思っています。最悪の場合は、その人がマウスの相互作用を中心に構築されたウェブサイトから準備したい場合です。

---

CSS開発者として、この事実と設計Webサイトは、マウスと同じようにアクセスできるように設計する必要があります。この点で、インタラクティブな要素がフォーカスを受け取ったときに、インタラクティブな要素に必要な視覚的強調を確実に提供する必要があります。

そしてこれにはボタンも含まれています

これをもう一度述べましょう。 マウスを使用してWebページと対話する場合、焦点を絞った状態でボタン（および同様の要素）の視覚的な強調を作成する必要はありません。実際、上で見たように望ましくない。これは、ユーザーがボタンをクリックした後、それが焦点を合わせるものであることをすでに知っているからです。

しかし、代わりにキーボードを使用している場合、

視覚的な強調を作成することは最大限の必要です

。これは、ユーザーがどのインタラクティブ要素が焦点を合わせているかをユーザーが認識していないためです。これを視覚的に紹介する必要があります

問題は、使用できないことです。このスタイリングの懸念に焦点を当てていることです...

マウスを使用して対話する場合でも、ボタンに適用されます。

今何？ 心配する必要はありません。なぜなら、私たちは

The：Focus-Visible Pseudoクラス

プログラミングで何かを学ぶ前に、最初にその命名法を見つめているという事実に大きなストレスを与えます（

'naming'

の派手な言葉）。意味が名前自体にあるという可能性が高いです。 これに続いて、名前を分析すると、Focus-Visibleを分析すると、

'Focus'と関係があるだけでなく、 '目に見える' 。

この擬似クラスが意味することだけの名前で理解できますか？ まあ、：フォーカス可視は、フォーカスを目に見えるようにする必要がある

および

にある要素に適用されます（理想的には）。コンパクトに、私たちは次のように言うことができます。フォーカス可視は、そのフォーカスが可視されるはずの要素に適用されます。 ：フォーカス可視は、キーボードまたはその他の非マウスの相互作用を使用してフォーカスの要素を持ってくるときにのみ表示されます（たとえば、JavaScriptを使用します）。 最も重要なこと - そしてこれは本当に本当に重要です -

：フォーカス可視は、マウスの相互作用のおかげでフォーカスを受け取るとき、ボタン（およびそのような要素）には適用されません

。 これで、＆lt; button＆gt;に戻りましょう。上記の例と交換：フォーカスルールに：フォーカス可視：キーボードを介してボタンがフォーカスを受信したときにのみアウトラインが表示されるようになります。

ライブの例

ボタンをクリックしたときに（マウスを使用して）得られるものは次のとおりです。

<label>
   <span>Name</span>
   <input type="text" name="name">
</label>

何も。

しかし、ボタンに移動してフォーカスを持ち込むためにタブキーを押すと、以前と同じアウトラインを取得します。

これは、スタイリングボタン（または他のそのような要素、例えば＆lt; a＆gt;）の場合、私たちは：フォーカスの代わりにフォーカスに魅了できる（上記の理由のため）。

：Focus-Visibleは基本的に、[a）ボタンをクリックしてもスタイルを適用しないため、マウスを使用して（b）Webページがアクセス可能なままであることを確認してください。ボタンに必要なフォーカススタイルを備えたキーボードを使用する場合。

：Focus-Visibleはヒーローです！ （しかし、私は映画の名前を知りません！）

どうですか：フォーカスウィチン？

明らかに、あまり役に立たない

：focus-within

pseudo-classを超えずにこの記事を終了することはできませんでした。今それをしましょう。

：Focus-Withinは、名前が示すように（言い換えれば、一致する子孫要素を含むすべての要素：フォーカス、またはそれ自体が一致する：フォーカス、フォーカスウィチン。 以下は例です：

---

a＆lt; div＆gt;にはボタンが含まれています。私たちの目標は、＆lt; div＆gt;をスタイリングすることです。特にボタンが焦点を合わせているとき。次のCSSはこれを達成します：

ライブの例

ボタンが焦点を受けた瞬間、＆lt; div＆gt;ピンクの背景色を取得します。

かなり基本的です

？注意

：それは次のとおりです。フォーカスウィッチンはまったく同じように動作します。たとえば、ボタンのマウスの相互作用にも表示されるという点でフォーカス。それは次のような動作を示しません：フォーカスビジー可能。 今、あなたはより実用的な例を探しているかもしれません：フォーカス・ウィッチンであり、それはまさに私があなたのために持っているものです。 前述のように、：Focus-WithinはCSSで一般的に使用されていませんが、いくつかのケースは、フォーカスウィチンを使用してかなりエレガントに解決できるようなものです。そのようなケースについて学ぶために読んでください。

実践的なユースケース：フォーカスウィチン

キーボードナビゲーションを使用するときにのみ表示されるアクセシビリティバーがWebサイトにあるとします。当初、それは隠されていますが、視覚的にのみです。つまり、このバー内のボタンのいずれかにタブを付けることができます。

？通知

：

'視覚的にのみ隠されている

は、要素に表示がないことを意味します。たとえば、不透明度：0は視覚的にのみ要素を隠します 今、このアクセシビリティバーのボタンのいずれかが焦点を合わせた瞬間、このバーをユーザーに紹介する必要があります。 しかし、どちらかのボタンにフォーカスがあるときにアクセシビリティバーを選択する方法は？ >は 'アクセシビリティ'

の短い形式です。目的のセレクターは.a11y-bar：focus-within。

になります。

.a11y-bar：フォーカスウィチンは、フォーカスがその中にあるときはいつでも.a11y-barを選択します。これはまさに必要なものです。

良い仕事！ 以下のリンクは、この例を示しています： ライブの例

さらに読む

私たちが知っておくべきほとんどすべてをカバーしているという事実にもかかわらず：フォーカス、：フォーカスビジー、そして：フォーカスウィチン、以下のリソースからさらに読むことにはまだ価値があります：

CSSの使用：キーボードフォーカスの表示を提供するためのフォーカスビザブル - WCAG 2.1テクニック

成功基準2.4.7を理解する：焦点を合わせて見える|ワイ| w3c

9.3。入力フォーカスプソイドクラス：：フォーカス - セレクターレベル4 | w3c

---

9.4。フォーカスが指定した擬似クラス::：フォーカス可視 - セレクターレベル4 | w3c

9.5。フォーカスコンテナ擬似クラス：：フォーカスウィチン - セレクターレベル4 | w3c

今日CSSを学びましょう
あなたがCSSの初心者であり、基本をよく学びたい場合は、CodeGuageのCSSコースを検討してください。

以上がフォーカス、：フォーカスビジール、およびcssのフォーカスウィチンの違いは何ですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。