Smashing Mobile Web Development

CSS3

CSS stands for Cascading Style Sheets, which define properties and attributes that HTML elements use in order to be displayed on a page. CSS3 is a new version of the syntax that helps designers and developers create rich elements without having to use complex JavaScript, Images, or Flash to display content the users.

It’s important to note that CSS3 is not consistent across all browsers. Table 2-4 shows three types of browser frameworks that are used across all browsers.

When building web apps, you should always know your target device. If you want to target Windows Mobile (which runs IE7 Mobile), you need to know what CSS3 functions it supports. Many tools can detect the type of operating system and features that are available. These tools, which I discuss later in this chapter, can help with your development process.

Table 2-4 Browser Frameworks

Browser Framework	Example of Browsers	CSS3 Support?
Gecko	Mozilla Firefox, Mozilla Firefox Mobile (Fennac)	CSS3 support is fully supported as of version 4.0 and higher. All CSS properties must be prefixed with -moz.
Webkit	Apple Safari, Apple Safari Mobile, Google Chrome	CSS3 support is partially supported, depending on the browser version. The latest versions of all browsers should support all CSS3 features. All properties must be prefixed with -webkit.
Mosaic	Internet Explorer, IE Mobile	Most CSS3 functionality is not available via Internet Explorer. Internet Explorer 9 and higher does have support ...