Wie können Sie Nur-Tastatur-Fokusstile mit :focus-visible implementieren?

Fokusstile nur für die Tastatur in modernen Browsern

In modernen Browsern kann die Pseudoklasse :focus-visible verwendet werden, um Tastatur-Fokusstile zu erreichen. nur Fokusstile. Diese Pseudoklasse gleicht fokussierte Elemente ab, wenn der Benutzer mit der Seite über eine Tastatur oder ein anderes nicht zeigendes Gerät interagiert, und zeigt den Fokus an, wenn dies dem Benutzer hilft. Dadurch werden Fokusringe unterdrückt, wenn ein Benutzer durch Klicken oder Tippen interagiert.

Benutzerdefiniertes Fokus-Styling mit :focus-visible

Um benutzerdefinierte Fokusstile bei gleichzeitiger Beibehaltung zu implementieren Kompatibilität mit älteren Browsern, befolgen Sie diesen Ansatz:

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

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

In Browsern, die :focus-visible unterstützen, überschreibt die zweite Regel die in der ersten Regel definierten Fokusstile, wenn :focus-visible inaktiv ist. Dadurch wird sichergestellt, dass Fokusstile nur angewendet werden, wenn :focus-visible aktiv ist.

Originallösung für ältere Browser

Für Browser, die :focus-visible nicht unterstützen, Ein alternativer Ansatz beinhaltet die Verwendung eines zusätzlichen Elements innerhalb jedes fokussierbaren Elements, wie in Roman Komarovs Artikel vorgeschlagen:

<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>

Indem die Fokusstile auf einem inneren Element platziert werden, während Standardkonturen sowohl auf dem übergeordneten als auch auf dem inneren Element entfernt werden Nach dem Hinzufügen des benutzerdefinierten Fokusstils wenden nur Tastaturinteraktionen Fokusstile auf das primäre sichtbare Element an.

Das obige ist der detaillierte Inhalt vonWie können Sie Nur-Tastatur-Fokusstile mit :focus-visible implementieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!