Firefox Multitouch at MozChile – Drawing Canvas Experiment from Marcio Galli on Vimeo.

A couple of months ago we featured a video that had some examples of multi-touch working in Firefox. At a recent event in South America, Marcio Galli put together a quick and fun drawing program based on the multi-touch code that we’ll have in a later release of Firefox. What’s really great is that he was able to put this together in just a couple of hours based on the web platform.

There are three main components to the touch support in Firefox:

1. Touch-based scrolling and panning for the browser. This allows you, as a user, to scroll web pages, select text, open menus, select buttons, etc. This is part of Firefox 3.6.

2. Implement a new CSS selector that will tell you if you’re on a touch-enabled device. This is <a href="https://developer.mozilla.org/en/CSS/:-moz-system-metric%28touch-enabled%29">-moz-system-metric(touch-enabled)</a>. You can use this in your CSS to adjust the size of UI elements to fit people’s fingers. This is part of Firefox 3.6.

3. Exposing multi-touch data to web pages. This takes the form of DOM events much like mouse events you can catch today. This isn’t part of Firefox 3.6, but is likely to be part of Firefox 3.7.

Although not all of this will be in our next release we thought it would be fun for people to see what will be possible with the release after 3.6.

Note: You can find the sample code on Marcio’s page for the demo.