: fokus-synlig - CSS-triks | CSS-almanakk 2025

Den :focus-visiblepseudo-klasse (også kjent som “Focus-Indikert” pseudo-klasse) er en innfødt CSS måte å stilelementer som:

Er i fokus
Trenger en synlig indikator for å vise fokus (mer om dette senere)

:focus-visiblebrukes på samme måte som :focus: å bringe oppmerksomhet til det elementet som for tiden har fokus.

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

:focus-visibleer en del av arbeidsutkastet til CSS4 Selectors. Før adopsjon introduserte Mozilla :-moz-focusringpseudoklassen for å bringe funksjonaliteten til Firefox foran en formell spesifikasjon.

Hvorfor trenger vi: fokus-synlig?

Gjør ikke :focusdette allerede? Ja, men det er problemer. Den klareste illustrasjonen er en knapp som avfyrer noe JavaScript. Se for deg en bildekarusell med knapper for å bytte mellom bilder. La oss si at du har lagt tabindextil knappene slik at de kan velges med et tastatur, men når du skal teste karusellen med musen, ser du denne oversikten rundt den nydelige knappen:

Oversikt lagt til av nettleseren på `:focus`

Ikke at du ønsker å gjøre dette (for tilgjengelighetsproblemer), men hvordan blir du kvitt det? Ved å sette :focuspseudoklassen:

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

Nå ser knappen din flott ut når den er i fokus, men hva skjer når en bruker tapper til knappen din uten en mus, men et tastatur i stedet? De kan ikke se hvor de har faner! Det er et problem fordi det nå ikke er noen måte å fortelle hvilken knapp som er fokusert for tastaturhandlinger:

En av disse er fokusert, men du kan ikke se det!

Er det en måte å fjerne den blå fokuskonturen, men fremdeles vise et fokus som er mer i tråd med nettstedsdesignet? Visst, du kan få kaken din og spise den også takket være :focus-visible!

:focus-visiblegjelder bare når du faktisk vil ha en visuell indikator for å hjelpe brukeren å se hvor fokuset er. Med andre ord, det kan ikke skjule disposisjonen som den :focuskan. (Vel, det kan ved å blande det inn i designet, men hva som helst.) De to må brukes sammen i den forstand. La oss legge til en på knappen vår:

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

Nå når tastaturet brukes til å tappe til knappen, vil det være en visuell indikasjon på fokuset:

Hvordan bestemmer nettlesere når noe er: fokus-synlig?

Nettlesere får litt spillerom for å bestemme når denne pseudovelgeren skal brukes på et gitt element ved hjelp av sin egen heuristikk. La oss først se på arbeidsutkastet til CSS4, og så prøver vi å bryte det ned. Fra spesifikasjonene:

Hvis en bruker har uttrykt en preferanse (for eksempel via en systeminnstilling eller en nettleserinnstilling) for alltid å se en synlig fokusindikator, bør brukeragenten respektere dette ved å ha: fokus-synlig alltid samsvarer med det aktive elementet, uavhengig av noe annet faktorer. (Et annet alternativ kan være at brukeragenten viser sin egen fokusindikator uavhengig av forfatterstiler.)

Ethvert element som støtter tastaturinngang (for eksempel et inngangselement eller ethvert annet element som kan utløse at et virtuelt tastatur vises i fokus hvis et fysisk tastatur ikke er tilstede) bør alltid stemme overens: fokus-synlig når det er fokusert.

Hvis brukeren samhandler med siden via tastaturet, bør det nå fokuserte elementet matche: fokus-synlig (dvs. bruk av tastatur kan endre om denne pseudoklassen samsvarer, selv om det ikke påvirker: fokus).

Hvis brukeren samhandler med siden via en pekeenhet, slik at fokus flyttes til et nytt element som ikke støtter brukerinngang, bør det nylig fokuserte elementet ikke matche: fokus-synlig.

Hvis det aktive elementet samsvarer med: fokus-synlig, og et skript får fokus til å bevege seg andre steder, bør det nylig fokuserte elementet matche: fokus-synlig.

Omvendt, hvis det aktive elementet ikke samsvarer: fokus-synlig, og et skript får fokus til å bevege seg andre steder, bør det nylig fokuserte elementet ikke matche: fokus-synlig.

Hvis det er litt abstrakt, her er en tolkning:

situasjon	Gjelder: fokus-synlig?
Brukeren sier at de alltid vil at fokus skal være synlig via en innstilling	Ja
Et element trenger et tastatur for å fungere (som tekst)	Ja
Brukeren navigerer med et tastatur	Ja
Brukeren navigerer med en pekeenhet (som en mus eller en finger på en berøringsskjerm)	Nei
Et skript får fokus til å bevege seg fra et `:focus-visible`element til et annet element	Ja
Et skript får fokus til å bevege seg fra et ikke- `:focus-visible`element til et annet element	Nei

Det gjentas: Dette er retningslinjer, og nettlesere vil være i stand til å ta sin egen beslutning om hva som er valgt av :focus-visible. Vi kan forvente at det åpenbare tilfellet med tastaturnavigasjon vil bli håndtert på en forutsigbar måte, men nettleserne har muligheten til å ta beslutningen selv, som alle andre funksjoner.