: Fokus sichtbar - CSS-Tricks | CSS-Almanach 2025

Die :focus-visiblePseudoklasse (auch als "fokusindizierte" Pseudoklasse bekannt) ist eine native CSS-Methode zum Stylen von Elementen, die:

Sind im Fokus
Benötigen Sie einen sichtbaren Indikator, um den Fokus anzuzeigen (dazu später mehr)

:focus-visiblewird ähnlich verwendet wie :focus: um die Aufmerksamkeit auf das Element zu lenken, das derzeit den Fokus hat.

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

:focus-visibleist Teil des Arbeitsentwurfs von CSS4 Selectors. Vor der Einführung führte Mozilla die :-moz-focusringPseudoklasse ein, um die Funktionalität vor einer formalen Spezifikation in Firefox zu bringen.

Warum brauchen wir: fokussichtbar?

Tut das nicht :focusschon? Ja, aber es gibt Probleme. Die klarste Abbildung ist eine Schaltfläche, die JavaScript auslöst. Stellen Sie sich ein Bildkarussell mit Schaltflächen zum Wechseln zwischen Bildern vor. Angenommen, Sie haben tabindexden Schaltflächen ein hinzugefügt , damit sie mit einer Tastatur ausgewählt werden können. Wenn Sie jedoch das Karussell mit der Maus testen, sehen Sie diesen Umriss um Ihre wunderschöne Schaltfläche:

Gliederung vom Browser hinzugefügt am `:focus`

Nicht, dass Sie dies tun möchten (aus Gründen der Barrierefreiheit), aber wie können Sie es loswerden? Durch Setzen der :focusPseudoklasse:

.next-image-button:focus ( outline: none; )

Jetzt sieht Ihre Schaltfläche gut aus, wenn sie scharfgestellt ist. Was passiert jedoch, wenn ein Benutzer ohne Maus, sondern ohne Tastatur auf Ihre Schaltfläche wechselt? Sie können nicht sehen, wo sie getabelt haben! Das ist ein Problem, da jetzt nicht mehr festgestellt werden kann, welche Schaltfläche für Tastaturaktionen fokussiert ist:

Eines davon ist fokussiert, aber Sie können es nicht sehen!

Gibt es eine Möglichkeit, den blauen Fokusumriss zu entfernen und dennoch einen Fokus anzuzeigen, der eher dem Site-Design entspricht? Natürlich können Sie Ihren Kuchen haben und ihn auch essen, dank :focus-visible!

:focus-visibleDies gilt nur, wenn Sie tatsächlich eine visuelle Anzeige wünschen, mit der der Benutzer erkennen kann, wo sich der Fokus befindet. Mit anderen Worten, es kann den Umriss nicht wie :focusmöglich verbergen . (Nun, es könnte durch Einmischen in das Design geschehen, aber was auch immer.) Die beiden müssen in diesem Sinne zusammen verwendet werden. Fügen wir einen zu unserer Schaltfläche hinzu:

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

Wenn Sie nun mit der Tastatur auf die Schaltfläche klicken, wird der Fokus visuell angezeigt:

`:focus-visible` macht den Fokus sichtbar!

Wie bestimmen Browser, wann etwas sichtbar ist?

Browser haben ein wenig Spielraum, um zu bestimmen, wann dieser Pseudo-Selektor mithilfe ihrer eigenen Heuristik auf ein bestimmtes Element angewendet werden soll. Schauen wir uns zuerst den CSS4-Arbeitsentwurf an, und dann versuchen wir, ihn aufzuschlüsseln. Aus den Spezifikationen:

Wenn ein Benutzer eine Präferenz (z. B. über eine Systempräferenz oder eine Browsereinstellung) zum Ausdruck gebracht hat, um immer einen sichtbaren Fokusindikator anzuzeigen, sollte der Benutzeragent dies berücksichtigen, indem: Fokus-sichtbar immer auf dem aktiven Element übereinstimmt, unabhängig von einem anderen Faktoren. (Eine andere Möglichkeit besteht darin, dass der Benutzeragent unabhängig von den Autorenstilen eine eigene Fokusanzeige anzeigt.)

Jedes Element, das Tastatureingaben unterstützt (z. B. ein Eingabeelement oder ein anderes Element, das möglicherweise eine virtuelle Tastatur auslöst, die im Fokus angezeigt wird, wenn keine physische Tastatur vorhanden ist), sollte immer übereinstimmen: Fokus sichtbar, wenn fokussiert.

Wenn der Benutzer über die Tastatur mit der Seite interagiert, sollte das aktuell fokussierte Element übereinstimmen: Fokus sichtbar (dh die Verwendung der Tastatur kann ändern, ob diese Pseudoklasse übereinstimmt, auch wenn sie Folgendes nicht beeinflusst: Fokus).

Wenn der Benutzer über ein Zeigegerät mit der Seite interagiert, sodass der Fokus auf ein neues Element verschoben wird, das keine Benutzereingaben unterstützt, sollte das neu fokussierte Element nicht übereinstimmen: Fokus sichtbar.

Wenn das aktive Element übereinstimmt: Fokus sichtbar und ein Skript bewirkt, dass der Fokus an eine andere Stelle verschoben wird, sollte das neu fokussierte Element übereinstimmen: Fokus sichtbar.

Wenn umgekehrt das aktive Element nicht übereinstimmt: Fokus sichtbar und ein Skript bewirkt, dass der Fokus an eine andere Stelle verschoben wird, sollte das neu fokussierte Element nicht übereinstimmen: Fokus sichtbar.

Wenn das ein wenig abstrakt ist, hier eine Interpretation:

Situation	Gilt: Fokus sichtbar?
Der Benutzer sagt, er möchte immer, dass der Fokus über eine Einstellung sichtbar ist	Ja
Ein Element benötigt eine Tastatur, um zu funktionieren (wie Text).	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 bewirkt, dass der Fokus von einem `:focus-visible`Element zu einem anderen Element verschoben wird	Ja
Ein Skript bewirkt, dass der Fokus von einem Nicht- `:focus-visible`Element zu einem anderen Element verschoben wird	Nein

Es muss wiederholt werden: Dies sind Richtlinien, und Browser können selbst bestimmen, von was ausgewählt wird :focus-visible. Wir können davon ausgehen, dass der offensichtliche Fall der Tastaturnavigation auf vorhersehbare Weise behandelt wird, aber die Browser haben die Möglichkeit, die Bestimmung wie bei jeder anderen Funktion selbst vorzunehmen.

Browser-Unterstützung

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.