Apple heeft een MacBook Pro met touchscreen aangekondigd. Als webdeveloper hoop ik dat daarmee ook een bekend probleem meer aandacht krijgt: hoe browsers omgaan met touch, muis, trackpad en toetsenbord op hetzelfde apparaat.
Onlangs liep ik daar zelf tegenaan op Windows-apparaten met een touchscreen. Ik wilde hover-effecten bij muisgebruik, zonder dat die na een tik op het scherm bleven hangen. Een kleine wens, zou je denken.
Toch blijkt het lastig om dat met alleen CSS precies aan te sturen. Mediaqueries zoals hover, pointer en hun any-varianten vertellen welke mogelijkheden invoerapparaten hebben. Ze vertellen niet welk invoermiddel een specifieke interactie veroorzaakt. Een laptop kan prima tegelijk een touchscreen én een trackpad hebben. Die beperking staat ook beschreven in de CSS-specificatie.
Met JavaScript kun je via PointerEvent.pointerType wel onderscheid maken tussen muis, pen en touch. De bouwstenen bestaan dus al. Mijn hoop zit vooral in consistentere browserafhandeling en betere mogelijkheden om dit rechtstreeks in CSS uit te drukken.
Nu touch ook naar de Mac komt, hoop ik dat zulke situaties hoger op de agenda komen bij Apple en andere browsermakers. Dat hover voorspelbaar reageert wanneer je van trackpad naar touchscreen wisselt. Dat tikken en klikken betrouwbaar werken, terwijl toetsenbordfocus duidelijk zichtbaar blijft.
De aankondiging belooft zulke verbeteringen niet. Maar misschien geeft ze wel een extra zetje aan iets waar het web al langer behoefte aan heeft: soepel kunnen wisselen tussen invoermethoden, met minder extra code om de verschillen op te vangen.
Daar kijk ik als developer minstens zo naar uit als naar het touchscreen zelf.