見た目の美しさに影響を与えずにキーボードのみのフォーカス スタイルを実現するにはどうすればよいですか?

キーボードのみのフォーカス スタイルの実現

アクティブな状態と美的に矛盾するため、不要な場合は :focus を無効にすることを目的としています。ただし、キーボード ユーザーのためにフォーカス スタイルを保持したいと考えています。これに対処する包括的なアプローチは次のとおりです。

:focus-visible ソリューション

フォーカスが有益な場合にフォーカスを示す疑似クラスである :focus-visible の使用を検討してください。キーボード操作中などのユーザー。最近のブラウザはこの疑似クラスをサポートするようになりました。

:focus-visible を使用すると、条件付きでフォーカス スタイルを適用できます。

<code class="css">button:focus-visible {
  /* remove default focus style */
  outline: none;
  /* custom focus styles */
  box-shadow: 0 0 2px 2px #51a7e8;
  color: lime;
}</code>

ブラウザの互換性

:focus-visible をサポートしていないブラウザでもデフォルトのフォーカス リングが表示される場合があります。一貫した動作を確保するには、フォールバック戦略を使用します。

<code class="css">button:focus {
  outline: none;
  background: #ffdd00; /* gold */
}

button:focus:not(:focus-visible) {
  background: white; /* undo gold */
}</code>

キーボードのみのフォーカス スタイル

キーボードのみのフォーカス スタイル ソリューションの場合は、次のアプローチの使用を検討してください。

<code class="css">button {
  -moz-appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  outline: none;
  font-size: inherit;
}

.btn {
  all: initial;
  margin: 1em;
  display: inline-block; 
}

.btn__content {
  background: orange;
  padding: 1em;
  cursor: pointer;
  display: inline-block;
}


/* Fixing the Safari bug for `<button>`s overflow */
.btn__content {
    position: relative;
}

/* All the states on the inner element */
.btn:hover > .btn__content  {
    background: salmon;
}

.btn:active > .btn__content  {
    background: darkorange;
}

.btn:focus > .btn__content  {
    box-shadow: 0 0 2px 2px #51a7e8;
    color: lime;
}

/* Removing default outline only after we've added our custom one */
.btn:focus,
.btn__content:focus {
    outline: none;
}</code>

このメソッドは、各ボタン/リンクなど内の内部要素 () を使用します。そして、この内部要素の tabindex を設定します。フォーカス スタイルは内部要素にのみ適用され、キーボード フォーカスにのみ表示されるようになります。

以上が見た目の美しさに影響を与えずにキーボードのみのフォーカス スタイルを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。