: viditelné zaostření - Triky CSS

:focus-visiblePseudo-class (také známý jako „Zaměření indikované“ pseudo-třídy) je nativní CSS způsob prvků stylu, že:

Jsou v centru pozornosti
K zobrazení zaměření potřebujete viditelný indikátor (více o tom později)

:focus-visiblese používá podobně jako :focus: upozornit na prvek, který je aktuálně zaměřen.

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

:focus-visibleje součástí pracovního konceptu CSS4 Selectors. Před přijetím představila Mozilla :-moz-focusringpseudotřídu, která přináší funkčnost Firefoxu před formální specifikací.

Proč potřebujeme: viditelné zaostření?

Nedělá :focusto už? Ano, ale jsou problémy. Nejjasnějším obrázkem je tlačítko, které spouští nějaký JavaScript. Představte si kolotoč obrázků s tlačítky pro přepínání mezi obrázky. Řekněme, že jste tabindexdo tlačítek přidali a, aby je bylo možné vybrat pomocí klávesnice, ale když jdete otestovat karusel pomocí myši, uvidíte kolem svého nádherného tlačítka tento obrys:

Ne, že byste to chtěli udělat (kvůli obavám o přístupnost), ale jak se toho zbavíte? Nastavením :focuspseudotřídy:

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

Teď vaše tlačítko vypadá skvěle, když je zaostřeno, ale co se stane, když uživatel k vašemu tlačítku přidá kartu bez myši, ale místo klávesnice? Nevidí, kam mají karty! To je problém, protože nyní neexistuje způsob, jak zjistit, které tlačítko je zaměřeno na akce klávesnice:

Jeden z nich je zaměřen, ale nevidíte to!

Existuje způsob, jak odstranit modrý obrys ohniska, ale přesto ukázat ohnisko, které je více v souladu s designem webu? Jistě, můžete si dát dort a sníst ho také díky :focus-visible!

:focus-visibleplatí pouze v případě, že chcete vizuální indikátor, který uživateli pomůže zjistit, kde je fokus. Jinými slovy, nemůže skrýt obrys jako :focusmůže. (No, mohlo by to být smícháním do designu, ale cokoli.) V tomto smyslu musí být oba použity společně. Přidejme jeden k našemu tlačítku:

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

Nyní, když se klávesnice používá k přepnutí na tlačítko, bude vizuální indikace zaměření:

`:focus-visible` zviditelňuje zaostření!

Jak prohlížeče určují, kdy je něco: viditelné?

Prohlížeče dostávají trochu volnosti, aby určily, kdy by měl být tento pseudo-selektor použit na daný prvek pomocí jejich vlastní heuristiky. Nejprve se podívejme na pracovní koncept CSS4 a pak se ho pokusíme rozebrat. Ze specifikací:

Pokud uživatel vyjádřil preference (například prostřednictvím systémových preferencí nebo nastavení prohlížeče), aby se vždy zobrazil viditelný indikátor zaostření, měl by to agent uživatele ctít tím, že má: focus-visible vždy odpovídá aktivnímu prvku, bez ohledu na jakýkoli jiný faktory. (Další možností může být, aby uživatelský agent zobrazil svůj vlastní indikátor zaostření bez ohledu na styly autora.)

Jakýkoli prvek, který podporuje vstup z klávesnice (například vstupní prvek nebo jakýkoli jiný prvek, který může aktivovat zobrazení virtuální klávesnice na fokusu, pokud není k dispozici fyzická klávesnice), by měl vždy odpovídat: focus-visible when focus.

Pokud uživatel interaguje se stránkou pomocí klávesnice, měl by se aktuálně zaměřený prvek shodovat: focus-visible (tj. Použití klávesnice může změnit, zda se tato pseudotřída shoduje, i když to nemá vliv: focus).

Pokud uživatel interaguje se stránkou pomocí ukazovacího zařízení, takže se fokus přesune na nový prvek, který nepodporuje vstup uživatele, nově zaměřený prvek by se neměl shodovat: focus-visible.

Pokud se aktivní prvek shoduje: focus-visible a skript způsobí, že se fokus přesune jinam, měl by nově zaměřený prvek odpovídat: focus-visible.

Naopak, pokud aktivní prvek neodpovídá: focus-visible a skript způsobí, že se fokus přesune jinam, nově zaměřený prvek by se neměl shodovat: focus-visible.

Pokud je to trochu abstraktní, zde je výklad:

Situace	Platí: focus-visible?
Uživatel říká, že vždy chce, aby bylo zaostření viditelné prostřednictvím nastavení	Ano
K fungování prvku potřebuje klávesnice (jako text)	Ano
Uživatel se pohybuje pomocí klávesnice	Ano
Uživatel naviguje pomocí polohovacího zařízení (například myši nebo prstu na dotykové obrazovce)	Ne
Skript způsobí, že se fokus přesune z `:focus-visible`prvku na jiný prvek	Ano
Skript způsobí, že se fokus přesune z neelementu `:focus-visible`na jiný element	Ne

Nese se opakování: Toto jsou pokyny a prohlížeče si budou moci udělat vlastní rozhodnutí o tom, co je vybráno :focus-visible. Můžeme očekávat, že zřejmý případ navigace na klávesnici bude řešen předvídatelným způsobem, ale prohlížeče mají schopnost provést rozhodnutí sami, stejně jako každá jiná funkce.

Podpora prohlížeče

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.