Mobile HTML5

Chapter 9. CSS3: Modules, Models, and Images

Unlike CSS2, CSS3 has been divided into a set of modules. By splitting CSS3 into modules, the W3C has been able to work on different modules at different speeds, with some modules already at the Recommendation level, and others moving toward final recommendations at a slower pace.

There are over 20 modules in the CSS3 specifications, with each module deserving its own chapter (or two, or three). Unfortunately, we can’t cover all of them. In this chapter, we will cover the CSS topics that are relevant in creating the look and feel of CubeeDoo. To include a few more properties, we will also look at re-creating the look and feel of the native iPhone settings screen.

The native iPhone application look and feel can be done with simple CSS. With border-radius, background properties, gradients, text-shadow, box-shadow, background-size, text-overflow, and some older, well-known and supported CSS 2.1 and earlier properties, we can create the look of an iPhone. We’ll then apply those features to CubeeDoo.

No images means we can create the native iPhone application look without requiring extra HTTP requests and without needing a graphics program. Because we’re using CSS, should your project manager choose to alter the color scheme of your application, you can do so without having to open up an image-editing program.

CSS3 allows for creating websites with less code and fewer images than you may be accustomed to, and fewer images mean fewer HTTP requests, ...