dotMobimobiThinkingmobiForgemobiReadyDeviceAtlasgoMobi
background image

Comparison of CSS 2.1, CSS MP, WCSS and CSS Level 1

Section Feature Image
Posted by Jo Rabin - 18 Jan 2007
Twitter share icon Facebook share icon Google Plus share icon

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 - 18 Jan 2007

Jo Rabin's picture

CTO at dotMobi, co-Chair of the W3C Mobile Web Best Practices Working Group, co-Organiser of MobileMonday London.

Posted by svirkki 7 years ago

This is a really escellent reference, thank you very much

------------
Serge Virkki

------------ Serge Virkki

Posted by vaganyik 7 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 6 years ago

Nice compatible table! Thank you.
--
http://voituk.kiev.ua/

-- http://voituk.kiev.ua/

Posted by kezflake 5 years ago

Fantastic reference here, just what I am looking for!

Posted by James Pearce 5 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 4 years ago

This is the place to be

This is the place to be