W3C

CSS Mobile Profile 1.0

W3C Candidate Recommendation 24 October 2001

This version:
http://www.w3.org/TR/2001/CR-css-mobile-20011024
Latest version:
http://www.w3.org/TR/css-mobile
Previous version:
http://www.w3.org/TR/2001/WD-css-mobile-20010129
Authors:
Ted Wugofski, Openwave <[email protected]>
Doug Dominiak, Openwave (formerly Motorola) <[email protected]>
Peter Stark, Ericsson <[email protected]>

Abstract

This specification defines a subset of the Cascading Style Sheets Level 2 specification tailored to the needs and constraints of mobile devices.

Status of this document

This section describes the status of this document at the time of its publication. Other documents may supersede this document. The latest status of this document series is maintained at the W3C.

This specification is being put forth as a Candidate Recommendation by the CSS Working Group [member-only link], part of the Style activity. This document is a revision of the Working Draft dated 2001 January 29, and has incorporated suggestions received during last call review, comments, and further deliberations of the W3C CSS Working Group.

All persons are encouraged to review and implement this specification and return comments to the (archived) public mailing list www-style (see instructions). W3C Members can also send comments directly to the CSS Working Group.

W3C believes this specification is stable. It can still be updated by the working group, but only to clarify its meaning. If, unexpectedly, serious problems are found, it will be returned to Working Draft status. Otherwise, as soon as there are sufficient implementations, it will progress to become Proposed Recommendation. In either case, the duration of the Candidate Recommendation phase will be at least six months (Oct 2001 - Apr 2002).

A list of current W3C Recommendations and other technical documents can be found at http://www.w3.org/TR.

Contents

1. Overview

This document specifies a profile of the Cascading Style Sheets, level 2 (CSS2) specification [CSS2] appropriate for mobile devices such as wireless phones. Conformance to this profile means that a user agent supports, at minimum, the features defined in this specification. This subject is addressed in Section 2, Conformance, below.

As defined in [CSS2]:

CSS2 is a style sheet language that allows authors and users to attach style (e.g., fonts, spacing, and aural cues) to structured documents (e.g., HTML documents and XML applications). By separating the presentation style of documents from the content of documents, CSS2 simplifies Web authoring and site maintenance. CSS2 builds on CSS1 (see [CSS1]) and, with very few exceptions, all valid CSS1 style sheets are valid CSS2 style sheets. CSS2 supports media-specific style sheets so that authors may tailor the presentation of their documents to visual browsers, aural devices, printers, braille devices, handheld devices, etc.

In summary, CSS2 specifies how developers can author style sheets for presenting documents across multiple devices and media types. While this is very important, it is also important that authors have an understanding of what features are supported on these different devices. Likewise, it is important that similar devices operate in a similar manner. Otherwise, authors will need to develop style sheets for each version of each device -- raising the cost of content development and decreasing interoperability.

The CSS Mobile Profile specifies a conformance profile for mobile devices, identifying a minimum set of properties, values, selectors, and cascading rules. The resulting CSS Mobile Profile is very similar to CSS1.

2. Conformance

The key words "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY" and "OPTIONAL" in this document are to be interpreted as described in RFC 2119 (see [RFC2119]).

The primary role of a profile is to define a subset of features that provides a minimal guarantee of interoperability. In the case of the CSS Mobile Profile, this guarantee is that a conforming user agent will support the features defined in this specification following the CSS2 conformance clause ([CSS2] Section 3.2), recast and summarized below:

  1. A CSS Mobile Profile conforming user agent (MP-UA) MUST support the all and handheld CSS2 media types. A MP-UA MAY support other CSS2 media types, as well.
  2. For each source document, a MP-UA MUST attempt to retrieve all associated style sheets that are appropriate for the supported media types.
  3. A MP-UA MUST parse the style sheets according to this specification. In particular, the MP-UA MUST recognize all CSS Mobile Profile at-rules, blocks, declarations, and selectors. If a MP-UA encounters a property that applies for a supported media type, the MP-UA MUST parse the value according to the property definition. This means that the MP-UA MUST accept all valid values and MUST ignore declarations with invalid values. MP-UA MUST ignore rules that apply to unsupported media types.
  4. For each element in a document tree, the MP-UA MUST assign a value for every applicable property according to the property's definition and the rules of cascading and inheritance.
  5. If the source document comes with alternate style sheets (such as with the "alternate" keyword in HTML 4.01 [HTML4]), the MP-UA MUST allow the user to select one from among these style sheets and apply the selected one.

As with CSS2, there are qualifications to this conformance clause:

  1. Values MAY be approximated when required by the MP-UA.
  2. The inability of a MP-UA to implement part of this specification due to the limitations of a particular device (e.g., a MP-UA cannot render colors on a monochrome monitor or page) SHALL NOT imply non-conformance.

It is RECOMMENDED that authors use this conformance profile to take advantage of forward compatibility. Authors ought to be able to use style properties with an understanding that the cascading rules are processed correctly and that unknown properties and values are ignored. For example:

  body {
    background-position: center center;
    background-position: 45% 55%;
  }
 

A MP-UA that can process percentage values for the background-position property will process the first background-position declaration and then "write over" that value with the second background-position declaration. A MP-UA that cannot process percentage values will process the first background-position declaration and ignore the second background-position declaration.

3. Selectors

In CSS2, pattern matching rules determine which style rules apply to elements in the document tree [CSS2].

The following table summarizes CSS Mobile Profile selector syntax. In addition to the selectors marked "Yes" in the CSS Mobile column, the CSS Mobile Profile includes the CSS2 grouping mechanism (See [CSS2] Section 5.2.1).

Pattern Meaning Selector type CSS Mobile
* Matches any element Universal selector Yes
E Matches any E element (i.e., any element of type E) Type selectors Yes
E F Matches any F element that is a descendant of an E element Descendant selectors Yes
E > F Matches any F element that is a child of an element E Child selectors No
E:first-child Matches element E when it is the first child of its parent The :first-child pseudo-class No
E:link
E:visited
Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited). The link pseudo-classes Yes
E:active Matches E during certain user actions. The dynamic pseudo-classes Yes
E:hover Matches E during certain user actions. The dynamic pseudo-classes No
E:focus Matches E during certain user actions. The dynamic pseudo-classes Yes
E:lang(c) Matches element of type E if it is in (human) language c (the document language specifies how language is determined). The :lang() pseudo-classes No
E + F Matches any F element immediately preceded by an element E. Adjacent selectors No
E[foo] Matches any E element with the "foo" attribute set (whatever the value). Attribute selectors No
E[foo="warning"] Matches any E element whose "foo" attribute value is exactly equal to "warning". Attribute selectors No
E[foo~="warning"] Matches any E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "warning". Attribute selectors No
E[lang|="en"] Matches any E element whose "lang" attribute value has a hyphen-separated list of values beginning (from the left) with "en". Attribute selectors No
div.warning The same as div[class~="warning"] Class selectors Yes
E#myid Matches any E element ID equal to "myid". ID selectors Yes

4. Properties

The following table summarizes CSS Mobile Profile properties and property values. Refer to [CSS2] for the definition of these properties and values.

Name CSS Mobile CSS Values Initial value
'azimuth' No <angle> | [[ left-side | far-left | left | center-left | center | center-right | right | far-right | right-side ] || behind ] | leftwards | rightwards | inherit center
'background' Yes ['background-color' || 'background-image' || 'background-repeat' || 'background-attachment' || 'background-position'] | inherit see individual properties
'background-attachment' scroll and inherit scroll | fixed | inherit scroll
'background-color' Yes <color> | transparent | inherit transparent
'background-image' Yes <uri> | none | inherit none
'background-position' Yes [ [ <percentage> | <length> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit 0% 0%
'background-repeat' Yes repeat | repeat-x | repeat-y | no-repeat | inherit repeat
'border' Yes [ 'border-width' || 'border-style' || color ] | inherit see individual properties
'border-collapse' No collapse | separate | inherit collapse
'border-color' Yes <color>{1,4} | transparent | inherit see individual properties
'border-spacing' No <length> <length>? | inherit 0
'border-style' Yes <border-style>{1,4} | inherit see individual properties
'border-top' 'border-right' 'border-bottom' 'border-left' Yes [ 'border-top-width' || 'border-style' || <color> ] | inherit see individual properties
'border-top-color' 'border-right-color' 'border-bottom-color' 'border-left-color' Yes <color> | inherit the value of the 'color' property
'border-top-style' 'border-right-style' 'border-bottom-style' 'border-left-style' Yes <border-style> | inherit none
'border-top-width' 'border-right-width' 'border-bottom-width' 'border-left-width' Yes <border-width> | inherit medium
'border-width' Yes <border-width>{1,4} | inherit see individual properties
'bottom' No <length> | <percentage> | auto | inherit auto
'caption-side' No top | bottom | left | right | inherit top
'clear' Yes none | left | right | both | inherit none
'clip' No <shape> | auto | inherit auto
'color' Yes <color> | inherit depends on user agent
'content' No [ <string> | <uri> | <counter> | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit empty string
'counter-increment' No [ <identifier> <integer>? ]+ | none | inherit none
'counter-reset' No [ <identifier> <integer>? ]+ | none | inherit none
'cue' No [ 'cue-before' || 'cue-after' ] | inherit see individual properties
'cue-after' No <uri> | none | inherit none
'cue-before' No <uri> | none | inherit none
'cursor' No [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ] ] | inherit auto
'direction' No ltr | rtl | inherit ltr
'display' inline | block | list-item | none inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit inline
'elevation' No <angle> | below | level | above | higher | lower | inherit level
'empty-cells' No show | hide | inherit show
'float' Yes left | right | none | inherit none
'font' Yes [ [ 'font-style' || 'font-variant' || 'font-weight' ]? 'font-size' [ / 'line-height' ]? 'font-family' ] | caption | icon | menu | message-box | small-caption | status-bar | inherit see individual properties
'font-family' Yes [[ <family-name> | <generic-family> ],]* [ <family-name> | <generic-family> ] | inherit depends on user agent
'font-size' Yes <absolute-size> | <relative-size> | <length> | <percentage> | inherit medium
'font-size-adjust' No <number> | none | inherit none
'font-stretch' No normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit normal
'font-style' Yes normal | italic | oblique | inherit normal
'font-variant' Yes normal | small-caps | inherit normal
'font-weight' Yes normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit normal
'height' Yes <length> | <percentage> | auto | inherit auto
'left' No <length> | <percentage> | auto | inherit auto
'letter-spacing' No normal | <length> | inherit normal
'line-height' No normal | <number> | <length> | <percentage> | inherit normal
'list-style' Yes [ 'list-style-type' || 'list-style-position' || 'list-style-image' ] | inherit see individual properties
'list-style-image' Yes <uri> | none | inherit none
'list-style-position' Yes inside | outside | inherit outside
'list-style-type' disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none and inherit disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha | none | inherit disc
'margin' Yes <margin-width>{1,4} | inherit see individual properties
'margin-top' 'margin-right' 'margin-bottom' 'margin-left' Yes <margin-width> | inherit 0
'marker-offset' No <length> | auto | inherit auto
'marks' No [ crop || cross ] | none | inherit none
'max-height' No <length> | <percentage> | none | inherit none
'max-width' No <length> | <percentage> | none | inherit none
'min-height' No <length> | <percentage> | inherit 0
'min-width' No <length> | <percentage> | inherit depends on user agent
'orphans' No <integer> | inherit 2
'outline' No [ 'outline-color' || 'outline-style' || 'outline-width' ] | inherit see individual properties
'outline-color' No <color> | invert | inherit invert
'outline-style' No <border-style> | inherit none
'outline-width' No <border-width> | inherit medium
'overflow' No visible | hidden | scroll | auto | inherit visible
'padding' Yes <padding-width>{1,4} | inherit see individual properties
'padding-top' 'padding-right' 'padding-bottom' 'padding-left' Yes <padding-width> | inherit 0
'page' No <identifier> | auto auto
'page-break-after' No auto | always | avoid | left | right | inherit auto
'page-break-before' No auto | always | avoid | left | right | inherit auto
'page-break-inside' No avoid | auto | inherit auto
'pause' No [ [<time> | <percentage>]{1,2} ] | inherit depends on user agent
'pause-after' No <time> | <percentage> | inherit depends on user agent
'pause-before' No <time> | <percentage> | inherit depends on user agent
'pitch' No <frequency> | x-low | low | medium | high | x-high | inherit medium
'pitch-range' No <number> | inherit 50
'play-during' No <uri> mix? repeat? | auto | none | inherit auto
'position' No static | relative | absolute | fixed | inherit static
'quotes' No [ <string><string>]+ | none | inherit depends on user agent
'richness' No <number> | inherit 50
'right' No <length> | <percentage> | auto | inherit auto
'size' No <length>{1,2} | auto | portrait | landscape | inherit auto
'speak' No normal | none | spell-out | inherit normal
'speak-header' No once | always | inherit once
'speak-numeral' No digits | continuous | inherit continuous
'speak-punctuation' No code | none | inherit none
'speech-rate' No <number> | x-slow | slow | medium | fast | x-fast | faster | slower | inherit medium
'stress' No <number> | inherit 50
'table-layout' No auto | fixed | inherit auto
'text-align' left | right | center | justify | inherit left | right | center | justify | <string> | inherit depends on user agent and writing direction
'text-decoration' none, underline, and inherit none | [ underline || overline || line-through || blink ] | inherit none
'text-indent' Yes <length> | <percentage> | inherit 0
'text-shadow' No none | [<color> || <length> <length> <length>? ,]* [ <color> || <length> <length> <length>?] | inherit none
'text-transform' Yes capitalize | uppercase | lowercase | none | inherit none
'top' No <length> | <percentage> | auto | inherit auto
'unicode-bidi' No normal | embed | bidi-override | inherit normal
'vertical-align' baseline, sub, super, and inherit baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit baseline
'visibility' Yes visible | hidden | collapse | inherit inherit
'voice-family' No [[ <specific-voice> | <generic-voice> ],]* [ <specific-voice> | <generic-voice> ] | inherit depends on user agent
'volume' No <number> | <percentage> | silent | x-soft | soft | medium | loud | x-loud | inherit medium
'white-space' Yes normal | pre | nowrap | inherit normal
'widows' No <integer> | inherit 2
'width' Yes <length> | <percentage> | auto | inherit auto
'word-spacing' No normal | <length> | inherit normal
'z-index' No auto | <integer> | inherit auto

5. CSS Syntax

The CSS Mobile Profile uses the same syntax as specified in [CSS2]. The CSS Mobile Profile uses a subset of the values used in CSS2. Specifically:

  1. The MP-UA SHALL support integer and real numbers ([CSS2] Section 4.3.1).
  2. The MP-UA SHALL support the following lengths ([CSS2] Section 4.3.2): The MP-UA MAY support other lengths.
  3. The MP-UA SHALL support percentage values ([CSS2] Section 4.3.3).
  4. The MP-UA SHALL support URI values ([CSS2] Section 4.3.4).
  5. The MP-UA MAY support counter values ([CSS2] Section 4.3.5).
  6. The MP-UA SHALL support the following color values ([CSS2] Section 4.3.6): The MP-UA MAY support other color values.

Similarly, the CSS Mobile Profile requires that conforming user agents support the character encoding mechanisms specified in [CSS2]. Specifically:

  1. The MP-UA SHALL support priorities specified in [CSS2] to determine a document's character encoding.
  2. The MP-UA SHALL support the CSS2 @charset rules.

6. Assigning Property Values, Cascading, and Inheritance

In general, the CSS Mobile Profile uses the same cascading rules as in CSS2. Specifically:

  1. The MP-UA SHALL assign values as described in CSS2 ([CSS2] Section 6.1).
  2. The MP-UA SHALL support inheritance as described in CSS2 ([CSS2] Section 6.2).
  3. The MP-UA SHALL support the CSS2 @import rules as specified in CSS2 ([CSS2] Section 6.3).
  4. The MP-UA SHALL support author originating style sheets. The MP-UA MAY support user or user-agent originating style sheets ([CSS2] Section 6.4).
  5. The MP-UA SHALL support all CSS2 cascading rules ([CSS2] Sections 6.4.1-6.4.4).

7. Media Types

A CSS Mobile Profile conforming user agent MUST be able to process media-dependent style sheets as specified in CSS2 ([CSS2] Section 7). Specifically:

  1. The MP-UA SHALL support the CSS2 @media rules as specified in CSS2 ([CSS2] Section 7).
  2. The MP-UA SHALL accept and process style sheets that target the handheld media type.
  3. The MP-UA SHALL accept and process style sheets that target the all media type.
  4. The MP-UA SHALL accept style sheets that contain other (non-handheld) media-dependent style sheets.
  5. The MP-UA MAY process other media types (such as screen or print).

The MP-UA is not required to satisfy the CSS2 conformance statement pertaining to the handheld media type (see [CSS2] Section 7.3.1); the MP-UA need only satisfy the conformance statements in this specification.

Appendix A. References

[CSS2]
"Cascading Style Sheets, level 2", Bos B., et al., 12 May 1998. Available at http://www.w3.org/TR/REC-CSS2/.
[CSS1]
"Cascading Style Sheets, level 1", Lie H.W. and Bos B., 17 December 1996, revised 11 Jan 1999. Available at http://www.w3.org/TR/REC-CSS1.
[HTML4]
"HTML 4.01 Specification", D. Raggett, A. Le Hors, I. Jacobs, 24 December 1999. Available at http://www.w3.org/TR/REC-html40/.
[RFC2119]
"Key words for use in RFCs to Indicate Requirement Levels", S. Bradner, March 1997. Available at http://www.ietf.org/rfc/rfc2119.txt.