: fookusnähtav - CSS-trikid | CSS-i almanahh 2025

:focus-visiblePseudo-klassi (tuntud ka kui "Focus näidustatud" pseudo-klass) on native CSS viis stiili elemente, et:

On fookuses
Vajate fookuse kuvamiseks nähtavat indikaatorit (rohkem sellest hiljem)

:focus-visiblekasutatakse sarnaselt :focus: tähelepanu juhtivale elemendile tähelepanu juhtimiseks.

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

:focus-visibleon osa CSS4 Selektorite töö mustandist. Enne vastuvõtmist tutvustas Mozilla :-moz-focusringpseudoklassi, et viia Firefoxi funktsionaalsus enne ametlikku spetsifikatsiooni.

Miks me vajame: fookusnähtav?

Kas :focusseda juba ei tehta? Jah, aga probleeme on. Selgeim näide on nupp, mis käivitab JavaScripti. Kujutage kujutiste vahetamiseks ette nuppudega pildikarusselli. Oletame, et olete lisanud tabindexnuppudele a, et neid saaks klaviatuuriga valida, kuid kui lähete hiirega karusselli testima, näete oma uhke nupu ümber järgmist kontuuri:

Brauseri lisatud kontuur on sisse lülitatud `:focus`

Mitte, et soovite seda teha (juurdepääsetavuse murede tõttu), aga kuidas sellest lahti saada? Pseudoklassi määramisega :focus:

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

Nüüd näeb teie nupp fookuses välja hea, kuid mis juhtub siis, kui kasutaja klõpsab teie nuppu ilma hiire, vaid klaviatuurita? Nad ei näe, kuhu nad on tabeldatud! See on probleem, sest nüüd pole võimalik öelda, milline nupp on klaviatuuritoimingutele suunatud:

Üks neist on keskendunud, kuid te ei näe seda!

Kas on võimalik eemaldada sinine fookuse kontuur, kuid siiski näidata fookust, mis on rohkem kooskõlas saidi kujundusega? Muidugi saate tänu oma koogile ka süüa ja seda ka süüa :focus-visible!

:focus-visiblekehtib ainult siis, kui soovite, et visuaalne indikaator aitaks kasutajal näha, kus fookus asub. Teisisõnu, see ei saa varjata kontuuri nagu :focussaab. (Noh, võiks seda disaini segades, aga mis iganes.) Neid kahte tuleb selles mõttes koos kasutada. Lisame ühe oma nupule:

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

Nüüd, kui klaviatuuri kasutatakse nupu vahel liikumiseks, kuvatakse fookus visuaalselt:

`:focus-visible` muudab fookuse nähtavaks!

Kuidas brauserid määravad, millal midagi on: fookuses nähtav?

Brauseritele antakse veidi tegutsemisruumi, et teha kindlaks, millal tuleks seda pseudovalijat antud elemendile rakendada, kasutades nende enda heuristikat. Kõigepealt vaatame CSS4 töötavat mustandit ja siis proovime seda lagundada. Spetsifikatsioonidest:

Kui kasutaja on väljendanud eelistust (näiteks süsteemi eelistuse või brauseri sätte kaudu), et alati näha nähtavat fookuse indikaatorit, peaks kasutajaagent seda austama, kui: fookusnähtavus on aktiivsele elemendile alati vastavuses, sõltumata mis tahes muust tegurid. (Teine võimalus võib olla see, et kasutajaagent näitab oma fookuse indikaatorit, sõltumata autori stiilidest.)

Kõik elemendid, mis toetavad klaviatuuri sisestust (nt sisendelement või mis tahes muu element, mis võib käivitada virtuaalse klaviatuuri fookuse näitamise, kui füüsilist klaviatuuri pole), peaksid alati vastama: fookuses nähtav, kui fookuses.

Kui kasutaja suhtleb lehega klaviatuuri kaudu, peaks parajasti fokuseeritud element vastama: fookusnähtav (st klaviatuuri kasutamine võib muuta, kas see pseudoklass sobib, isegi kui see ei mõjuta: fookus).

Kui kasutaja suhtleb lehega osundusseadme kaudu, nii et fookus viiakse uude elemendi juurde, mis ei toeta kasutaja sisendit, ei tohiks äsja fokuseeritud element sobida: fookus nähtav.

Kui aktiivne element sobib: fookus-nähtav ja skript põhjustab fookuse mujale liikumise, peaks äsja fokuseeritud element vastama: fookus-nähtav.

Ja vastupidi, kui aktiivne element ei ühti: fookus nähtav ja skript paneb fookuse mujale liikuma, ei tohiks äsja fokuseeritud element klappida: fookus nähtav.

Kui see on natuke abstraktne, siis siin on tõlgendus:

Olukord	Kas kehtib fookusnähtavus?
Kasutaja ütleb, et soovib, et fookus oleks alati seade kaudu nähtav	Jah
Element vajab toimimiseks klaviatuuri (nagu tekst)	Jah
Kasutaja navigeerib klaviatuuriga	Jah
Kasutaja navigeerib osutusseadmega (nagu hiir või sõrm puuteekraanil)	Ei
Skript põhjustab fookuse liikumise `:focus-visible`elemendilt teisele	Jah
Skript põhjustab fookuse liikumise mitte- `:focus-visible`elemendilt teisele	Ei

See kordab: need on juhised ja brauserid saavad oma valitud valiku ise otsustada :focus-visible. Võime eeldada, et klaviatuuri navigeerimise ilmset juhtumit käsitletakse ettearvataval viisil, kuid brauseritel on võimalus ise otsustada, nagu iga teist funktsiooni.

Brauseri tugi

Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.