: matomas dėmesys - CSS-gudrybės

:focus-visiblePseudo klasę (taip pat žinomas kaip "Focus-nurodomi" pseudo-klasės) yra gimtoji CSS būdas stiliaus elementų, kurie:

Yra dėmesio centre
Reikia matomo indikatoriaus, kad būtų rodomas dėmesys (daugiau apie tai vėliau)

:focus-visibleyra naudojamas panašiai kaip :focus: norint atkreipti dėmesį į elementą, kuriam šiuo metu skiriamas dėmesys.

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

:focus-visibleyra CSS4 „Selectors“ darbo projekto dalis. Prieš priėmimą „Mozilla“ pristatė :-moz-focusringpseudoklasę, kad funkcionalumas „Firefox“ būtų pateiktas prieš oficialią specifikaciją.

Kodėl mums reikia: matomas dėmesys?

Ar :focusto jau nedarote? Taip, bet yra problemų. Aiškiausia iliustracija yra mygtukas, paleidžiantis „JavaScript“. Įsivaizduokite vaizdų karuselę su mygtukais, kad galėtumėte perjungti vaizdus. Tarkime, tabindexkad prie mygtukų pridėjote „a“ , kad juos būtų galima pasirinkti naudojant klaviatūrą, bet kai einate su pele išbandyti karuselės, aplink savo nuostabų mygtuką matote šį kontūrą:

Ne todėl, kad norėtumėte tai padaryti (dėl prieinamumo problemų), bet kaip to atsikratyti? Nustatydami :focuspseudo klasę:

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

Dabar jūsų mygtukas atrodo puikiai, kai jis yra sufokusuotas, bet kas nutinka, kai vartotojas spustelėja jūsų mygtuką be pelės, o vietoj klaviatūros? Jie nemato, kur yra pažymėję skirtukus! Tai problema, nes dabar nėra galimybės pasakyti, kuris mygtukas skirtas klaviatūros veiksmams atlikti:

Vienas iš jų yra sutelktas, bet jūs to nematote!

Ar yra būdas pašalinti mėlyną židinio kontūrą, bet vis tiek rodomas dėmesys, labiau atitinkantis svetainės dizainą? Aišku, dėka, jūs galite turėti savo pyragą ir jį valgyti :focus-visible!

:focus-visibletaikoma tik tada, kai iš tikrųjų norite, kad vaizdinis indikatorius padėtų vartotojui pamatyti, kur yra dėmesys. Kitaip tariant, jis negali paslėpti kontūrų kaip ir :focus. (Na, tai gali būti, įmaišant jį į dizainą, bet bet kas.) Šia prasme abu turi būti naudojami kartu. Pridėkime vieną prie savo mygtuko:

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

Dabar, kai klaviatūra bus naudojama norint pereiti prie mygtuko, bus vizualiai parodytas dėmesys:

Kaip naršyklės nustato, kada kažkas yra: matomas dėmesys?

Naršyklėms suteikiama šiek tiek laisvės nustatyti, kada šis pseudo selektorius turėtų būti pritaikytas tam tikram elementui, naudojant jų pačių euristiką. Pirmiausia pažvelkime į CSS4 darbinį juodraštį, tada bandysime jį suskaidyti. Iš specifikacijų:

Jei vartotojas išreiškė pageidavimą (pvz., Naudodamasis sistemos nuostatomis ar naršyklės nuostatomis), kad visada matytų matomą židinio indikatorių, vartotojo agentas turėtų tai gerbti: faktoriai. (Kita galimybė gali būti tai, kad vartotojo agentas rodo savo židinio rodiklį, neatsižvelgdamas į autoriaus stilius.)

Bet kuris elementas, palaikantis klaviatūros įvestį (pvz., Įvesties elementas ar bet kuris kitas elementas, dėl kurio virtuali klaviatūra gali būti rodoma sufokusuota, jei nėra fizinės klaviatūros), visada turi atitikti: fokusas matomas, kai fokusuojamas.

Jei vartotojas sąveikauja su puslapiu naudodamas klaviatūrą, šiuo metu sutelktas elementas turėtų atitikti: focus-matomas (ty klaviatūros naudojimas gali pakeisti, ar ši pseudo klasė atitinka, net jei tai neturi įtakos: fokusuoti).

Jei vartotojas sąveikauja su puslapiu per žymėjimo įrenginį, kad židinys būtų perkeltas į naują elementą, kuris nepalaiko vartotojo įvesties, naujai sufokusuotas elementas neturėtų sutapti: matomas židinys.

Jei aktyvus elementas sutampa: žvilgsnis matomas, o scenarijus nukreipia dėmesį kitur, naujai sufokusuotas elementas turėtų atitikti: žvilgsnis matomas.

Ir atvirkščiai, jei aktyvus elementas nesutampa: matomas židinys, o scenarijus nukreipia dėmesį kitur, naujai sutelktas elementas neturėtų sutapti: matomas židinys.

Jei tai šiek tiek abstraktaus, tai yra aiškinimas:

Situacija	Ar taikoma: matomas dėmesys?
Vartotojas sako, kad visada nori, kad dėmesys būtų matomas per nustatymą	Taip
Elementui veikti reikia klaviatūros (pvz., Teksto)	Taip
Vartotojas naršo naudodamas klaviatūrą	Taip
Vartotojas naršo naudodamas rodyklę (pvz., Pele ar pirštu jutikliniame ekrane)	Ne
Dėl scenarijaus dėmesys pereina nuo `:focus-visible`elemento prie kito	Taip
Dėl scenarijaus dėmesys pereina nuo ne `:focus-visible`elemento prie kito	Ne

Tai kartojasi: tai yra gairės, ir naršyklės galės pačios nuspręsti, ką pasirinko :focus-visible. Galime tikėtis, kad akivaizdus klaviatūros naršymo atvejis bus tvarkomas nuspėjamai, tačiau naršyklės, kaip ir bet kuri kita funkcija, gali patys tai nustatyti.

Naršyklės palaikymas

Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.