: fókusz látható - CSS-trükkök

Az :focus-visibleál-osztály (más néven „Fókusz-jelzett” ál-osztály) egy natív CSS-módszer olyan elemek stílusához, amelyek:

Vannak a hangsúly
Szüksége van egy látható mutatóra a fókusz megjelenítéséhez (erről később)

:focus-visiblehasonlóan használják :focus: a figyelem felhívására az elemre, amely jelenleg a fókuszban van.

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

:focus-visiblerésze a CSS4 Selectors munka tervezetének. Az elfogadás előtt a Mozilla bevezette az :-moz-focusringál-osztályt, hogy a funkcionalitást a hivatalos specifikáció elé vigye a Firefoxba.

Miért van szükségünk: fókusz-látható?

:focusEzt már nem csinálja? Igen, de vannak problémák. A legtisztább illusztráció egy gomb, amely néhány JavaScript-et indít. Képzeljen el egy kép körhinta gombokkal a képek közötti váltáshoz. Tegyük fel, tabindexhogy a gombokhoz hozzáadta a-t, hogy billentyűzettel kiválaszthatók legyenek, de amikor elmész tesztelni a körhintát az egérrel, a gyönyörű gomb körül ezt a körvonalat látod:

Nem mintha ezt meg akarná tenni (akadálymentesség miatt), de hogyan szabaduljon meg tőle? Az :focusál-osztály beállításával :

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

Most a gombod jól néz ki, amikor fókuszban van, de mi történik, ha a felhasználó egér nélkül, de inkább billentyűzet nélkül rákattint a gombra? Nem látják, hogy hová lett füllentve! Ez probléma, mert most nincs mód megmondani, melyik gomb van a billentyűzet műveleteire összpontosítva:

Ezek egyike koncentrált, de nem láthatja!

Van-e mód a kék fókuszvázlat eltávolítására, de mégis olyan fókuszt mutat, amely jobban megfelel a webhelytervnek? Persze, megkaphatja a süteményét és meg is eheti, hála :focus-visible!

:focus-visiblecsak akkor érvényes, ha valóban azt szeretné, hogy egy vizuális indikátor segítse a felhasználót abban, hogy láthassa, hol van a fókusz. Más szavakkal, nem rejtheti el a körvonalat, mint :focuslehet. (Nos, lehet, hogy a tervbe keverik, de bármi.) A kettőt ebben az értelemben együtt kell használni. Adjunk hozzá egyet a gombunkhoz:

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

Most, amikor a billentyűzetet használjuk a gomb megnyomásához, vizuálisan jelezzük a fókuszt:

`:focus-visible` láthatóvá teszi az összpontosítást!

Hogyan állapíthatják meg a böngészők, ha valami látható: fókuszban látható?

A böngészőknek van egy kis mozgástere annak eldöntésére, hogy ezt az álválasztót mikor kell alkalmazni egy adott elemre saját heurisztikájuk felhasználásával. Először nézzük meg a CSS4 működő vázlatát, majd megpróbáljuk lebontani. A specifikációkból:

Ha egy felhasználó kifejlesztett egy preferenciát (például rendszerpreferencián vagy böngészőbeállításon keresztül), hogy mindig látható fókuszjelzőt láthasson, akkor a felhasználói ügynöknek tiszteletben kell tartania ezt azzal, hogy: a fókusz-látható mindig megegyezik az aktív elemrel, függetlenül minden más tényezők. (Egy másik lehetőség lehet, hogy a felhasználói ügynök megmutatja a saját fókuszmutatóját a szerző stílusától függetlenül.)

Bármely elemnek, amely támogatja a billentyűzet bevitelét (például beviteli elem, vagy bármely más elem, amely virtuális billentyűzet megjelenítését eredményezheti, ha fizikai billentyűzet nincs), mindig meg kell egyeznie: fókuszban látható, ha fókuszált.

Ha a felhasználó a billentyűzeten keresztül lép kapcsolatba az oldallal, akkor az aktuálisan fókuszált elemnek meg kell egyeznie: fókusz-látható (azaz a billentyűzet használata megváltoztathatja, hogy ez az álosztály megfelel-e annak ellenére, hogy nem befolyásolja: fókuszt).

Ha a felhasználó egy mutatóeszközön keresztül interakcióba lép az oldallal, úgy, hogy a fókusz egy új elemre kerül, amely nem támogatja a felhasználói bevitelt, az újonnan fókuszált elemnek nem kell egyeznie: fókusz-látható.

Ha az aktív elem egyezik: fókusz-látható, és egy szkript miatt a fókusz máshova kerül, az újonnan fókuszált elemnek meg kell egyeznie: fókusz-látható.

Ezzel szemben, ha az aktív elem nem egyezik: fókusz-látható, és egy szkript miatt a fókusz máshova kerül, az újonnan fókuszált elemnek nem kell egyeznie: fókusz-látható.

Ha ez egy kicsit elvont, íme egy értelmezés:

Helyzet	A fókusz látható?
A felhasználó azt mondja, hogy mindig azt szeretné, hogy a fókusz egy beállításon keresztül legyen látható	Igen
Az elem működéséhez billentyűzetre van szükség (például szöveg)	Igen
A felhasználó billentyűzettel navigál	Igen
A felhasználó mutatóeszközzel navigál (például egérrel vagy ujjal az érintőképernyőn)	Nem
A szkript hatására a fókusz egy `:focus-visible`elemről egy másik elemre kerül	Igen
A szkript hatására a fókusz egy nem `:focus-visible`elemről egy másik elemre kerül	Nem

Ismétlődik: Ezek irányelvek, és a böngészők képesek lesznek saját maguk eldönteni, hogy mit választott ki :focus-visible. Arra számíthatunk, hogy a billentyűzet navigációjának nyilvánvaló esetét kiszámítható módon fogják kezelni, de a böngészők képesek maguk meghatározni, mint bármely más funkciót.

Böngésző támogatás

Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.