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

Den :focus-visiblepseudo-klass (även känd som ”Fokus angivna” pseudo-klass) är en infödd CSS sätt att stilelement som:

Är i fokus
Behöver en synlig indikator för att visa fokus (mer om detta senare)

:focus-visibleanvänds på samma sätt som :focus: att uppmärksamma det element som för närvarande har fokus.

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

:focus-visibleingår i CSS4 Selectors arbetsutkast. Före antagandet introducerade Mozilla :-moz-focusringpseudoklassen för att föra funktionaliteten till Firefox före en formell specifikation.

Varför behöver vi: fokus-synlig?

Gör det inte :focusredan? Ja, men det finns problem. Den tydligaste bilden är en knapp som avfyrar en del JavaScript. Föreställ dig en bildkarusell med knappar för att växla mellan bilder. Låt oss säga att du har lagt till a tabindextill knapparna så att de kan väljas med ett tangentbord, men när du går för att testa karusellen med musen ser du den här konturen runt din underbara knapp:

Kontur tillagd av webbläsaren den `:focus`

Inte för att du skulle vilja göra detta (för tillgänglighetsproblem), men hur blir du av med det? Genom att ställa in :focuspseudoklassen:

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

Nu ser din knapp bra ut när den är i fokus, men vad händer när en användare flikar till din knapp utan en mus utan ett tangentbord istället? De kan inte se var de har flikat! Det är ett problem eftersom det nu inte finns något sätt att berätta vilken knapp som är fokuserad för tangentbordsåtgärder:

En av dessa är fokuserad, men du kan inte se det!

Finns det ett sätt att ta bort den blå fokuskonturen men ändå visa ett fokus som är mer i linje med webbplatsens design? Visst, du kan ta din tårta och äta den också tack vare :focus-visible!

:focus-visiblegäller bara när du faktiskt vill ha en visuell indikator som hjälper användaren att se var fokus är. Med andra ord kan det inte dölja konturen som :focuskan. (Tja, det kan genom att blanda det i designen, men vad som helst.) De två måste användas tillsammans i den meningen. Låt oss lägga till en till vår knapp:

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

Nu när tangentbordet används för att flika till knappen kommer det att finnas en visuell indikation på fokus:

Hur bestämmer webbläsare när något är: fokus-synligt?

Webbläsare ges lite utrymme för att bestämma när denna pseudoväljare ska appliceras på ett visst element med hjälp av sin egen heuristik. Låt oss först titta på CSS4-arbetsutkastet och sedan försöka bryta ner det. Från specifikationerna:

Om en användare har uttryckt en inställning (t.ex. via ett systeminställning eller en webbläsarinställning) att alltid se en synlig fokusindikator, ska användaragenten respektera detta genom att: fokus-synlig alltid matchar det aktiva elementet, oavsett något annat faktorer. (Ett annat alternativ kan vara att användaragenten ska visa sin egen fokusindikator oavsett författarstilar.)

Alla element som stöder tangentbordsinmatning (t.ex. ett inmatningselement eller något annat element som kan utlösa att ett virtuellt tangentbord visas i fokus om ett fysiskt tangentbord inte finns) ska alltid matcha: fokus-synlig när den är fokuserad.

Om användaren interagerar med sidan via tangentbordet bör det för närvarande fokuserade elementet matcha: fokus-synlig (dvs. tangentbordets användning kan ändra om denna pseudoklass matchar även om det inte påverkar: fokus).

Om användaren interagerar med sidan via en pekdon, så att fokus flyttas till ett nytt element som inte stöder användarinmatning, bör det nyfokuserade elementet inte matcha: fokus-synligt.

Om det aktiva elementet matchar: fokus-synligt och ett skript gör att fokus flyttar någon annanstans, bör det nyligen fokuserade elementet matcha: fokus-synligt.

Omvänt, om det aktiva elementet inte matchar: fokus-synligt och ett skript gör att fokus flyttar någon annanstans, bör det nyligen fokuserade elementet inte matcha: fokus-synligt.

Om det är lite abstrakt, här är en tolkning:

Situation	Gäller: fokus-synlig gäller?
Användaren säger att de alltid vill att fokus ska vara synligt via en inställning	Ja
Ett element behöver ett tangentbord för att fungera (som text)	Ja
Användaren navigerar med ett tangentbord	Ja
Användaren navigerar med en pekdon (som en mus eller ett finger på en pekskärm)	Nej
Ett skript gör att fokus flyttas från ett `:focus-visible`element till ett annat element	Ja
Ett skript gör att fokus flyttas från ett icke- `:focus-visible`element till ett annat element	Nej

Det upprepas: Det här är riktlinjer och webbläsare kommer att kunna göra sitt eget beslut om vad som väljs av :focus-visible. Vi kan förvänta oss att det uppenbara fallet med tangentbordsnavigering kommer att hanteras på ett förutsägbart sätt, men webbläsarna har möjlighet att bestämma sig själva, som alla andra funktioner.

Webbläsarstöd

Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.