: fokus-synlig - CSS-tricks | CSS Almanak 2025

Den :focus-visiblepseudo-klasse (også kendt som ”Focus-Indiceret” pseudo-klasse) er en nativ CSS måde at typografielementer at:

Er i fokus
Brug for en synlig indikator for at vise fokus (mere om dette senere)

:focus-visiblebruges på samme måde som :focus: at bringe opmærksomhed mod det element, der i øjeblikket har fokus.

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

:focus-visibleer en del af CSS4 Selectors arbejdsudkast. Før vedtagelsen introducerede Mozilla :-moz-focusringpseudoklassen for at bringe funktionaliteten til Firefox forud for en formel specifikation.

Hvorfor har vi brug for: fokus-synlig?

Gør det ikke :focusallerede? Ja, men der er problemer. Den klareste illustration er en knap, der affyrer noget JavaScript. Forestil dig en billedkarrusel med knapper til at skifte mellem billeder. Lad os sige, at du har føjet en tabindextil knapperne, så de kan vælges med et tastatur, men når du går for at teste karrusellen med musen, ser du denne oversigt omkring din smukke knap:

Oversigt tilføjet af browseren den `:focus`

Ikke at du ønsker at gøre dette (af hensyn til tilgængelighed), men hvordan slipper du af det? Ved at indstille :focuspseudoklassen:

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

Nu ser din knap godt ud, når den er i fokus, men hvad sker der, når en bruger tapper til din knap uden en mus, men et tastatur i stedet? De kan ikke se, hvor de har fanebladet! Det er et problem, for der er nu ingen måde at fortælle, hvilken knap der er fokuseret på tastaturhandlinger:

En af disse er fokuseret, men du kan ikke se det!

Er der en måde at fjerne det blå fokus, men stadig vise et fokus, der er mere i tråd med webstedsdesignet? Sikker på, du kan få din kage og spise den også takket være :focus-visible!

:focus-visiblegælder kun, når du rent faktisk vil have en visuel indikator, der hjælper brugeren med at se, hvor fokus er. Med andre ord kan det ikke skjule omridset som det :focuskan. (Nå, det kunne ved at blande det ind i designet, men hvad som helst.) De to skal bruges sammen i den forstand. Lad os tilføje en til vores knap:

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

Nu, når tastaturet bruges til at tabe til knappen, vil der være en visuel indikation af fokus:

Hvordan bestemmer browsere, hvornår noget er: fokus-synligt?

Browsere får lidt spillerum til at bestemme, hvornår denne pseudovælger skal anvendes på et givet element ved hjælp af deres egen heuristik. Lad os først se på CSS4-arbejdsudkastet, og så prøver vi at nedbryde det. Fra specifikationerne:

Hvis en bruger har udtrykt en præference (f.eks. Via en systemindstilling eller en browserindstilling) for altid at se en synlig fokusindikator, skal brugeragenten respektere dette ved at have: fokus-synlig altid matche på det aktive element, uanset hvilket andet faktorer. (En anden mulighed kan være, at brugeragenten viser sin egen fokusindikator uanset forfatterstil.)

Ethvert element, der understøtter tastaturinput (såsom et inputelement eller ethvert andet element, der kan udløse, at et virtuelt tastatur vises i fokus, hvis der ikke findes et fysisk tastatur), skal altid matche: fokus-synligt, når det er fokuseret.

Hvis brugeren interagerer med siden via tastaturet, skal det aktuelt fokuserede element matche: fokus-synlig (dvs. brug af tastatur kan ændre, om denne pseudoklasse matcher, selvom det ikke påvirker: fokus).

Hvis brugeren interagerer med siden via en pegeudstyr, således at fokus flyttes til et nyt element, der ikke understøtter brugerinput, bør det nyligt fokuserede element ikke matche: fokus-synlig.

Hvis det aktive element matcher: fokus-synligt, og et script får fokus til at bevæge sig andetsteds, skal det nyligt fokuserede element matche: fokus-synligt.

Omvendt, hvis det aktive element ikke matcher: fokus-synligt, og et script får fokus til at bevæge sig andetsteds, bør det nyligt fokuserede element ikke matche: fokus-synligt.

Hvis det er lidt abstrakt, her er en fortolkning:

Situation	Gælder: fokus-synligt?
Brugeren siger, at de altid vil have, at fokus skal være synligt via en indstilling	Ja
Et element har brug for et tastatur til at fungere (som tekst)	Ja
Brugeren navigerer med et tastatur	Ja
Brugeren navigerer med en pegeudstyr (som en mus eller finger på en berøringsskærm)	Ingen
Et script får fokus til at flytte fra et `:focus-visible`element til et andet element	Ja
Et script får fokus til at flytte fra et ikke- `:focus-visible`element til et andet element	Ingen

Det gentages: Dette er retningslinjer, og browsere vil være i stand til at træffe deres egen beslutning om, hvad der vælges af :focus-visible. Vi kan forvente, at det åbenlyse tilfælde af tastaturnavigation håndteres på en forudsigelig måde, men browserne har evnen til selv at træffe beslutningen som enhver anden funktion.