Copyright ©2002 W3C ® (MIT,
INRIA, Keio), All
Rights Reserved. W3C
liability,
trademark,
document use and
software licensing rules apply.©2001
This specification defines a subset of the Cascading Style Sheets Level 2 specification tailored to the needs and constraints of mobile devices.
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
(see summary).
This document is a revision of the
activity.WorkingCandidate Recommendation
dated 2001 DraftJanuaryOctober 24, and has incorporated suggestions received
during 29lastcallreview,CR Review, comments
by implementors,
and further deliberations of the W3C CSS Working Group.comments,
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.
For this specification to exit the CR stage, the following conditions shall be met:
There must be at least two interoperable implementations implementing 'all' the features in the Mobile Profile. An implementation can implement a superset of the features and claim conformance to the profile. For the purposes of this criterion, we define the following terms:
a row in the tables of section 3 and section 4 that has not been marked 'No' in the CSS Mobile column.
passing the respective test case(s) in the CSS test suite, or, if the implementation is not a web browser, an equivalent test. Every relevant test in the test suite should have an equivalent test created if such a UA is to be used to claim interoperability. In addition if such a UA is to be used to claim interoperability, then there must one or more additional UAs which can also pass those equivalent tests in the same way for the purpose of interoperability. The equivalent tests must be made publicly available for the purposes of peer review.
a user agent which:
A minimum of sixth months of the CR period must have elapsed. This is to ensure that enough time is given for any remaining major errors to be caught.
W3C believes this specification is stable. It can still be updated
by the workingWorking 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 group,therearesufficientthe exit criteria is met, it will progress to become Proposed Recommendation.
In either case, the duration of the Candidate Recommendation phase
will be at least six months implementations,(Oct(July 2002 - 2001AprJan 2003).2002).
Patent disclosures relevant to CSS may be found on the Working Group's public patent disclosure page.
A list of current W3C Recommendations and other technical documents can be found at http://www.w3.org/TR.
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.braille
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.
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:
As with CSS2, there are qualifications to this conformance clause:
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 accept percentage values for the
background-position property will process the first
background-position declaration and then process"writereplace that value
with the second background-position declaration. A MP-UA
that cannot over"accept percentage values will process the first
background-position declaration and ignore the second
background-position declaration.process
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 | |
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 |
E:first-line | Matches the first formatted line of an E element. | The :first-line pseudo-element | No |
E:first-letter | Matches the first formatted letter of an E element. | The :first-letter pseudo-element | No |
E:before | Matches/creates generated content before an E element. | The :before pseudo-element | No |
E:after | Matches/creates generated content after an E element. | The :after pseudo-element | No |
div.warning | The same as div[class~="warning"] | Class selectors | Yes |
E#myid | Matches any E element |
ID selectors | Yes |
The following table summarizes CSS Mobile Profile at-rule syntax.
at-rule | Function | CSS Mobile |
---|---|---|
@import | Imports an external style sheet. | Yes |
@charset | Defines character set for the style sheet. | Yes |
@media | Groups a set of style rules to apply only to one or more particular media. | Yes |
@font-face | Defines a named font-family, including for downloading. | No |
@page | Defines a (optionally named) page formatting context. | No |
@color-profile | Defines a named color-profile. | No |
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' | |
['background-color' || 'background-image' || 'background-repeat' || 'background-attachment' || 'background-position'] | inherit | see individual properties |
'background-attachment' | |
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 | [ |
see individual properties |
'border-collapse' | No | collapse | separate | inherit | collapse |
'border-color' | Yes | |
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 | [ |
see individual properties |
'border-top-color' 'border-right-color' 'border-bottom-color' 'border-left-color' | Yes | |
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 |
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:
Similarly, the CSS Mobile Profile requires that conforming user agents support the character encoding mechanisms specified in [CSS2]. Specifically:
In general, the CSS Mobile Profile uses the same cascading rules as in CSS2. Specifically:
A CSS Mobile Profile conforming user agent MUST be able to process media-dependent style sheets as specified in CSS2 ([CSS2] Section 7). Specifically:
handheld
media type.all
media type.
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.
This document derives from the CSS Level 1 and CSS level 2 Recommendations. We thank all CSS1 and CSS2 authors, editors and contributors.
We would like to thank the members of the CSS working group, especially Bert Bos, Chris Lilley, Håkon W. Lie, Tantek Çelik, Eric Meyer and L. David Baron for their direct feedback on the draft and their help on the CSS Mobile Profile Test Suite.
We would like to thank Susan Lesch, the XHTML Working Group, the XForms working group and the WAI PF group for their valuable comments on the draft.
We would like to thank the contributors on www-style@w3.org. Especially, we would like to thank Björn Höhrmann and Matthew Brealey for their comments on the draft and the Test Suite.