This tables summarizes the differences between the different flavours of CSS that are in use and is a useful reference for developers who are making the transition from from PC web design to mobile web design.
Version 0.9 (Draft), 29 Jan 2007
Jo Rabin
Some references are works in progress and are subject to change
| Group | Property | CSS 2.1 [1] | CSS-MP [2] | WCSS [3] | CSS 1 [4] |
|---|---|---|---|---|---|
| Access Keys | -wap-accesskey | (not specified) | (same) | none |<KeyCombinationList> | inherit | |
| at-rules | @charset | (supported) | (same) | (not specified) | |
| @import | (supported) | (same) | |||
| @media | (supported) | handheld | all | handheld | all | (not specified) | |
| @page | (supported) | (optional) | (not specified) | (not specified) | |
| Box Model | border | [<border-width> || <border-style> || ‘border-top-color’ ] | inherit | (same) | (same) | <border-bottom-width> || <border-style> || <color> |
| border-color | [<color> | transparent ]{1,4} | inherit | (same) | (makes inherit optional) | (omits inherit) | |
| border-style | <border-style>{1,4} | inherit | (same) | (makes inherit optional) | (omits inherit) | |
| border-top, border-right, border-bottom, border-left | [<border-width> || <border-style> || ‘border-top-color’ ] | inherit | (same) | (same) | <border-bottom-width> || <border-style> || <color> | |
| border-top-color, border-right-color, border-bottom-color, border-left-color | <color> | transparent | inherit | (same) | (makes inherit optional) | (omits inherit) | |
| border-top-style, border-right-style, border-bottom-style, border-left-style | none | solid | dashed | dotted | hidden | double | groove | ridge | inset | outset | inherit | none | solid | dashed | dotted | inherit | none | solid | dashed | dotted | hidden | double | groove | ridge | inset | outset | inherit | none | dotted | dashed | solid | double | groove | ridge | inset | outset | |
| border-width | <border-width>{1,4} | inherit | (same) | (makes inherit optional) | (omits inherit) | |
| border-top-width, border-right-width, border-bottom-width, border-left-width | <border-width> | inherit | (same) | (makes inherit optional) | (omits inherit) | |
| margin | <margin-width>{1,4} | inherit | (same) | (makes inherit optional) | (omits inherit) | |
| margin-top, margin-right, margin-bottom, margin-left | <margin-width> | inherit | (same) | (makes inherit optional) | (omits inherit) | |
| padding | <padding-width>{1,4} | inherit | (same) | (makes inherit optional) | (omits inherit) | |
| padding, padding-top, padding-right, padding-bottom, padding-left | <padding-width> | inherit | (same) | (makes inherit optional) | (omits inherit) | |
| Color and Background | background | [‘background-color’ || ‘background-image’ || ‘background-repeat’ || ‘background-attachment’ || ‘background-position’] | inherit | (same) | (omits inherit) | |
| background-attachment | scroll | fixed | inherit | (same) | (makes inherit optional) | (omits inherit) | |
| background-color | <color> | transparent | inherit | (same) | (makes inherit optional) | (omits inherit) | |
| background-image | <uri> | none | inherit | (same) | (makes inherit optional) | (omits inherit) | |
| background-position | [[ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit | top | center | bottom | left | right | inherit | <length> | <percentage> | top | center | bottom | left | right | inherit | [<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right] | |
| background-repeat | repeat | repeat-x | repeat-y | no-repeat | inherit | (same) | (makes inherit optional) | (omits inherit) | |
| color | <color> | inherit | (same) | <color> | inherit | (omits inherit) | |
| Fonts | font | [[ ‘font-style’ || ‘font-variant’ || ‘font-weight’ ]? ‘font-size’ [ / ‘line-height’ ]? ‘font-family’ ] | caption | icon | menu | message-box | small-caption | status-bar | inherit | (same) | (same) | [<font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family> |
| font-family | [[<family-name> | <generic-family> ] [, <family-name> | <generic-family>]* ] | inherit | (same) | <generic-family> | inherit | <family-name> | (as 2.1) | |
| font-size | xx-small | x-small | small | medium | large | x-large | xxlarge | larger | smaller | inherit | <length> | <percentage> | (same) | (makes length and percentage optional) | (omits inherit) | |
| font-style | normal | italic | oblique | inherit | (same) | (same) | (omits inherit) | |
| font-variant | normal | small-caps | inherit | (same) | (same) | (omits inherit) | |
| font-weight | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit | (same) | (same) | (omits inherit) | |
| Lists and Generated Content | content | normal | none | [ <string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit | (optional) | (not specified) | (not specified) |
| counter-reset, counter-increment | [<identifier> <integer>? ]+ | none | inherit | (optional) | (not specified) | (not specified) | |
| list-style | [‘list-style-type’ || ‘list-style-position’ || ‘list-style-image’ ] | inherit | (same) | (same) | (omits inherit) | |
| list-style-image | <uri> | none | inherit | (same) | <uri> | none | inherit | (omits inherit) | |
| list-style-position | inside | outside | inherit | (optional) | (same) | (omits inherit) | |
| list-style-type | disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit | disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | inherit | (same) | (omits inherit) | |
| quotes | [<string> <string>]+ | none | inherit | (optional) | (not specified) | (not specified) | |
| Paged Media | orphans, widows | <integer> | inherit | (optional) | (not specified) | (not specified) |
| page-break-before, page-break-after | auto | always | avoid | left | right | inherit | (optional) | (not specified) | (not specified) | |
| page-break-inside | avoid | auto | inherit | (optional) | (not specified) | (not specified) | |
| Tables | border-collapse | collapse | separate | inherit | (optional) | (not specified) | (not specified) |
| border-spacing | <length> <length>? | inherit | (optional) | (not specified) | (not specified) | |
| caption-side | top | bottom | inherit | (optional) | (not specified) | (not specified) | |
| empty-cells | show | hide | inherit | (optional) | (not specified) | (not specified) | |
| table-layout | auto | fixed | inherit | (optional) | (not specified) | (not specified) | |
| Text | letter-spacing, word spacing | normal |<length> | inherit | (optional) | (not specified) | (omits inherit) |
| text-align | left | right | center | inherit | justify | (same) | (makes justify optional) | (omits inherit) | |
| text-decoration | none | [ underline || overline || line-through || blink ] | inherit | none | blink |underline | inherit | (makes inherit optional) | (omits inherit) | |
| text-indent | <length> | <percentage> | inherit | (same) | (same) | (omits inherit) | |
| text-transform | capitalize | uppercase | lowercase | none | inherit | (same) | (same) | (omits inherit) | |
| white-space | normal | pre | nowrap | pre-wrap | pre-line | inherit | (same) | normal | pre | nowrap | inherit | (omits inherit) | |
| User Interface | cursor | [[<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 | progress ] ] | inherit | (optional) | (not specified) | (not specified) |
| outline | [<‘outline-color’> || <‘outline-style’> ] | inherit | [ <‘outline-color’> || <‘outline-style’> ] | inherit | (not specified) | (not specified) | |
| outline-color | <color> | invert | inherit | (same) | (not specified) | (not specified) | |
| outline-style | <border-style> | inherit | none | solid | dashed | dotted | inherit | (not specified) | (not specified) | |
| outline-width | <border-width> | inherit | (optional) | (not specified) | (not specified) | |
| -wap-input-format | (not specified) | (same) | <format> | (not specified) | |
| -wap-input-required | (not specified) | (same) | true | false | (not specified) | |
| Visual Effects | clip | <shape> | auto | inherit | (optional) | (not specified) | (not specified) |
| overflow | visible | hidden | scroll | auto | inherit | (optional) | (not specified) | (not specified) | |
| visibility | visible | hidden | collapse | inherit | (same) | visible | hidden | collapse | inherit | (not specified) | |
| Visual Formatting | clear | left | right | both | none | inherit | (same) | (makes inherit optional) | (omits inherit) |
| direction | ltr | rtl | inherit | (optional) | (not specified) | (not specified) | |
| display | inline | block | list-item | run-in | inline-block | 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 | block | list-item | none | inherit | none | inline | block | compact | marker | inherit | block | inline | list-item | none | |
| float | left | right | none | inherit | (same) | (makes inherit optional) | (omits inherit) | |
| height | <length> | <percentage> | auto | inherit | <relative unit> | <percentage> | auto | inherit | <length> | <percentage> | auto | inherit | length | auto | |
| line-height | normal | <number> | <length> | <percentage> | inherit | (optional) | (not specified) | (omits inherit) | |
| max-height, max-width | <length> | <percentage> | none | inherit | (same) | (not specified) | (not specified) | |
| min-height, min-width | <length> | <percentage> | inherit | (same) | (not specified) | (not specified) | |
| position |
static | relative | absolute | fixed | inherit |
relative | absolute | inherit | (not specified) | (not specified) | |
| right, top, bottom, left | <length> | <percentage> | auto | inherit | <relative unit> | <percentage> | auto | inherit | (not specified) | (not specified) | |
| unicode-bidi | normal | embed | bidi-override | inherit | (optional) | (not specified) | (not specified) | |
| vertical-align | baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit | baseline | sub | super | inherit | top | middle | bottom | baseline | sub | super | text-top | text-bottom | <percentage> | <length> | inherit | none | [ underline || overline || line-through || blink ] | |
| -wap-marquee-dir | (not specified) | (same) | ltr | rtl | (not specified) | |
| -wap-marquee-loop | (not specified) | (same) | <integer> | infinite | (not specified) | |
| -wap-marquee-speed | (not specified) | (same) | slow | normal | fast | (not specified) | |
| -wap-marquee-style | (not specified) | (same) | scroll | slide | alternate | (not specified) | |
| width | <length> | <percentage> | auto | inherit | <relative unit> | <percentage> | auto | inherit | (makes inherit optional) | (omits inherit) | |
| z-index | auto | <integer> | inherit | (same) | (not specified) | (not specified) | |
| color | aqua,black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow, rgb(n, n, n), rgb(n%, n%, n%) | (same) | (omits orange) | (same) | |
| selectors | universal, type, descendant, child, first-child pseudo-classe, link pseudo-classes, dynamnic pseudo-classes, lang pseudo-class, adjacent, attribute, class, ID | (omits :hover, :lang, adjacent, attribute) | (same) | (omits universal, child, :focus, ID) | |
| pseudo elements | first-line, first-letter, before, after | (optional) | (not specified) | (not specified) |
Key
(same / adds / removes) refers to next column to left
italic means the value is optional
References
[1] Cascading Style Sheets, level 2 revision 1, CSS 2.1 Specification
W3C Working Draft 06 November 2006
[2] CSS Mobile Profile 2.0
W3C Working Draft 8 December 2006
[3] OMA Wireless CSS Specification Candidate Version 1.1 – 09 Jun 2004
[4] Cascading Style Sheets, level 1
W3C Recommendation 17 Dec 1996, revised 11 Jan 1999
