CSS oplossing voor :hover op touchscreens

Een hover-effect laat duidelijk zien welke elementen klikbaar zijn. Een hover is het met de muis zweven over een element, zónder op het element te klikken. Wanneer iemand de muis over een link beweegt veranderd bijvoorbeeld de (achtergrond-)kleur. Met een hover-effect kunnen we duidelijk onderscheid maken tussen een element mét interactie en een element zonder. Een hover-effect is dus belangrijk, maar hoe werkt dit eigenlijk op een apparaat waar men geen muis heeft, zoals een smartphone?

Het probleem

Elementen op een webpagina of -applicatie waarmee de gebruiker kan interacteren, hebben profijt van zo’n hover-effect. Het laat de gebruiker weten dat hij of zij kan interacteren met het element. Bij apparaten met touchscreens, kan men niet met de muis over de elementen heen gaan. Wanneer een gebruiker een swipe beweging maakt en hierbij over een interactief element mét hover-effect gaat, blijft de hover-stijl staan. Dat het element de hover-stijl houdt, is vaak onwenselijk: het trekt ongewild de aandacht van de gebruiker en het communiceert een bepaalde toestand (state) naar de gebruiker die het niet zou moeten hebben.

Links: Hover-stijl blijft staan op touchscreen apparaten, rechts: het hover-effect op desktopcomputers of laptops

De oplossing

Om dit probleem op te lossen had je vroeger JavaScript nodig. Met JavaScript testte je of een scherm aanrakingen ondersteund. Als dit het geval was, voegde je een class toe die het hover-effect verhinderde (of andersom).

Tegenwoordig hebben voor dit probleem — gelukkig — een CSS media query. Of eigenlijk… Hebben we er vier:

• @media (hover: ... )
• @media (any-hover: ... )
• @media (pointer: ... )
• @media (any-pointer: ... )

Hover en pointer?

De media query hover controleert of een apparaat de mogelijkheid heeft om over elementen heen te ‘zweven’ (hover). De pointer media query controleert of een apparaat een ‘aanwijs-apparaat’ heeft. Een aanwijs-apparaat is een invoer apparaat dat de gebruiker in staat stelt om een element aan te wijzen. Dit kan bijvoorbeeld een muis zijn, maar ook een touchpad of een touchscreen.

Met een muis en een touchpad kan men over een element heen zweven, met een touchscreen kan dit niet. De any- media queries controleren of alle beschikbare apparaten, in plaats van alleen de primaire.

Hover

@media (hover: none) {
  /* Ik kan niet zweven */
}
@media (hover: hover) {
  /* Ik kan wél zweven */
}

Pointer

@media (pointer: none) {
  /* Geen aanwijs-apparaat */
}
@media (pointer: fine) {
  /* Bevat een aanwijs-apparaat met beperkte nauwkeurigheid */
}
@media (pointer: coarse) {
  /* Bevat een nauwkeurig aanwijs-apparaat */
}

• Noot: de query any-pointer kan overeenkomen met zowel fine als coarse.

Doorsnee resultaten

Conclusie

Het toevoegen van een hover-effect is belangrijk. Om te zorgen dat dit effect alleen werkt bij desktopcomputers en laptops (en niet bij smartphones en tablets), gebruik je:

@media (hover: hover) and (pointer: fine) {
  /* zet hier al je hover-stijling */
}

We gebruiken hier hover: hover, omdat we alleen de apparaten willen hebben waarbij het mogelijk is om ‘te zweven’ over de elementen. En we gebruiken pointer: fine, omdat we de apparaten willen hebben die een accuraat aanwijs-apparaat hebben. Telefoons en tablets vallen namelijk onder pointer: coarse.

Bronnen

❤️ Los vertaald van het artikel Finally, a CSS only solution to :hover on touchscreens door Mezo Istavan.