Mobile style - CSS Mobile Profile 2.0

By David Storey

Introduction

Following on from my previous article on mobile markup, this article will cover the W3C’s recommended option for supplying style to your mobile documents—CSS Mobile Profile 2.0. I will introduce what is available in the mobile profile and how it differs from CSS 2.1; then, I will discuss progressive enhancement and applying more advanced styles to more capable devices.

A note on mobile-specific versions

This article will not cover the reasons why you should or should not create a mobile-specific version of your site. For the pros and cons, consult the previous article on XHTML Basic, as the same reasons apply here, and the CSS Mobile Profile is often used hand in hand with XHTML Basic.

One point worth mentioning is that the CSS Mobile Profile need not just be used with a stripped-down mobile-specific version. Using capabilities such as the handheld media type and media queries, it is possible to use the same markup as the desktop but send a separate style sheet to mobile devices. You may want to consider using this approach and use the properties supported in CSS Mobile Profile for the mobile style sheet. While the CSS Mobile Profile is quite restrictive in the properties it supports, it shouldn’t come as too much of a shock for those Web developers who are used to the restrictions imposed by IE 6 —the support levels are very similar between this spec and IE 6’s CSS support, minus the implementation bugs.

Introducing CSS Mobile Profile 2.0

As is the case with XHTML, there are two different style sheet variations that focus on mobile. CSS Mobile Profile 1.0 is a W3C Candidate Recommendation, while WAP CSS is a specification from the WAP Forum (now the Open Mobile Alliance). While they are different specifications, they are also both subsets of CSS 2.1, and the supported properties are very close. The exception is that WAP CSS extends CSS 2.1 with some additional properties specified with the -wap- prefix (more about those later in this article).

The W3C is in the process of updating the CSS Mobile Profile spec, and the second version has just reached Candidate Recommendation. The new version of the spec adds a few extra CSS 2 properties and takes the WAP extensions into account—this is the version we will focus on in this article, and it should be considered the baseline for CSS support in modern mobile browsers. As is the case with markup, desktop-class mobile browsers such as those using Opera’s core rendering engine or WebKit offer CSS support well above this baseline.

CSS Support in CSS Mobile Profile 2.0

CSS Mobile Profile 2.0 is a subset of CSS 2.1, with additional properties from CSS 3. Therefore, many developers will have the prior knowledge they need to get started right away, and browser support is generally quite good. An exception is the CSS 3 properties, which are not well defined yet and are not implemented in any browser to my knowledge.

While CSS 2.1 is not modularised like XHTML 1.1 or CSS 3, I’ve split the properties supported by CSS Mobile Profile 2.0 into the same modules used in CSS 3 to cut it down into bite-sized chunks, instead of a long list of properties. I won't mention any CSS3 properties unless appropriate to the discussion of CSS2.1 properties, as the CSS 3 spec is a moving target.

Selectors

Supported selectors: Universal selector (*), Type selectors (eg h1), Descendent selectors (eg h1 p), Child selectors (eg h1 > p), Link pseudo-classes (eg :link and :visited ), Dynamic pseudo-classes (eg :active and :focus ), Class selectors (eg .class-name), ID selectors (eg #id-name), Grouping (eg h1, h2, p)

Unsupported selectors: :first--child pseudo-class, :hover dynamic pseudo-class, :lang() pseudo-class, :first--letter pseudo-element, :first--line pseudo-element, adjacent selectors (eg h1 + p), Attribute selectors (eg a[href], a[target="_blank"])

All supported selectors are required for a browser to be considered compliant.

Background & Borders

Supported properties: background, background-color, background-image, background-repeat, background-attachment, background-position, border, border-width, border-color, border-style

Unsupported properties: none

As well as the short hand, individual properties for each side are supported, such as border-top-style and so on. For border-style, the values are restricted to none, dotted, dashed, solid and inherit. The uncommonly used values such as hidden, double, groove, ridge, inset and outset are not included in the spec. All supported properties are required for a browser to be considered compliant.

For background images (and images in general), it is important to note that lower-end devices only have limited memory and processors. Use images sparingly, and try to optimise the size and resolution of the images that are used. Not only will this help stop a phone from running out of memory, it will also save on download time and data costs for users that pay per kilobyte. Opera Mini will compress the images on the server, but most other browsers, such as Opera Mobile and Mobile Safari will not. If you are using the same image in the mobile and desktop style sheet, you can use server-side scripting to optimise the mobile version. How to do that is beyond the scope of this article, however, and is dependent on your scripting language of choice.

Positioning

Supported properties: position, top, right, bottom, left, z-index

Unsupported properties: none

All properties are listed as optional for browsers to support. Any desktop-grade mobile browser supports these properties.

Lists

Supported properties: list-style, list-style-image, list-style-type

Unsupported properties: list-style-position

The list-style-type property is restricted to disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none and inherit. It does not support decimal-leading-zero, lower-greek, lower-latin, upper-latin, Armenian or Georgian.

Basic Box Model

Supported properties: display, margin, padding, height, min-height, max-height, width, min-width, max-width, float, clear, visibility, overflow, overflow-style

Unsupported properties: none

The display property is restricted to inline, block, list-item, none and inherit. The table-related values, run-in and inline-block are not supported. The padding and margin properties support the properties for each side such as padding-top and margin-bottom. The overflow property only supports the auto value. The overflow-style property is restricted to the marquee value, which is part of CSS 3.

Color

Supported properties: color

Unsupported properties: none

Fonts

Supported properties: font, font-family, font-style, font-variant, font-weight, font-size

Unsupported properties: none

For the font-size property, only absolute size keywords (eg medium), relative size keywords (eg bigger) and inherit are supported. Length and percentage values are unsupported. This is likely due to low-end mobiles only supporting limited fonts and font sizes. Browsers such as the latest version of Opera Mini generate their own font, so bypass this restriction.

The restriction in fonts on mobile devices is one of the biggest stylistic issues with designing for mobiles and one of the biggest causes of inconsistencies between browsers and devices. It is also common for italic fonts to be unsupported on low-end phones, in which case browsers often use bold as a substitute. On mobile, there is no common baseline of fonts, such as the Microsoft Core Fonts commonly found in desktop operating systems. One benefit of this is that comic sans is not found on mobiles. On smart phones, the font situation is generally better as there is more memory to hold a higher quantity and quality of fonts.

Text

Supported properties: text-indent, text-align, text-decoration, text-transform, white-space

Unsupported properties: word-spacing, letter-spacing, unicode-bidi

For the text-decoration property support is restricted to none, blink, underline, and inherit. The overline and line-through values are not supported.

Line Layout

Supported properties: vertical-align

Unsupported properties: line-height

The vertical-align property only supports the values top, middle, bottom, baseline and inherit. The sub, super, text-top, text-bottom, percentage and length values are not supported.

Basic User Interface

Supported properties: outline, outline-color, outline-style, outline-width

Unsupported properties: cursor

All properties are listed as optional for browsers to support. All desktop-class mobile browsers support these properties. In the spec the outline-style property is restricted to the values none, solid, dashed, dotted and inherit. This is the same restriction as imposed on the border-style property.

Marquee

Supported properties: marquee-style, marquee-direction, marquee-play-count, marquee-speed

Unsupported properties: none

The Marquee module is a CSS 3 module that has been created for the mobile profile of CSS. This was formally part of the box model module. As this module is new, it is not stable; the first publicly-available Working Draft has just been published. Therefore, browser support is nonexistent, unlike other parts of the CSS Mobile Profile.

This module is intended to replace the WAP CSS extensions, which have been deprecated. The property names are similar to their WAP counterparts, except the -wap- prefix has been dropped, marquee-dir has been changed to marquee-direction, and marquee-loop is now marquee-play-count.

At-rules

Supported rules: @charset, @import, @media, @namespace

Unsupported rules: @page

The @namespace rule is listed as optional. For the @media rule, only the handheld and all media types have to be supported. The other media types, such as screen, are optional. Although the handheld media type must be supported by the spec, many browsers don’t support it, such as Safari on iPhone.

Due to many sites specifying under-tested or broken handheld style sheets, Opera made the decision in Opera Mini 4 plus, and Opera Mobile 9.5 plus, to render the screen style sheet in the default mode. The handheld style sheet will still be rendered instead of the screen style sheet if the browser is switched into mobile view. If no handheld style sheet is specified, Opera will reformat the page to fit into a single column when in mobile view.

Other CSS2.1 properties

Other properties from CSS 2.1 that are not mentioned here are not supported, such as those related to tables and aural style sheets.

WAP extensions to CSS

As mentioned previously, The Open Mobile Alliance specified some extensions to CSS, which have now been deprecated by the W3C, in favour of their standardised versions being specified in CSS 3. The WAP CSS versions have been implemented in a number of browsers, so if you must use a marquee effect, the only option is to use these extensions at present.

The -wap-marquee value can be used with the display property to specify that the element should be displayed as a marquee. This has been replaced by overflow-style: marquee in CSS Mobile Profile 2.0.

The WAP specific properties are -wap-marquee-style, -wap-marquee-loop, -wap-marquee-dir and -wap-marquee-speed. These have been replaced by the properties in the previous section.

Browser and device support

With the exception of the W3C standardised marquee properties, CSS Mobile Profile is defined as a baseline for mobile browsers to support and support should be good for relatively modern browsers. Most desktop-class browsers will support all properties and support much more of the full CSS 2.1 spec. Opera’s core rendering engine, used in Opera Mobile and Opera Mini, supports all properties and values in the CSS 2.1 specification, except visibility: collapse.

Cross-device, the main issue with support will come from the fonts available on each phone, so we recommend you not to expect pixel-perfect font rendering in your mobile layouts. The only way to predict how fonts will render cross-device is to test using different handsets. The exception is Opera Mini 4 and above, which creates its own font to use on every device.

Progressive enhancement

With the exception of restrictions on font sizes and selectors, most of the commonly used CSS 2.1 properties and values are available in CSS Mobile Profile 2.0. If you would like to use more properties, there is a good chance that full HTML browsers will support them. If you choose to use non-CSS Mobile Profile properties for additional style, you should only do so if their unavailability won’t break the layout or leave the content inaccessible.

Use the full CSS range of CSS 2.1 selectors with caution, as browsers that only support the CSS Mobile Profile subset of selectors will not render the CSS rule set if the selector is unsupported. The same can be said for CSS 3 selectors and properties, but the browser support is much more patchy and the specifications are more unstable. Certain CSS 3 properties will also take more processing and thus consume more battery—opacity is a good example. One drawback of using full CSS 2.1 or CSS 3 properties is that your style sheet will not validate to the CSS Mobile Profile, but that may not be so important as long as valid CSS is used.

Conclusion

In this article, I’ve covered the CSS Mobile Profile 2.0 and the properties it supports. I briefly introduced the WAP specific properties not found in CSS 2.1, which are undergoing standardisation in CSS3 for inclusion in the CSS Mobile Profile. Finally, I covered issues that can arise due to device restrictions (such as font availability), and introduced progressive enhancement.

David Storey

David Storey heads up the Open the Web initiative at Opera. This small global team is tasked with improving the compatibility of web sites across Opera's wide range of browsers, as well as promoting web standards, accessibility and best practices, so that the Web will work for all standards-aware browsers, platforms, devices and users. He is a member of the W3C Mobile Web Best Practices Working Group.

On his blog, Slightly Ajar, he discusses this work, as well as random topics, from travel to music.

David previously worked for CERN, home of the World Wide Web, before taking up his post at Opera Software.

This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.