Copyright ©2000 W3C ® (MIT, INRIA, Keio), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply.
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 is a working draft of the CSS Mobile Profile specification. It is guaranteed to change; anyone implementing it should realize that we will not allow ourselves to be restricted by experimental implementations when deciding whether to change the specifications.
This specification is a Working Draft of the CSS Working Group (part of the Style activity) for review by W3C members and other interested parties. Publication as a Working Draft does not imply endorsement by the W3C membership, nor of members of the CSS working group. As a W3C Working Draft, this document may be updated, replaced, or obsoleted by other documents at any time. It is inappropriate to use W3C Working Drafts as reference material or to cite them as other than "work in progress".
The mailing list www-style@w3.org (see instructions) is preferred for discussion of this and other drafts in the Style area.
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 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 per the CSS2 conformance. This subject is address 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
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 should 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 specification and then "write over" that value with the second background-position specification. A MP-UA that cannot process percentage values will process the first background-position specification and ignore the second background-position specification.
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 these selectors, the CSS Mobile Profile shall support 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., and element of type E) | Type selectors | Yes |
E F | Matches any F element that is a descendent of an E element | Descendent 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-classe | 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 |
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' | <length>, auto, and inherit | <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' | <length> and inherit | <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' | <length>, auto, and inherit | <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 stylesheets as specified in CSS2 ([CSS2] Section 7). Specifically:
handheld
media type.screen
or print
), but it is not required to do so.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.