:focus-visible を使用してキーボードのみのフォーカス スタイルを実装するにはどうすればよいですか?

最新のブラウザでのキーボードのみのフォーカス スタイル

最新のブラウザでは、:focus-visible 疑似クラスを利用してキーボードを実現できます。フォーカススタイルのみ。この疑似クラスは、ユーザーがキーボードまたはその他の非ポインティング デバイスを介してページを操作するときにフォーカスされた要素と一致し、ユーザーを支援するときにフォーカスを示します。その結果、ユーザーがクリックまたはタップして操作するとき、フォーカス リングは抑制されます。

:focus-visible を使用したカスタム フォーカス スタイル

維持しながらカスタム フォーカス スタイルを実装するには古いブラウザとの互換性を維持するには、次のアプローチに従ってください:

<code class="css">button:focus {
  /* Default focus styles */
}

button:focus:not(:focus-visible) {
  /* Undo default focus styles */
}</code>

をサポートするブラウザ:focus-visible の場合、:focus-visible が非アクティブな場合、2 番目のルールは最初のルールで定義されたフォーカス スタイルをオーバーライドします。これにより、:focus-visible がアクティブな場合にのみフォーカス スタイルが適用されるようになります。

古いブラウザ向けのオリジナル ソリューション

:focus-visible をサポートしていないブラウザの場合、別のアプローチには、Roman Kumarov の論文で提案されているように、フォーカス可能な各要素内で追加の要素を使用することが含まれます。記事:

<code class="css">/* Root button styling */
.btn {
  all: initial;
  display: inline-block;
}

/* Inner content element */
.btn__content {
  background: orange;
  cursor: pointer;
  display: inline-block;
}

/* Custom focus styles on inner element */
.btn:focus > .btn__content {
  box-shadow: 0 0 2px 2px #51a7e8;
  color: lime;
}</code>

カスタム フォーカス スタイルを追加した後、親要素と内部要素の両方のデフォルトのアウトラインを削除しながら、内部要素にフォーカス スタイルを配置すると、キーボード インタラクションのみが主要な表示要素にフォーカス スタイルを適用します。 .

以上が:focus-visible を使用してキーボードのみのフォーカス スタイルを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。