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 über eine Tastatur oder ein anderes nicht zeigendes Gerät mit der Seite 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, folgen Sie diesem Ansatz:

button:focus {
  /* Default focus styles */
}

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

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:

/* 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;
}

Durch die Platzierung der Fokusstile auf einem inneren Element und das Entfernen der Standardkonturen sowohl auf dem übergeordneten als auch auf dem inneren Element nach dem Hinzufügen des benutzerdefinierten Fokusstils werden Fokusstile nur durch Tastaturinteraktionen auf das primäre sichtbare Element angewendet.