:focus-visible | CSS-Tricks

CSS-Almanach → Selektoren → F → :focus-visible

Andy Adams am 10. Feb 2021

Die Pseudo-Klasse :focus-visible (auch bekannt als „Focus-Indicated“-Pseudo-Klasse) ist eine native CSS-Methode, um Elemente zu stylen, die

Im Fokus sind
Einen sichtbaren Indikator benötigen, um den Fokus anzuzeigen (mehr dazu später)

:focus-visible wird ähnlich wie :focus verwendet, um die Aufmerksamkeit auf das aktuell fokussierte Element zu lenken.

.element:focus-visible {
  background-color: pink; /* Something to get the user's attention */
}

:focus-visible ist Teil des CSS4 Selectors Working Draft. Vor der Einführung führte Mozilla die Pseudo-Klasse :-moz-focusring ein, um die Funktionalität vor einer formellen Spezifikation in Firefox bereitzustellen.

Warum brauchen wir :focus-visible?

Erledigt :focus nicht das bereits? Ja, aber es gibt Probleme. Die deutlichste Veranschaulichung ist ein Button, der etwas JavaScript auslöst. Stellen Sie sich einen Bildkarussell mit Buttons zum Wechseln der Bilder vor. Nehmen wir an, Sie haben einem Button einen tabindex hinzugefügt, damit er mit der Tastatur ausgewählt werden kann, aber wenn Sie das Karussell mit der Maus testen, sehen Sie diesen Umriss um Ihren großartigen Button

Vom Browser hinzugefügter Umriss bei `:focus`

Nicht, dass Sie das tun möchten (aus Gründen der Barrierefreiheit), aber wie bekommen Sie ihn weg? Indem Sie die Pseudo-Klasse :focus setzen

.next-image-button:focus {
  outline: none;
}

Jetzt sieht Ihr Button im Fokus großartig aus, aber was passiert, wenn ein Benutzer mit der Tastatur zum Button wechselt, aber nicht mit der Maus? Er kann nicht sehen, wohin er getabbt ist! Das ist ein Problem, denn es gibt keine Möglichkeit zu erkennen, welcher Button für Tastaturaktionen fokussiert ist

Einer davon ist fokussiert, aber man sieht es nicht!

Gibt es eine Möglichkeit, den blauen Fokus-Umriss zu entfernen und trotzdem einen Fokus anzuzeigen, der besser zum Design der Website passt? Sicher, Sie können Ihren Kuchen haben und ihn auch essen, dank :focus-visible!

:focus-visible gilt nur, wenn Sie tatsächlich einen visuellen Indikator wünschen, der dem Benutzer hilft, den Fokus zu sehen. Mit anderen Worten, er kann den Umriss nicht wie :focus verstecken. (Nun ja, er könnte ihn ins Design einfügen, aber egal.) Die beiden müssen in diesem Sinne zusammen verwendet werden. Fügen wir unserem Button einen hinzu

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

Wenn die Tastatur verwendet wird, um zum Button zu tabben, gibt es nun eine visuelle Anzeige des Fokus

`:focus-visible` macht den Fokus sichtbar!

Wie ermitteln Browser, wann etwas :focus-visible ist?

Browsern wird ein gewisser Spielraum gegeben, um zu bestimmen, wann dieser Pseudo-Selektor auf ein bestimmtes Element angewendet werden soll, indem ihre eigenen Heuristiken verwendet werden. Schauen wir uns zuerst den CSS4 Working Draft an und versuchen dann, ihn aufzuschlüsseln. Aus den Spezifikationen

Wenn ein Benutzer eine Präferenz geäußert hat (z. B. über eine Systemeinstellung oder eine Browsereinstellung), einen sichtbaren Fokus-Indikator immer zu sehen, sollte der User-Agent dies berücksichtigen, indem :focus-visible immer auf das aktive Element zutrifft, unabhängig von anderen Faktoren. (Eine weitere Option kann sein, dass der User-Agent seinen eigenen Fokus-Indikator anzeigt, unabhängig von den Author-Styles.)

Jedes Element, das Tastatureingaben unterstützt (z. B. ein Eingabeelement oder jedes andere Element, das beim Fokussieren eine virtuelle Tastatur anzeigen kann, wenn keine physische Tastatur vorhanden ist), sollte beim Fokussieren immer :focus-visible treffen.

Wenn der Benutzer über die Tastatur mit der Seite interagiert, sollte das aktuell fokussierte Element :focus-visible treffen (d. h. die Tastaturnutzung kann ändern, ob dieser Pseudo-Selektor zutrifft, auch wenn er :focus nicht beeinflusst).

Wenn der Benutzer über ein Zeigegerät mit der Seite interagiert, so dass der Fokus auf ein neues Element verschoben wird, das keine Benutzereingaben unterstützt, sollte das neu fokussierte Element :focus-visible nicht treffen.

Wenn das aktive Element :focus-visible trifft und ein Skript den Fokus woandershin verschiebt, sollte das neu fokussierte Element :focus-visible treffen.

Umgekehrt, wenn das aktive Element :focus-visible nicht trifft und ein Skript den Fokus woandershin verschiebt, sollte das neu fokussierte Element :focus-visible nicht treffen.

Wenn das etwas abstrakt ist, hier ist eine Interpretation

Situation	Trifft :focus-visible zu?
Der Benutzer sagt, dass er über eine Einstellung immer möchte, dass der Fokus sichtbar ist	Ja
Ein Element benötigt eine Tastatur zur Funktion (wie Text- <Inputs>)	Ja
Der Benutzer navigiert mit einer Tastatur	Ja
Der Benutzer navigiert mit einem Zeigegerät (wie einer Maus oder einem Finger auf einem Touchscreen)	Nein
Ein Skript verschiebt den Fokus von einem `:focus-visible`-Element zu einem anderen Element	Ja
Ein Skript verschiebt den Fokus von einem Nicht-`:focus-visible`-Element zu einem anderen Element	Nein

Es sei wiederholt: Dies sind Richtlinien, und Browser können ihre eigene Bestimmung treffen, was von :focus-visible ausgewählt wird. Wir können erwarten, dass der offensichtliche Fall der Tastaturnavigation auf vorhersehbare Weise behandelt wird, aber die Browser haben die Möglichkeit, die Bestimmung selbst zu treffen, wie bei jeder anderen Funktion auch.

Browser-Unterstützung

Diese Browser-Unterstützungsdaten stammen von Caniuse, das weitere Details enthält. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.