Cover by Maximiliano Firtman

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

O'Reilly logo

CSS for Mobile

Web (and mobile) browsers have a great feature that makes our lives much easier. If we use any selector or attribute that the browser doesn’t understand, the browser will just ignore it. This will be very helpful in the following pages. Usage of CSS 2.1, CSS 3.0, CSS Mobile Profile, and WAP CSS is the same; we specify CSS selectors and attributes for those selectors. The standards only tell us which selectors and attributes are supported, and we will find browsers that do not properly render standard ones and do properly render noncompatible tags.

If you are interested in having W3C-valid markup, remember that XHTML Basic 1.0 doesn’t support CSS, and 1.1 added support, but only for a style or link tag with external styles. The W3C standard doesn’t support the inner styles defined in the style attribute.

WCSS, or WAP CSS (the OMA standard that comes with XHTML MP), is a CSS 2.0 subset, like CSS MP (the W3C standard that comes with XHTML Basic). That’s why we will focus here on CSS 2.0 features (and beyond). We’ll begin by talking generally about “mobile CSS,” and later we will see how the different mobile browsers handle each of those features.

WCSS Extensions

The Open Mobile Alliance standard added to CSS 2 some new attributes that we can use in mobile browsers. As this is how CSS defines extensions, every new attribute has a dash (-) as a prefix. We will see later that some mobile browsers also understand some nonstandard extensions, like Mozilla’s. But again, don’t ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required