CSS/Selektoren/focus-visible

Browserunterstützung
caniuse.com

Der :focus-visible-Selektor kennzeichnet Verweise, die den focus haben und bei denen der Browser entschiedet, dass der Nutzer dies auch sehen soll (z. B. wenn er mit der Tastatur arbietet).

Die Pseudoklasse :focus erfasst alle aktuell fokussierten Elemente. :focus-visible passt ebenfalls zum fokussierten Element, jedoch nur, wenn der Benutzer darüber informiert werden muss, wo sich der Fokus gerade befindet.

Syntax

:focus-visible

Beispiel

.next-image-button:focus {
  outline: none;
}
.next-image-button:focus-visible {
  outline: 3px solid skyblue; /* That'll show 'em */
}

Der „normale“ Fokusring wird entfernt. Wenn die Tab-Taste (↹) verwendet wird, um zum Button zu springen, wird der Fokus visuell angezeigt.

Siehe auch

• HTML/Tutorials/Links
  • Maus- und Tastaturinteraktionen focus-visible

Weblinks

• W3C: The Focus-Indicated Pseudo-class: :focus-visible
• MDN: :focus-visible
• foucs-visible (css.tricks.com)
• Browser-Support: caniuse.com