Comparison of CSS 2.1, CSS MP, WCSS and CSS Level 1
Posted by Jo Rabin on 18 Jan 2007
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
Posted by Jo Rabin on 18 Jan 2007
CTO at dotMobi, co-Chair of the W3C Mobile Web Best Practices Working Group, co-Organiser of MobileMonday London.
Posted by svirkki 6 years ago
This is a really escellent reference, thank you very much
------------
------------ Serge VirkkiSerge Virkki
Posted by vaganyik 5 years ago
It is quite embarrassing to mention it, but this page is practically unusable on Gecko-based browsers because the "Article Topics", "Article Types", "DotMobi news" etc. sections cover the right side of the table. If it should be my fault and I failed to notice some navigation method, I am sorry.
Posted by vadim 5 years ago
Nice compatible table! Thank you.
-- http://voituk.kiev.ua/--
http://voituk.kiev.ua/
Posted by kezflake 4 years ago
Fantastic reference here, just what I am looking for!
Posted by James Pearce 3 years ago
The tall rowspan-ning cells in the first two columns need some delineation (or vertical align) to make it clearer where they start and finish their groupings of the subsequent columns.
Also, the cool kids want to see a CSS3 column ;-)
Posted by sach 3 years ago
This is the place to be
This is the place to be