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

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

Exclusive tips, how-tos, news and comment

Receive monthly updates on the world of mobile dev.

Other Products

Market leading device intelligence for the web, app and MNO ecosystems
DeviceAtlas - Device Intelligence

Real-time identification of fraudulent and misrepresented traffic
DeviceAssure - Device Verification

A free tool for developers, designers and marketers to test website performance
mobiReady - Evaluate your websites’ mobile readiness

© 2024 DeviceAtlas Limited. All rights reserved.

This is a website of DeviceAtlas Limited, a private company limited by shares, incorporated and registered in the Republic of Ireland with registered number 398040 and registered office at 6th Floor, 2 Grand Canal Square, Dublin 2, Ireland