: focus-zichtbaar - CSS-trucs

De :focus-visiblepseudo-klasse (ook bekend als de "Focus-Indicated" pseudo-klasse) is een native CSS-manier om elementen te stylen die:

Zijn in focus
Een zichtbare indicator nodig om focus te tonen (hierover later meer)

:focus-visiblewordt op dezelfde manier gebruikt om :focus: aandacht te vestigen op het element dat momenteel de focus heeft.

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

:focus-visiblemaakt deel uit van het werkconcept van CSS4 Selectors. Voorafgaand aan de acceptatie introduceerde Mozilla de :-moz-focusringpseudo-klasse om de functionaliteit naar Firefox te brengen vóór een formele specificatie.

Waarom hebben we nodig: focus-zichtbaar?

Doet :focusdit al niet? Ja, maar er zijn problemen. De duidelijkste illustratie is een knop die wat JavaScript activeert. Stel je een afbeeldingscarrousel voor met knoppen om tussen afbeeldingen te wisselen. Stel dat u een tabindexaan de knoppen hebt toegevoegd zodat ze kunnen worden geselecteerd met een toetsenbord, maar wanneer u de carrousel met uw muis gaat testen, ziet u deze omtrek rond uw prachtige knop:

Overzicht toegevoegd door de browser op `:focus`

Niet dat je dit zou willen doen (vanwege toegankelijkheidsproblemen), maar hoe kom je er vanaf? Door de :focuspseudo-klasse in te stellen:

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

Nu ziet uw knop er geweldig uit wanneer deze in focus is, maar wat gebeurt er wanneer een gebruiker naar uw knop tikt zonder muis maar in plaats daarvan een toetsenbord? Ze kunnen niet zien waar ze zijn getabd! Dat is een probleem, want er is nu geen manier om te zien op welke knop de focus is gericht voor toetsenbordacties:

Een daarvan is gefocust, maar je kunt het niet zien!

Is er een manier om de blauwe focuscontour te verwijderen, maar toch een focus te laten zien die meer in lijn is met het site-ontwerp? Natuurlijk kun je je cake hebben en ook opeten, dankzij :focus-visible!

:focus-visibleis alleen van toepassing als u daadwerkelijk een visuele indicator wilt om de gebruiker te helpen zien waar de focus ligt. Met andere woorden, het kan de omtrek niet verbergen zoals :focuskan. (Nou, het zou kunnen door het in het ontwerp te mengen, maar wat dan ook.) De twee moeten in die zin samen worden gebruikt. Laten we er een toevoegen aan onze knop:

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

Als het toetsenbord nu wordt gebruikt om naar de knop te gaan, is er een visuele indicatie van de focus:

Hoe bepalen browsers wanneer iets: focus-zichtbaar is?

Browsers krijgen een beetje speelruimte om te bepalen wanneer deze pseudo-selector op een bepaald element moet worden toegepast met behulp van hun eigen heuristieken. Laten we eerst eens kijken naar het werkconcept van CSS4, en dan proberen we het op te splitsen. Uit de specificaties:

Als een gebruiker een voorkeur heeft uitgesproken (zoals via een systeemvoorkeur of een browserinstelling) om altijd een zichtbare focusindicator te zien, moet de user agent dit respecteren door: focus-visible altijd overeen te laten komen met het actieve element, ongeacht eventuele andere factoren. (Een andere optie kan zijn dat de user-agent zijn eigen focusindicator laat zien, ongeacht de auteurstijlen.)

Elk element dat toetsenbordinvoer ondersteunt (zoals een invoerelement of elk ander element dat ertoe kan leiden dat een virtueel toetsenbord in focus wordt weergegeven als er geen fysiek toetsenbord aanwezig is) moet altijd overeenkomen: focus-zichtbaar wanneer gefocust.

Als de gebruiker interactie heeft met de pagina via het toetsenbord, moet het op dat moment gefocuste element overeenkomen met: focus-visible (dwz toetsenbordgebruik kan veranderen of deze pseudo-klasse overeenkomt, zelfs als het geen invloed heeft op: focus).

Als de gebruiker interactie heeft met de pagina via een aanwijsapparaat, zodat de focus wordt verplaatst naar een nieuw element dat geen gebruikersinvoer ondersteunt, zou het nieuw gefocuste element niet moeten passen: focus-zichtbaar.

Als het actieve element overeenkomt met: focus-zichtbaar, en een script zorgt ervoor dat de focus ergens anders wordt verplaatst, dan moet het nieuw gefocuste element overeenkomen met: focus-zichtbaar.

Omgekeerd, als het actieve element niet overeenkomt: focus-zichtbaar, en een script zorgt ervoor dat focus ergens anders heen gaat, dan zou het nieuw gefocuste element niet moeten passen: focus-zichtbaar.

Als dat een beetje abstract is, hier is een interpretatie:

Situatie	Is: focus-zichtbaar van toepassing?
De gebruiker zegt dat ze altijd willen dat de focus zichtbaar is via een setting	Ja
Een element heeft een toetsenbord nodig om te functioneren (zoals tekst)	Ja
De gebruiker navigeert met een toetsenbord	Ja
De gebruiker navigeert met een aanwijsapparaat (zoals een muis of vinger op een touchscreen)	Nee
Een script zorgt ervoor dat de focus van een `:focus-visible`element naar een ander element gaat	Ja
Een script zorgt ervoor dat de focus van een niet- `:focus-visible`element naar een ander element gaat	Nee

Het is voor herhaling vatbaar: dit zijn richtlijnen en browsers zullen in staat zijn om zelf te bepalen wat wordt geselecteerd door :focus-visible. We kunnen verwachten dat het voor de hand liggende geval van toetsenbordnavigatie op een voorspelbare manier zal worden afgehandeld, maar de browsers hebben de mogelijkheid om het zelf te bepalen, net als elke andere functie.

Browser-ondersteuning

Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.