: fokus-vidljivo - CSS-trikovi

:focus-visiblePseudo-klase (također poznat kao „Fokus-naznačeno” pseudo-klase) je rodom CSS način da stilskih elemenata da:

U fokusu su
Treba vam vidljivi indikator za pokazivanje fokusa (više o tome kasnije)

:focus-visiblekoristi se slično kao :focus: za skretanje pozornosti na element koji trenutno ima fokus.

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

:focus-visibledio je radnog nacrta CSS4 Selectors. Prije usvajanja, Mozilla je uvela :-moz-focusringpseudo-klasu kako bi Firefoxu donio funkcionalnost prije formalne specifikacije.

Zašto trebamo: fokus vidljiv?

To već ne :focusčini? Da, ali problema ima. Najjasnija ilustracija je gumb koji pokreće neki JavaScript. Zamislite vrtuljak slike s gumbima za prebacivanje između slika. Pretpostavimo da ste tabindexgumbe dodali kako bi ih mogli odabrati tipkovnicom, ali kad mišem krenete testirati vrtuljak, oko vašeg prekrasnog gumba vidite ovaj obris:

Obris koji je preglednik dodao na `:focus`

Nije da biste to željeli učiniti (zbog nedostupnosti), ali kako se toga riješiti? Postavljanjem :focuspseudo-klase:

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

Sada vaš gumb izgleda sjajno kad je u fokusu, ali što se događa kada korisnik klikne na vaš gumb bez miša, već umjesto tipkovnice? Ne mogu vidjeti gdje su stavili karticu! To je problem jer sada ne postoji način na koji se može utvrditi koji je gumb usmjeren za radnje na tipkovnici:

Jedan od njih je fokusiran, ali ne možete ga vidjeti!

Postoji li način za uklanjanje plavog obrisa fokusa, ali i dalje pokazivanje fokusa koji je više u skladu s dizajnom web stranice? Svakako, možete uzeti svoj kolač i pojesti ga, zahvaljujući :focus-visible!

:focus-visibleprimjenjuje se samo kada zapravo želite vizualni indikator koji pomaže korisniku da vidi gdje je fokus. Drugim riječima, ne može sakriti obris kao što to :focusmože. (Pa, moglo bi tako što bi se uklopio u dizajn, ali svejedno.) U tom se smislu njih dvoje moraju koristiti zajedno. Dodajmo jedan na naš gumb:

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

Sada, kada se tipkovnica koristi za prebacivanje na gumb, bit će vizualna indikacija fokusa:

Kako preglednici određuju kada je nešto vidljivo: fokus?

Preglednici dobivaju malo slobodnog prostora da odrede kada ovaj pseudo-selektor treba primijeniti na zadani element pomoću njihove vlastite heuristike. Prvo, pogledajmo radni nacrt CSS4, a zatim ćemo ga pokušati razbiti. Iz specifikacija:

Ako je korisnik izrazio sklonost (na primjer putem sistemskih postavki ili postavki preglednika) da uvijek vidi vidljivi indikator fokusa, korisnički agent to bi trebao poštovati tako da: fokus-vidljivi uvijek odgovara aktivnom elementu, bez obzira na bilo koji drugi čimbenici. (Druga mogućnost može biti da korisnički agent prikaže vlastiti pokazatelj fokusa bez obzira na stilove autora.)

Bilo koji element koji podržava unos s tipkovnice (poput ulaznog elementa ili bilo kojeg drugog elementa koji može pokrenuti da se virtualna tipkovnica prikaže u fokusu ako nije prisutna fizička tipkovnica) uvijek bi se trebao podudarati: fokus je vidljiv kada se fokusira.

Ako korisnik komunicira sa stranicom putem tipkovnice, trenutno fokusirani element trebao bi se podudarati: focus-visible (tj. Upotreba tipkovnice može promijeniti mijenja li se ova pseudo-klasa čak i ako to ne utječe na: focus).

Ako korisnik komunicira sa stranicom putem pokazivačkog uređaja, tako da se fokus premjesti na novi element koji ne podržava unos korisnika, novofokusirani element ne bi se trebao podudarati: fokus-vidljiv.

Ako se aktivni element podudara: focus-visible, a skripta uzrokuje pomicanje fokusa negdje drugdje, novofokusirani element trebao bi se podudarati: focus-visible.

Suprotno tome, ako se aktivni element ne podudara: focus-visible, a skripta uzrokuje pomicanje fokusa negdje drugdje, novofokusirani element ne bi se trebao podudarati: focus-visible.

Ako je to malo apstraktno, evo tumačenja:

Situacija	Primjenjuje li se: fokus-vidljivo?
Korisnik kaže da uvijek želi da fokus bude vidljiv putem postavke	Da
Za funkcioniranje elementa potrebna je tipkovnica (poput teksta)	Da
Korisnik se kreće pomoću tipkovnice	Da
Korisnik se kreće pokazivačkim uređajem (poput miša ili prsta na dodirnom zaslonu)	Ne
Skripta uzrokuje pomicanje fokusa s `:focus-visible`elementa na drugi element	Da
Skripta uzrokuje pomicanje fokusa s neelementa `:focus-visible`na drugi element	Ne

To ponavlja: Ovo su smjernice i preglednici će moći sami odlučiti o tome što je odabrano :focus-visible. Možemo očekivati da će se očiti slučaj navigacije na tipkovnici rješavati na predvidljiv način, ali preglednici imaju mogućnost sami odrediti, kao i bilo koja druga značajka.

Podrška preglednika

Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.