: viditeľné zaostrenie - Triky CSS

:focus-visiblePseudo-class (tiež známy ako "Zameranie indikovanej" pseudo-triedy) je natívny CSS spôsob prvkov štýlu, že:

Sú v centre pozornosti
Potrebujete viditeľný indikátor, ktorý vám ukáže zameranie (viac o tom neskôr)

:focus-visiblesa používa podobne ako :focus: upriamiť pozornosť na prvok, ktorý je v súčasnosti zameraný.

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

:focus-visibleje súčasťou pracovného konceptu CSS4 Selectors. Pred prijatím spoločnosť Mozilla predstavila :-moz-focusringpseudotriedu, ktorá prináša funkcionalitu prehliadača Firefox pred formálnou špecifikáciou.

Prečo potrebujeme: viditeľné zaostrenie?

Nerobí :focusto už? Áno, ale sú problémy. Najjasnejšia ilustrácia je tlačidlo, ktoré spúšťa určitý kód JavaScript. Predstavte si obrazový kolotoč s tlačidlami na prepínanie medzi obrázkami. Povedzme, že ste tabindexk tlačidlám pridali písmeno a, aby ich bolo možné vyberať pomocou klávesnice, ale keď idete testovať karusel pomocou myši, okolo tohto nádherného tlačidla sa zobrazí tento obrys:

Nie, že by ste to chceli robiť (z dôvodu dostupnosti), ale ako sa toho zbaviť? Nastavením :focuspseudotriedy:

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

Teraz je vaše tlačidlo skvele vyzerajúce, keď je zaostrené, ale čo sa stane, keď používateľ uloží kartu na vaše tlačidlo bez myši, ale namiesto klávesnice? Nevidia, kde majú karty! To je problém, pretože teraz neexistuje spôsob, ako zistiť, ktoré tlačidlo je zamerané na akcie klávesnice:

Jeden z nich je zameraný, ale nevidíte ho!

Existuje spôsob, ako odstrániť modrý obrys zamerania, ale stále zobrazovať zaostrenie, ktoré je viac v súlade s dizajnom stránky? Iste, môžete si dať koláč a zjesť ho aj vďaka :focus-visible!

:focus-visibleplatí iba vtedy, keď skutočne chcete vizuálny indikátor, ktorý používateľovi pomôže zistiť, kde je zameranie. Inými slovami, nemôže skryť obrys ako :focusmôže. (No, mohlo by to tak, že sa to spojí s dizajnom, ale nech už je to čokoľvek.) V tomto zmysle musia byť použité spoločne. Pridajme si jedno k nášmu tlačidlu:

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

Teraz, keď sa klávesnica používa na presunutie na kartu k tlačidlu, bude tu vizuálna indikácia zamerania:

`:focus-visible` zviditeľňuje zaostrenie!

Ako prehliadače určujú, kedy je niečo viditeľné?

Prehliadače majú trochu voľnosti, aby pomocou vlastnej heuristiky určili, kedy sa má tento pseudo-selektor použiť na daný prvok. Najskôr sa pozrime na pracovný koncept CSS4 a potom sa ho pokúsime rozobrať. Zo špecifikácií:

Ak používateľ vyjadril preferenciu (napríklad prostredníctvom systémových preferencií alebo nastavenia prehľadávača), aby sa vždy zobrazil viditeľný indikátor zaostrenia, mal by to splniť užívateľský agent tým, že má: focus-visible vždy sa zhoduje s aktívnym prvkom bez ohľadu na akékoľvek iné faktorov. (Ďalšou možnosťou môže byť, aby užívateľský agent zobrazil svoj vlastný indikátor zaostrenia bez ohľadu na štýly autorov.)

Akýkoľvek prvok, ktorý podporuje vstup z klávesnice (napríklad vstupný prvok alebo akýkoľvek iný prvok, ktorý môže spôsobiť zaostrenie virtuálnej klávesnice, ak nie je k dispozícii fyzická klávesnica), by sa mal vždy zhodovať: focus-visible when focus.

Ak používateľ interaguje so stránkou pomocou klávesnice, mal by sa aktuálne zameraný prvok zhodovať: focus-visible (tj. Použitie klávesnice sa môže meniť, či sa táto pseudotrieda zhoduje, aj keď to nemá vplyv: focus).

Ak používateľ interaguje so stránkou prostredníctvom ukazovacieho zariadenia, takže sa zameranie presunie na nový prvok, ktorý nepodporuje vstup používateľa, novo zameraný prvok by sa nemal zhodovať: focus-visible.

Ak sa aktívny prvok zhoduje: focus-visible a skript spôsobí, že zameranie sa presunie inam, novo zameraný element by sa mal zhodovať: focus-visible.

Naopak, ak sa aktívny prvok nezhoduje: focus-visible a skript spôsobí, že zameranie sa presunie inam, novo zameraný prvok by sa nemal zhodovať: focus-visible.

Ak je to trochu abstraktné, tu je výklad:

Situácia	Platí: viditeľné zaostrenie?
Používateľ tvrdí, že vždy chce, aby bolo zaostrenie viditeľné prostredníctvom nastavenia	Áno
Element musí mať klávesnicu, aby fungoval (ako text)	Áno
Používateľ sa naviguje pomocou klávesnice	Áno
Používateľ naviguje pomocou ukazovacieho zariadenia (napríklad myši alebo prsta na dotykovej obrazovke)	Nie
Skript spôsobí, že zameranie sa presunie z `:focus-visible`prvku do iného prvku	Áno
Skript spôsobí prechod fokusu z neelementu `:focus-visible`na iný element	Nie

Nesie sa opakovanie: Toto sú pokyny a prehliadače si budú môcť urobiť vlastné rozhodnutie o tom, čo je vybrané :focus-visible. Môžeme očakávať, že zrejmý prípad navigácie pomocou klávesnice bude riešený predvídateľným spôsobom, ale prehliadače majú schopnosť urobiť rozhodnutie sami, ako každá iná funkcia.

Podpora prehliadača

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.