Apple has announced a MacBook Pro with a touchscreen. As a web developer, I hope this brings more attention to a familiar problem: how browsers handle touch, a mouse, a trackpad and a keyboard on the same device.
I recently ran into this myself on Windows devices with touchscreens. I wanted hover effects when using a mouse, without those effects sticking around after a tap on the screen. A small request, you would think.
Yet controlling that precisely with CSS alone turns out to be tricky. Media queries such as hover, pointer and their any- variants describe the capabilities of input devices. They do not tell you which input caused a particular interaction. A laptop can easily have both a touchscreen and a trackpad. The CSS specification describes this limitation too.
With JavaScript, PointerEvent.pointerType lets you distinguish between mouse, pen and touch input. The building blocks already exist. My hope is mainly for more consistent browser behavior and better ways to express this directly in CSS.
Now that touch is coming to the Mac, I hope these situations move higher up the agenda at Apple and other browser makers. That hover behaves predictably when you switch from trackpad to touchscreen. That taps and clicks work reliably, while keyboard focus remains clearly visible.
The announcement does not promise these improvements. But perhaps it will give an extra push to something the web has needed for a while: switching smoothly between input methods, with less extra code to handle the differences.
As a developer, I am looking forward to that at least as much as the touchscreen itself.