: focus-visible - CSS-Tricks | Almanah CSS 2025

:focus-visibleClasa pseudo ( de asemenea , cunoscut sub numele de „Focus-Indicat“ pseudo-clasa) este un CSS mod nativ pentru elemente de stil care:

Sunt în focus
Aveți nevoie de un indicator vizibil pentru a arăta focalizarea (mai multe despre acest lucru mai târziu)

:focus-visiblese folosește similar cu :focus: pentru a atrage atenția asupra elementului care are în prezent accentul.

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

:focus-visibleface parte din schița de lucru a selectorilor CSS4. Înainte de adoptare, Mozilla a introdus :-moz-focusringpseudo-clasa pentru a aduce funcționalitatea la Firefox înainte de o specificație formală.

De ce avem nevoie: focalizare vizibilă?

Nu :focusface asta deja? Da, dar există probleme. Cea mai clară ilustrare este un buton care declanșează unele JavaScript. Imaginați-vă un carusel de imagine cu butoane pentru a schimba între imagini. Să presupunem că ați adăugat o tabindexla butoane, astfel încât acestea să poată fi selectate cu o tastatură, dar când mergeți să testați caruselul cu mouse-ul, vedeți acest contur în jurul superbului buton:

Nu că ați dori să faceți acest lucru (pentru probleme de accesibilitate), dar cum scăpați de el? Prin setarea :focuspseudo-clasei:

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

Acum butonul dvs. arată minunat atunci când este focalizat, dar ce se întâmplă când un utilizator accesează butonul dvs. fără mouse, ci cu tastatură? Nu pot vedea unde au trecut tabulele! Aceasta este o problemă, deoarece acum nu există nicio modalitate de a spune care buton este concentrat pentru acțiunile de pe tastatură:

Una dintre acestea este concentrată, dar nu o puteți vedea!

Există o modalitate de a elimina conturul albastru al focalizării, dar afișează totuși un focar care este mai potrivit cu designul site-ului? Sigur, poți să-ți iei tortul și să-l mănânci și tu, datorită :focus-visible!

:focus-visiblese aplică numai atunci când doriți efectiv un indicator vizual care să ajute utilizatorul să vadă unde este focalizarea. Cu alte cuvinte, nu poate ascunde conturul ca :focuspoate. (Ei bine, s-ar putea amestecând cu designul, dar orice ar fi.) Cele două trebuie utilizate împreună în acest sens. Să adăugăm unul la butonul nostru:

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

Acum, când tastatura este utilizată pentru a atinge butonul, va exista o indicație vizuală a focalizării:

`:focus-visible` face vizibilă focalizarea!

Cum determină browserele când este ceva vizibil?

Browserelor li se oferă o marjă de manevră pentru a determina când acest pseudo-selector ar trebui să fie aplicat unui anumit element folosind propriile euristici. Mai întâi, să ne uităm la schița de lucru CSS4 și apoi vom încerca să o descompunem. Din specificații:

Dacă un utilizator și-a exprimat o preferință (cum ar fi prin intermediul unei preferințe de sistem sau a unei setări de browser) de a vedea întotdeauna un indicator de focalizare vizibil, agentul utilizatorului ar trebui să onoreze acest lucru având: factori. (O altă opțiune poate fi ca agentul utilizator să afișeze propriul indicator de focalizare, indiferent de stilurile autorului.)

Orice element care acceptă introducerea tastaturii (cum ar fi un element de intrare sau orice alt element care poate declanșa afișarea unei tastaturi virtuale pe focalizare dacă o tastatură fizică nu este prezentă) trebuie să se potrivească întotdeauna: focalizare-vizibilă când este focalizată.

Dacă utilizatorul interacționează cu pagina prin intermediul tastaturii, elementul focalizat în prezent ar trebui să se potrivească: focus-visible (adică utilizarea tastaturii poate schimba dacă această pseudo-clasă se potrivește chiar dacă nu afectează: focus).

Dacă utilizatorul interacționează cu pagina printr-un dispozitiv de indicare, astfel încât focalizarea să fie mutată într-un element nou care nu acceptă introducerea utilizatorului, elementul nou focalizat nu ar trebui să se potrivească: focalizarea vizibilă.

Dacă elementul activ se potrivește: focalizare vizibilă, iar un script determină mutarea focalizării în altă parte, noul element focalizat ar trebui să se potrivească: focalizare vizibilă.

În schimb, dacă elementul activ nu se potrivește: focalizare vizibilă, iar un script determină mutarea focalizării în altă parte, noul element focalizat nu trebuie să se potrivească: focalizare vizibilă.

Dacă este puțin abstract, iată o interpretare:

Situatie	Se aplică: focus-visible?
Utilizatorul spune că vrea întotdeauna ca focalizarea să fie vizibilă printr-o setare	da
Un element are nevoie de o tastatură pentru a funcționa (cum ar fi textul)	da
Utilizatorul navighează cu o tastatură	da
Utilizatorul navighează cu un dispozitiv de indicare (cum ar fi un mouse sau un deget pe un ecran tactil)	Nu
Un script face ca focalizarea să treacă de la un `:focus-visible`element la alt element	da
Un script face ca focalizarea să treacă de la un non- `:focus-visible`element la un alt element	Nu

Este necesar să se repete: acestea sunt reguli, iar browserele vor putea să își facă singure hotărârea cu privire la ceea ce este selectat de :focus-visible. Ne putem aștepta ca cazul evident al navigării pe tastatură să fie tratat într-un mod previzibil, dar browserele au capacitatea de a face singură determinarea, ca orice altă caracteristică.

Suport pentru browser

Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.