: redzams fokuss - CSS-triki | CSS almanahs 2025

:focus-visiblePseido-klase (pazīstama arī kā "Focus-norādīja" pseido-klases), ir dzimtā CSS veids, stila elementus, kas:

Ir uzmanības centrā
Nepieciešams redzams indikators, lai parādītu fokusu (vairāk par to vēlāk)

:focus-visibletiek izmantots līdzīgi kā :focus: lai pievērstu uzmanību elementam, kuram pašlaik ir fokuss.

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

:focus-visibleir daļa no CSS4 Selectors darba projekta. Pirms pieņemšanas Mozilla ieviesa :-moz-focusringpseidoklasi, lai Firefox funkcionalitāte tiktu ieviesta pirms formālās specifikācijas.

Kāpēc mums vajadzīgs: redzams fokusā?

Vai :focustas jau nedara? Jā, bet ir problēmas. Visskaidrākā ilustrācija ir poga, kas iedarbina JavaScript. Iedomājieties attēlu karuseli ar pogām, lai pārslēgtos starp attēliem. Pieņemsim, ka esat pievienojis tabindexpogām a, lai tās varētu izvēlēties, izmantojot tastatūru, bet, dodoties ar peli pārbaudīt karuseli, ap savu krāšņo pogu redzat šo kontūru:

Pārlūkprogramma pievienoja kontūru `:focus`

Ne tāpēc, ka jūs to vēlētos darīt (saistībā ar pieejamības problēmām), bet kā no tā atbrīvoties? Iestatot :focuspseidoklasi:

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

Tagad poga izskatās lieliski, kad tā ir fokusā, bet kas notiek, ja lietotājs pāriet uz jūsu pogas bez peles, bet tā vietā ir tastatūra? Viņi nevar redzēt, kur viņi ir ielikuši tabu! Tā ir problēma, jo tagad nav iespējas pateikt, kura poga ir fokusēta tastatūras darbībām:

Viens no tiem ir fokusēts, bet jūs to nevarat redzēt!

Vai ir veids, kā noņemt zilo fokusa kontūru, bet tomēr parādīt fokusu, kas vairāk atbilst vietnes dizainam? Protams, jūs varat saņemt savu kūku un arī to ēst, pateicoties :focus-visible!

:focus-visibleattiecas tikai tad, ja jūs patiešām vēlaties, lai vizuālais indikators palīdzētu lietotājam redzēt, kur ir fokuss. Citiem vārdiem sakot, tas nevar paslēpt kontūru, piemēram, :focusvar. (Nu, tas varētu būt, sajaucot to dizainā, bet neatkarīgi no tā.) Šajā ziņā abi ir jāizmanto kopā. Pievienosim vienu savai pogai:

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

Kad tastatūra tiek izmantota, lai pārietu uz pogu, fokusa vizuālā norāde:

Kā pārlūkprogrammas nosaka, kad kaut kas ir: redzams fokusā?

Pārlūkprogrammām tiek dota nedaudz rīcības brīvības, lai noteiktu, kad šis pseido-selektors jāpielieto attiecīgajam elementam, izmantojot viņu pašu heiristiku. Vispirms apskatīsim CSS4 darba melnrakstu un pēc tam mēģināsim to sadalīt. No specifikācijām:

Ja lietotājs ir izteicis vēlmi (piemēram, izmantojot sistēmas preferenci vai pārlūkprogrammas iestatījumu), lai vienmēr redzētu redzamu fokusa indikatoru, lietotāja aģentam tas būtu jāievēro, norādot, ka: fokusam redzamais vienmēr sakrīt ar aktīvo elementu, neatkarīgi no jebkura cita faktori. (Cita iespēja var būt tā, ka lietotāja aģents parāda savu fokusa indikatoru neatkarīgi no autora stiliem.)

Jebkuram elementam, kas atbalsta tastatūras ievadi (piemēram, ievades elementam vai jebkuram citam elementam, kas var izraisīt virtuālās tastatūras rādīšanu fokusā, ja fiziskās tastatūras nav), vienmēr jāatbilst: fokusam redzams, kad fokusēts.

Ja lietotājs mijiedarbojas ar lapu, izmantojot tastatūru, pašlaik fokusētajam elementam jāatbilst: focus-visible (ti, tastatūras lietošana var mainīt, vai šī pseidoklase sakrīt, pat ja tas neietekmē: focus).

Ja lietotājs mijiedarbojas ar lapu, izmantojot rādītājierīci tā, ka fokuss tiek pārvietots uz jaunu elementu, kas neatbalsta lietotāja ievadi, tikko fokusētais elements nedrīkst sakrist: focus-visible.

Ja aktīvais elements sakrīt: focus-visible, un skripts liek fokusam pārvietoties citur, tikko fokusētajam elementam jāatbilst: focus-visible.

Un otrādi, ja aktīvais elements nesakrīt: redzams fokusā, un skripts liek fokusam pārvietoties citur, jauni fokusētais elements nedrīkst sakrist: fokuss-redzams.

Ja tas ir nedaudz abstrakts, šeit ir interpretācija:

Situācija	Vai tiek piemērots fokusā redzamais?
Lietotājs saka, ka vienmēr vēlas, lai fokuss būtu redzams, izmantojot iestatījumu	Jā
Lai darbotos, elementam ir nepieciešama tastatūra (piemēram, teksts)	Jā
Lietotājs pārvietojas ar tastatūru	Jā
Lietotājs pārvietojas ar rādītājierīci (piemēram, peli vai pirkstu uz skārienekrāna)	Nē
Skripts liek fokusam pāriet no `:focus-visible`elementa uz citu	Jā
Skripts liek fokusam pāriet no `:focus-visible`elementa uz citu	Nē

Tas atkārtojas: šīs ir vadlīnijas, un pārlūkprogrammas varēs pašas noteikt, ko atlasījis :focus-visible. Mēs varam sagaidīt, ka acīmredzamais tastatūras navigācijas gadījums tiks risināts paredzamā veidā, taču pārlūkprogrammām ir iespēja pašiem noteikt, tāpat kā jebkurai citai funkcijai.