Mobile style - CSS Mobile Profile 2.0
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.
This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.
Comments
The forum archive of this article is still available on My Opera.