The latest Firefox 4 Beta has just been released (get it here). This beta comes with hundreds of bug fixes, improvements and multi-touch support for Windows 7 (see the release notes here). This article is about multi-touch support.

Felipe Gomes is working on bringing multi-touch support to web content. In this latest beta, we are experimenting with this new feature.

Playing with MultiTouch, HTML5 and CSS3:

This video is hosted by YouTube and uses the HTML5 video tag if you have enabled it (see here). YouTube video here.

Multi-touch Events

If you have a multi-touch capable display, touch events are sent to your web page, more or less like mouse events. Each input (created using your fingers) generates its own events:

• MozTouchDown: Sent when the user begins a screen touch action.
• MozTouchMove: Sent when the user moves his finger on the touch screen.
• MozTouchUp: Sent when the user lifts his finger off the screen.

Touch information

Touch events provide several useful properties.

• event.streamId: don’t forget, it’s multi-touch, which means that you have to deal with several events from several sources. So each event comes with an id to identify the input.
• event.mozInputSource: the type of device used (mouse, pen, or finger, if the hardware supports it). This is a property of mouse events.
• event.clientX/Y: the coordinates.

Designing a touch UI

You might want to have a specific UI for multi-touch capable devices. You can use the :-moz-system-metric(touch-enabled) pseudo class or the -moz-touch-enabled media query to design a more finger friendly UI.

Note: For now, this feature only works with Windows 7. If you don’t have hardware that supports multi-touch, you can try Hernan’s multi-touch simulator.

More joy:

(This video is made by Felipe, see more here).

At the beginning of the video, you see how a webpage can get data about multi-touch input, correctly track points of contact and differentiate between touch input and pen input.

At the second part, you see a visual application of multi-touch input on a fluid simulator, where each point of contact adds a particle source, and the movement adds forces to the field.

Both parts use HTML5’s canvas element to render their content.

Like it?

Edit: If you want more details, take a look at Felipe’s latest blog post.