Most mobile browsers support one or more of three Cascading Style Sheet (CSS) standards: CSS2, Wireless CSS, and CSS Mobile Profile. Additionally, some
smartphones with WebKit browsers support parts of the CSS3 standard. Some older mobile devices support no CSS at all (but these devices are not browsing the Internet in significant numbers and would be good candidates for Mobile Web content in WML).
Wireless CSS is a CSS2 subset standardized by the Open Mobile Alliance. Its most recent version, 1.2, was released in September 2007. This CSS variant adds three mobile-specific CSS extensions to support scrolling marquee text, text input formats, and access keys mappings. All of these mobile extensions are now obsolete and should not be used in new Mobile Web projects. The marquee style properties in Wireless CSS were retired in favor of the marquee features in CSS3.
NOTE: Wireless CSS specifies style exceptions for documents presented in the Chinese, Japanese, and Korean character sets. Refer to the Wireless CSS specification for more information.
CSS Mobile Profile is a CSS2 subset—with some features borrowed from CSS3—that is standardized by the W3C. It is intended to provide a common subset of styles for resource-constrained mobile devices where implementation of the full CSS standard is not possible. The W3C’s goal is to align CSS Mobile Profile with Wireless CSS as much as possible.
Despite the independence of the two mobile CSS standards, there is a measure of compatibility and interoperability between them. The Wireless CSS 1.2 standard (authored by the Open Mobile Alliance) attests to their compatibility:
Since both CSS2 variants follow CSS user agent semantics, conforming Wireless CSS user agents will accept valid W3C CSS Mobile Profile style sheets.
Both mobile CSS subsets support core CSS syntax and properties including selectors, inheritance, the box model, shorthand properties, generic font families, and absolute and relative font sizes. Both mobile dialects comply with existing CSS syntax standards and can be validated with a CSS validator. However, because the two dialects are subsets of desktop CSS, there are notable absences in the mobile specifications.
Optional features in the mobile specifications may be freely omitted by browser vendors while still claiming compliance to the standard. This is a source of significant frustration for new Mobile Web developers. Table 3-2 provides developers with a list of the exact differences between CSS2 and its mobile subsets.
Here are a few notable oddities or omissions in Wireless CSS and CSS Mobile Profile.
Wireless CSS leaves the inherit property value as optional for many properties and, therefore, often unimplemented in mobile browsers. Also in Wireless CSS, the display property requires only the none value. Values commonly used in desktop styling, like block, table, inline, and inherit are optional and often left unimplemented in browsers.
The absence of display property values complicates the construction of complex page layouts. In CSS Mobile Profile, box positioning using the position, bottom, top, left, right, and z-index properties is left as entirely optional in the standard.
Overall, Wireless CSS is a more restricted subset and an older standard targeted at Web browsers on resource-limited mobile devices. CSS Mobile Profile adds in much more of the CSS2 standard to enable richer web documents but risks full support on mass-market mobile browsers.
Table 3-2 describes the key differences between CSS2, Wireless CSS, and CSS Mobile Profile.
Table 3-2. CSS2 Properties with Optional, Limited, or No Support in Mobile CSS Dialects
CSS2 Property Description Wireless CSS CSS Mobile Profile background-color Background color for
a block element. The inherit value is optional in the standard.
Full support
background-attachment Specifies how
background attaches to browser window.
The inherit value is optional in the standard.
Full support
background-image Specifies a
background Image. The inherit value is optional in the standard.
Full support
background-position Position of
background image.
Supported values are top, center, bottom, left, and right.
The inherit value is optional in the
The inherit value is optional in the standard.
Full support
border-width,
The inherit value is optional.
Full support
display Display model or
instructions for a document element.
Supported value is none. If an element is visible, it should not declare a display property in CSS.
All other values are optional.
Float control for the
document element. The inherit value is
optional. Full support
font-family Font family used for
text in the document element.
Supported values are generic font names and inherit. Optional to allow specific font names.
Only a very small number of fonts are preinstalled on most mobile devices.
Specifying a font by name is not recommended.
Full support
Only a very small number of fonts are preinstalled on most mobile devices.
Specifying a font by name is not recommended.
CSS2 Property Description Wireless CSS CSS Mobile Profile
font-size Font size used for
text in the document element.
font-style Visual styling used
for text in the
font-variant Font variations used
for text in the
font-weight Type weight used for
text in the document element.
Width and height of the document element.
Supported values are numeric length, percentage, and auto.
The inherit value is optional.
Full support
items. decimal, lower-roman,
The inherit value is
optional. Full support
outline, outline-color, outline-style, outline-width
Outline styles in box
model. Not supported Optional
overflow, overflow-style value is marquee.
padding,
The inherit value is optional.
Not supported Optional
CSS2 Property Description Wireless CSS CSS Mobile Profile
text-align Specifies alignment
of text in a document element.
Supported values are left, right, center, and inherit.
The justify value is optional.
Full support
text-decoration Specifies adornment styles for text
text-transform Transforms the case of text in a document
vertical-align Specifies vertical alignment for the
All other values are optional.
Supported values are top, middle, bottom, baseline, and inherit.
visibility Specifies whether the
document element is
white-space Specifies how to
format whitespace in
z-index Specifies the 3D
(front and back) alignment for overlapping elements.
Not supported Optional
Use public mobile browser test pages to troubleshoot CSS support.
See Chapter 10 for details.
Create your own CSS test pages that demonstrate CSS property support. Test widely on mobile browsers. Contribute this information to the Mobile Web developer community. See Chapter 12 for details.