: ostrenje vidno - CSS-triki | Almanah CSS 2025

:focus-visiblePsevdo-razreda (znan tudi kot "Focus, je navedeno" psevdorazredu) je doma CSS način slog elementov, da:

So v fokusu
Potrebujete viden indikator za prikaz osredotočenosti (več o tem kasneje)

:focus-visiblese uporablja podobno kot :focus: za opozarjanje na element, ki je trenutno v fokusu.

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

:focus-visibleje del delovnega osnutka izbirnikov CSS4. Pred sprejetjem je Mozilla predstavila :-moz-focusringpsevdorazred, da bi Firefoxu prinesel funkcionalnost pred formalno specifikacijo.

Zakaj potrebujemo: fokusno viden?

Ali :focustega že ne počne? Da, vendar obstajajo težave. Najbolj jasna ilustracija je gumb, ki sproži nekaj JavaScript-a. Predstavljajte si slikovni vrtiljak z gumbi za preklapljanje med slikami. Recimo, da ste tabindexgumbom dodali a, da jih lahko izberete s tipkovnico, toda ko greste z miško preizkusiti vrtiljak, vidite okoli tega čudovitega gumba:

Saj ne, da bi to želeli (zaradi pomislekov glede dostopnosti), ampak kako se tega znebiti? Z nastavitvijo :focuspsevdo-razreda:

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

Zdaj je vaš gumb videti čudovito, ko je v fokusu, kaj pa se zgodi, ko uporabnik pritisne na vaš gumb brez miške, temveč namesto tipkovnice? Ne vidijo, kje so zavihkali! To je težava, ker zdaj ni mogoče ugotoviti, kateri gumb je usmerjen za dejanja na tipkovnici:

Eden od teh je osredotočen, vendar ga ne vidite!

Ali obstaja način, da odstranimo modri oris fokusa, vendar še vedno pokažemo fokus, ki je bolj v skladu z obliko spletnega mesta? Seveda, zahvaljujoč lahko dobite svojo torto in jo tudi jeste :focus-visible!

:focus-visiblevelja samo, če dejansko želite, da vizualni indikator pomaga uporabniku videti, kje je poudarek. Z drugimi besedami, ne more skriti obrisov, kot jih :focuslahko. (No, lahko bi tako, da bi ga vklopili v oblikovanje, a vseeno.) V tem smislu je treba uporabiti skupaj. Na naš gumb dodajte enega:

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

Zdaj, ko se tipkovnica uporablja za zavijanje gumba, bo vizualna indikacija ostrenja:

Kako brskalniki ugotovijo, kdaj je nekaj: fokus viden?

Brskalniki dobijo malo manevrskega prostora, da določijo, kdaj je treba ta psevdo-izbirnik uporabiti za dani element z uporabo lastne hevristike. Najprej si oglejmo delovni osnutek CSS4, nato pa ga bomo poskušali razčleniti. Iz specifikacij:

Če je uporabnik izrazil prednost (na primer prek sistemske nastavitve ali nastavitve brskalnika), da vedno vidi vidni indikator ostrenja, mora uporabniški agent to spoštovati tako, da: focus-visible se vedno ujema z aktivnim elementom, ne glede na katero koli drugo dejavniki. (Druga možnost je, da uporabniški agent prikaže svoj indikator ostrenja ne glede na avtorjeve sloge.)

Vsak element, ki podpira vnos s tipkovnico (na primer vnosni element ali kateri koli drug element, ki lahko sproži prikaz navidezne tipkovnice v fokusu, če fizična tipkovnica ni prisotna), se mora vedno ujemati: fokus je viden, ko je ostren.

Če uporabnik s stranjo komunicira s pomočjo tipkovnice, se mora trenutno usmerjeni element ujemati: focus-visible (tj. Uporaba tipkovnice lahko spremeni, ali se ta psevdorazred ujema, tudi če ne vpliva na: focus).

Če uporabnik s stranjo komunicira prek kazalne naprave, tako da se fokus premakne na nov element, ki ne podpira uporabnikovega vnosa, se novofokusirani element ne sme ujemati: focus-visible.

Če se aktivni element ujema: focus-visible in skript povzroči, da se fokus premakne drugam, se mora na novo usmerjeni element ujemati: focus-visible.

Nasprotno, če se aktivni element ne ujema: focus-visible in skript povzroči, da se fokus premakne drugam, se na novo usmerjeni element ne sme ujemati: focus-visible.

Če je to nekoliko abstraktno, je tukaj razlaga:

Situacija	Ali: velja fokusno vidno?
Uporabnik pravi, da želi, da je fokus vedno viden prek nastavitve	Da
Element za delovanje potrebuje tipkovnico (na primer besedilo)	Da
Uporabnik krmili s tipkovnico	Da
Uporabnik krmili s kazalno napravo (na primer miško ali prstom na zaslonu na dotik)	Ne
Skript povzroči, da se fokus premakne iz `:focus-visible`elementa v drug element	Da
Skript povzroči, da se fokus premakne iz neelementa `:focus-visible`v drug element	Ne

Ponavlja se: To so smernice in brskalniki se bodo lahko sami odločali o tem, kaj bo izbral :focus-visible. Pričakujemo lahko, da bo očiten primer krmarjenja po tipkovnici obravnavan na predvidljiv način, vendar imajo brskalniki možnost, da se sami odločijo, kot katera koli druga funkcija.

Podpora brskalnika

Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.