Media Blog

While HTML5 has been getting most of the attention lately, CSS 3, the other half of the web developer’s toolkit for next-generation web pages has been progressing as well.

Although the CSS Working Group has taken a fair amount of flack from the development community over the years, despite the Working Group’s lack of transparency and refusal to engage the community, the actual implementers — Apple, Mozilla, Opera and Google — continue to push CSS 3 toward the mainstream.

One of the more interesting aspects of CSS 3 is the new Flexible Box model spec which essentially allows you to define how unused portions of block level elements are handled. Sound confusing? Well, initially it can be. Fortunately, Alex Russell of Dojo fame has put up a nice guide to using the new flexible box model.

Essentially, two new CSS 3 selectors, hbox and vbox, allow you to easily center an element within its parent element. Then, as the spec says, “unused space can be assigned to a particular child or distributed among the children by assignment of ‘flex’ to the children that should expand.” In other words, you can make some child elements flexible and others fixed, which makes for considerably more complex layouts using only a fraction of the code you’d need to do that using pure CSS 2.

One thing to keep in mind: selectors like hbox and vbox are not universally supported yet, so if you need everything to work in IE, this method is off limits. However, hbox and vbox do work in Gecko and Webkit, which means these tricks will work just fine for Safari, Firefox and Chrome. Opera is only progressive browser missing from the list.

As Russell points out in his write-up, while universal support is still a ways away, these techniques could be used in mobile interfaces where Safari and Chrome are prevalent.

See Also:

• Someday You Will Not Hate the CSS3 Advanced Layout
• What’s On Your CSS Wishlist?
• Code for Tomorrow’s Web Today Using Modernizr

Mozilla has revealed it is working on a new set of touchscreen tools for the Firefox browser.

The software maker’s multitouch Firefox project is still in its infancy, but the goal is to eventually offer web developers a way to tap into a new multitouch support structure to create online games and alternative touch-based user interfaces for web apps in Firefox.

At the moment, there are no hard and fast plans regarding exactly when multitouch support, which would be accessible through new APIs, might land in Firefox. The current goal calls for the new tools to arrive in Firefox 3.6, which is due later this year.

Touchscreen interfaces are gaining in popularity industry-wide — phones, netbooks, even some desktop PCs are starting to offer touch-sensitive screens. Windows 7, just a couple of months away, will offer even greater support for touchscreen hardware. Of course, the touchscreens only work if the software you’re using understands the input it’s receiving. In some cases, the OS itself provides those multitouch hooks (like on the iPhone), but even then software needs to adapt and use the new inputs.

The result is a computing environment where some of the applications are touch-sensitive and others are not, and Mozilla doesn’t want Firefox to be left in the cold in that regard.

A browser that can accept events from a touchscreen would give web developers a whole new set of of events to work with. Instead of just “onclick” and or other mouse events, multitouch software would be able to understand events like “ontouch,” “ontap” or something similar. Once those events are made available though, for developers, the sky’s the limit.

These enhancements might mean more work for developers, but they also open up some very cool possibilities for new web apps and games. Check of the video below from Mozilla intern Felipe Gomes that shows off a demo of some prototyped multitouch support for Firefox in Windows 7.

Multitouch on Firefox from Felipe on Vimeo.

Perhaps the most interesting part of the project is that web developers will be able to detect multitouch devices through CSS media queries and serve entirely different stylesheets geared at multitouch interfaces. Think @screen, @print and @touch stylesheets.

Mozilla also recently announced that it was adding support for orientation events to the development trunk for the Firefox browser. This would allow Firefox to accept input from accelerometers. Web apps would be able to manipulate the page layout based on which way the screen is turned by using a JavaScript API. Right now, the only non-phone hardware that has an accelerometer is the MacBook Pro, but more laptops should have them soon.

See Also:

• Mozilla Shows What’s to Come in Firefox 3.6 Alpha Release
• Mozilla Mulls Design Makeover for Firefox 3.7
• Mozilla Pushes the Web Forward With Firefox 3.5