: tarkennus näkyvissä CSS-temppuja

:focus-visibleNäennäisluokka (tunnetaan myös ”Focus-aiheinen” pseudo-luokka) on kotoisin CSS tapa tyylielementit että:

Ovat tarkennuksessa
Tarvitset näkyvän osoittimen tarkennuksen näyttämiseksi (lisätietoja tästä myöhemmin)

:focus-visiblekäytetään samalla tavalla kuin :focus: kiinnittää huomiota elementtiin, joka on tällä hetkellä painopiste.

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

:focus-visibleon osa CSS4 Selectors -työluonnosta. Ennen käyttöönottoa Mozilla esitteli :-moz-focusringnäennäisluokan tuodakseen toiminnot Firefoxiin ennen virallista määrittelyä.

Miksi tarvitsemme: näkyvä?

Eikö :focustee niin jo? Kyllä, mutta on ongelmia. Selkein kuva on painike, joka laukaisee JavaScriptiä. Kuvittele kuvakaruselli, jossa on painikkeita kuvien vaihtamiseksi. Oletetaan, että olet lisännyt tabindexpainikkeisiin a- merkinnän, jotta ne voidaan valita näppäimistöllä, mutta kun menet kokeilemaan karusellia hiirellä, näet tämän ääriviivan upean painikkeen ympärillä:

Etkä haluaisi tehdä tätä (esteettömyysongelmia varten), mutta miten päästä eroon siitä? Asettamalla :focusnäennäisluokka:

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

Nyt painike näyttää hyvältä, kun se on tarkennettu, mutta mitä tapahtuu, kun käyttäjä siirtyy napin painikkeeseen ilman hiirtä vaan näppäimistöä? He eivät näe, mihin välilehdet ovat! Se on ongelma, koska nyt ei ole mitään tapaa kertoa, mikä painike on kohdistettu näppäimistön toiminnoille:

Yksi näistä on keskittynyt, mutta et näe sitä!

Onko olemassa tapa poistaa sininen kohdistusviiva, mutta näyttää silti tarkennuksen, joka vastaa paremmin sivuston suunnittelua? Toki, voit saada kakkusi ja syödä sen myös, kiitos :focus-visible!

:focus-visiblepätee vain silloin, kun haluat tosiasiallisesti visuaalisen indikaattorin, joka auttaa käyttäjää näkemään tarkennuksen. Toisin sanoen se ei voi piilottaa ääriviivoja kuten :focusvoi. (No, se voisi sekoittamalla sen suunnitteluun, mutta mitä tahansa.) Näitä kahta on käytettävä yhdessä tässä mielessä. Lisätään yksi painikkeeseen:

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

Nyt kun näppäimistöä käytetään siirtymään painikkeeseen, kohdistus näkyy visuaalisesti:

`:focus-visible` tekee keskittymisen näkyväksi!

Kuinka selaimet päättävät, milloin jokin on: näkyvä?

Selaimille annetaan hieman liikkumavaraa sen määrittämiseksi, milloin tätä pseudovalitsinta tulisi käyttää tiettyyn elementtiin omaa heuristiikkaansa käyttäen. Tarkastellaan ensin CSS4: n työskentelyluonnosta ja yritetään sitten hajottaa se. Tekniset tiedot:

Jos käyttäjä on ilmaissut haluavansa nähdä näkyvän tarkennusindikaattorin (esimerkiksi järjestelmäasetuksen tai selainasetuksen kautta), käyttäjäagentin on kunnioitettava tätä siten, että: kohdistusnäkymä vastaa aina aktiivista elementtiä, riippumatta muista tekijät. (Toinen vaihtoehto voi olla, että käyttäjäagentti näyttää oman tarkennusindikaattorinsa tekijän tyylistä riippumatta.)

Kaikkien elementtien, jotka tukevat näppäimistösyöttöä (kuten syöttöelementin tai minkä tahansa muun elementin, joka saattaa laukaista virtuaalisen näppäimistön näyttämisen tarkennuksessa, jos fyysistä näppäimistöä ei ole), tulee aina vastata: tarkennuksen näkyvä, kun se on kohdennettu.

Jos käyttäjä on vuorovaikutuksessa sivun kanssa näppäimistön avulla, tällä hetkellä kohdistetun elementin tulee vastata: focus-visible (ts. Näppäimistön käyttö voi muuttaa, vastaako tämä pseudoluokka, vaikka se ei vaikuttaisikaan: focus).

Jos käyttäjä on vuorovaikutuksessa sivun kanssa osoitinlaitteen kautta siten, että kohdistus siirretään uuteen elementtiin, joka ei tue käyttäjän syötettä, uuden kohdennetun elementin ei pitäisi olla sama: focus-visible.

Jos aktiivinen elementti täsmää: focus-visible, ja komentosarja saa kohdistuksen siirtymään muualle, vasta kohdistetun elementin tulee vastata: focus-visible.

Vastaavasti, jos aktiivinen elementti ei täsmää: kohdistus-näkyvä ja komentosarja saa kohdistuksen siirtymään muualle, vasta kohdennetun elementin ei pitäisi olla sama: kohdistus-näkyvä.

Jos se on hieman abstrakti, tässä on tulkinta:

Tilanne	Koskeeko: kohdistus näkyvissä?
Käyttäjä sanoo haluavansa, että tarkennus näkyy aina asetuksen avulla	Joo
Elementti tarvitsee näppäimistön toimiakseen (kuten teksti)	Joo
Käyttäjä navigoi näppäimistöllä	Joo
Käyttäjä navigoi osoitinlaitteella (kuten hiiri tai sormi kosketusnäytöllä)	Ei
Komentosarja saa kohdistuksen siirtymään `:focus-visible`elementistä toiseen	Joo
Komentosarja saa kohdistuksen siirtymään ei- `:focus-visible`elementistä toiseen elementtiin	Ei

Se toistaa: Nämä ovat ohjeita, ja selaimet pystyvät päättämään omasta valinnastaan :focus-visible. Voimme odottaa, että näppäimistön navigoinnin ilmeinen tapaus käsitellään ennustettavalla tavalla, mutta selaimet pystyvät itse päättämään, kuten mikä tahansa muu ominaisuus.

Selaimen tuki

Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.