CSS3 Properties, Values & Browser Support

Posted on February 10, 2010 by Estelle Weyl

CSS Properties Index

Below is every most CSS3 Properties, all the possible values for that property, and the support for each property value from grade-A browsers

This grid does not include animation, tranforms, grids, columns, layouts or templates. I have a separate post for CSS3 Background Properties and CSS3 border properties. Those are all coming soon. Sorry for the slow download, but this table is over 8000 lines worth of HTML. I am breaking this out into smaller, related sections. I’ll be posting those at my new site. And, yes, I know this table breaks the layout of the page. This whole blog theme is ugly, but some of the content hopefully makes this eyesore worth it 😉 The new site should be ready soon: and way prettier!

Property CSS 2.1 Default Value ie6 ie7 ie7comp ie8 FF3 Saf OP Notes
Property CSS 2.1 Default Value ie6 ie7 ie7comp ie8 FF3 Saf OP  
azimuth Audio center aural  
angle (270deg)    
left-side | far-left | left | center-left | center | center-right | right | far-right | right-side
behind | leftwards | rightwards
inherit    
background CSS2.1/CSS3 
body {
    background-color: transparent;
    background-position: 0% 0%;
    background-size: auto auto;
    background-repeat: repeat repeat;
    background-clip: border-box;
    background-origin: padding-box;
    background-attachment: scroll;
    background-image: none; }
√ √ √ √ √ √ √ see individual background properties below
background CSS3                
background-attachment CSS2.1 Δ Δ Δ √ √ √ √  
scroll default Δ Δ Δ √ √ √ √  
fixed   Χ Χ Χ √ √ √ √  
inherit   √ √ √ √ √ √ √  
local not in spec   Δ Δ Δ Χ Χ Χ Χ  
background-break not in spec NO LONGER IN CSS3 Spec Χ Χ Χ Χ        
background-clip CSS3           –moz– -webkit   Webkit uses both -webkit-border and -webkit-border-box. syntax may change.
border-box default           border    
padding-box             padding    
content-box not in spec           content    
background-color CSS2.1/CSS3   √ √ √ √ √ √ √  
rgb()     Δ Δ √ √ √ √ √  
#FFFFFF     √ √ √ √ √ √ √  
colorName     Δ √ √ √ √ √ √  
transparent default   Δ √ √ √ √ √ √  
inherit     √ √ √ √ √ √ √  
rgba() CSS3   filter √ √ Χ  
background-image CSS2.1 not inherited √ √ √ √ √ √ √  
inherit     Δ Δ Δ √ √ √ √  
none default   √ √ √ √ √ √ √  
url     √ √ √ √ √ √ √  
url, url CSS3   Χ Χ Χ Χ Χ √ Χ  
background-origin CSS3           –moz– -webkit   mozilla and webkit ahve support, but use differnt value terms
border-box             border border  
padding-box default           padding padding  
content-box             content content  
background-position CSS2.1 0% 0% √ √ √ √ √ √ √  
left | top | right | bottom | center     √ √ √ √ √ √ √  
inherit     √ √ √ √ √ √ √  
px     √ √ √ √ √ √ √  
%     √ √ √ √ √ √ √  
background-position-x CSS3   √ √ √ √ Χ √ Χ  
backgroun-position-y CSS3   √ √ √ √ Χ √ Χ  
background-repeat CSS2.1   √ √ √ √ √ √ √  
inherit     √ √ √ √ √ √ √  
repeat default   √ √ √ √ √ √ √  
no-repeat     √ √ √ √ √ √ √  
repeat-x / repeat-y     √ √ √ √ √ √ √  
background-size             –moz– 3.6 -webkit
3		 -o-9.5  
auto – actual size of image default                  
cover – scale to cover entire box                    
contain – scale to fit inside box                    
widthLength heightLength                    
block-progression CSS3 inherited                
tb default                  
lr                    
rl                    

border

border-bottom | border-left | border-right | border-top

 CSS2.1 medium none (current color) Δ Δ Δ √ √ √ √ border-width || border-style || border-color
border-color

border-bottom-color | border-left-color | border-right-color | border-top-color

 CSS2.1 (current color) √ √ √ √ √ √ √  
rgb()     Δ Δ Δ √ √ √ √  
#CCCCCC     √ √ √ √ √ √ √  
colorName     Δ √ √ √ √ √ √  
transparent     Χ Δ Δ √ √ √ √  
inherit     √ √ √ √ √ √ √  
rgba()     √ √ √ √ Δ Δ √  
border-style

border-bottom-style
border-left-style
border-right-style |
border-top-style

 CSS2.1   √ √ √ √ √ √ √  
dashed     √ √ √ √ √ √ √  
dotted     √ √ √ √ √ √ √  
double     √ √ √ √ √ √ √  
groove     √ √ √ √ √ Δ √  
hidden     Χ Χ Χ √ √ √ √  
inset     √ √ √ √ √ Δ √  
none default   √ √ √ √ √ √ √  
outset     Δ Δ Δ √ √ Δ √  
ridge     √ √ √ √ √ Δ √  
solid     √ √ √ √ √ √ √  

border-width

border-bottom-width

border-left-width
border-right-width
border-top-width

 CSS2.1 medium Δ Δ Δ √ √ √ √  
thin     √ √ √ √ √ √ √  
medium     √ √ √ √ √ √ √  
thick     √ √ √ √ √ √ √  
length (3px)     √ √ √ √ √ √ √  
!!!!!border-break CSS3                  
border-width                    
border-style                    
color                    
close                    
border-collapse CSS2.1   Δ Δ Δ √ √ √ √ 'table' and 'inline-table' elements
collapse     Δ Δ Δ √ √ √ √  
separate default   √ √ √ √ √ √ √  
inherit     √ √ √ √ √ √ √  
border-image CSS3 shorthand         –moz–      
image             3.5      
border-image-outset CSS3           –moz–      
length {1,4}                    
border-image-repeat CSS3           –moz–      
stretch default                  
repeat                    
round                    
space                    
border-image-slice CSS3           –moz–      
length{1,4} default=100%                  
fill                    
border-image-source CSS3           –moz–      
url()                    
none default                  
border-image-width CSS3           –moz–      
length ({1,4}                    
auto                    
border-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-top-left-radius		 CSS3 Note: Firefox sytax is wrong:
-moz-border-radius-topleft,
-moz-border-radius-topright,
-moz-border-radius-bottomright,
-moz-border-radius-bottomleft		         -moz- -webkit- -o- values before slash = horizontal radius, values after the slash = vertical radius.
length                    
box-shadow CSS3 currently removed from spec. Will likely come back         –moz– -webkit-    
inset lngth lngth lngth color                    
lngth lngth lngth color                    
none                    
(mulitple shadows)             3.5 4.0    
border-spacing CSS2.1 0 Χ Χ Χ √ √ √ √ 'table' and 'inline-table' elements. Used with {border-collapse: separate;}
length     Χ Χ Χ √ √ √ √
length length     Χ Χ Χ √ √ √ √
inherit     Χ Χ Χ √ √ √ √
bottom CSS2.1   Δ √ √ √ √ √ √  
length     Δ √ √ √ √ √ √  
percent     Δ √ √ √ √ √ √  
auto     Δ √ √ √ √ √ √  
box-decoration-break CSS3 not inherited               handling of border when a box is broken by a page, col break, etc.
clone                  
slice default                
caption-side CSS2.1   Χ Χ Χ √ √ √ √  
top default   √ √ √ √ √ √ √  
bottom     Χ Χ Χ √ √ √ √  
left / right not in spec   Χ Χ Χ Δ √ Χ Χ  
clear CSS2.1   √ √ √ √ √ √ √  
both     √ √ √ √ √ √ √  
left     √ √ √ √ √ √ √  
right     √ √ √ √ √ √ √  
none default   √ √ √ √ √ √ √  
clip CSS2.1   Χ Χ Χ √ √ √ √ on absolutely positioned elements
rect(T, R, B, L)     Χ Χ Χ √ √ √ √  
auto default   √ √ √ √ √ √ √  
inherit     Χ Χ Χ √ √ √ √  
color CSS2.1 depends on element and browser √ √ √ √ √ √ √  
rgb()     Δ Δ √ √ √ √ √  
#CCCCCC     √ √ √ √ √ √ √  
colorName     √ √ √ √ √ √ √  
transparent     Χ Χ Χ Χ √ √ Χ  
inherit     √ √ √ √ √ √ √  
rgba()     Χ Χ Δ Δ Δ Δ Χ  
content
:before & :after 		CSS2.1   Χ Χ Χ √ √ √ √  
none     Χ Χ Χ √ √ Χ √  
normal default   Χ Χ Χ √ √ Χ Χ  
url()     Χ Χ Χ √ √ √ √  
string     Χ Χ Χ √ √ √ √  
open-quote / close-quote     Χ Χ Χ √ √ Χ Δ  
no-open-quote / no-close-quote     Χ Χ Χ √ √ Χ √  
attr(x)     Χ Χ Χ √ √ √ √  
counter     Χ Χ Χ √ √ √ √  
inherit     Χ Χ Χ √ √ √ √  
counter-increment CSS2.1   Χ Χ Χ √ √ √ √  
counterName int     Χ Χ Χ √ √ √ √  
none default   Χ Χ Χ √ √ √ √  
inherit     Χ Χ Χ √ √ √ √  
counter-reset CSS2.1   Χ Χ Χ √ √ √ √  
counterName int     Χ Χ Χ √ √ √ √  
none default   Χ Χ Χ √ √ √ √  
inherit     Χ Χ Χ √ √ √ √  

cue

cue-after

cue-before

 CSS2.1   aural  
url(x.wav)      
none default    
inherit      
cursor CSS2.1   √ √ √ √ √ √ √  
url(x.cur)     √ √ √ √ Χ √ Χ  
auto default   √ √ √ √ √ √ √  
crosshair     √ √ √ √ √ √ √  
default     √ √ √ √ √ √ √  
pointer     √ √ √ √ √ √ √  
move     √ √ √ √ Δ √ √  
e-resize     √ √ √ √ √ √ √  
ne-resize     √ √ √ √ √ √ √  
nw-resize     √ √ √ √ √ √ √  
n-resize     √ √ √ √ √ √ √  
se-resize     √ √ √ √ √ √ √  
sw-resize     √ √ √ √ √ √ √  
s-resize     √ √ √ √ √ √ √  
w-resize     √ √ √ √ √ √ √  
text     √ √ √ √ √ √ √  
wait     √ √ √ √ √ √ √  
progress     √ √ √ √ √ √ √  
help     √ √ √ √ √ √ √  
inherit     √ √ √ √ √ √ √  
direction CSS2.1/CSS3 inherited       √        
ltr default   √ √ √ √ √ √ √  
rtl                    
inherit     √ √ √ √ √ √ √  
display CSS2.1   √ √ √ √ √ √ √  
inline     √ √ √ √ √ √ √  
block     √ √ √ √ √ √ √  
list-item     √ √ √ √ √ √ √  
run-in     Δ Δ Δ √     √  
inline-block     Δ Δ Δ √ √ √ √  
table     Δ Δ Δ √ √ √ √  
inline-table             3.0      
table-row-group                    
table-header-group                    
table-footer-group                    
table-row     Δ Δ Δ √ √   √  
table-column-group     Δ Δ Δ √ √   √  
table-row     Δ Δ Δ √ √   √  
table-column     Δ Δ Δ √ √   √  
table-cell     Δ Δ Δ √ √   √  
table-caption     Δ Δ Δ √ √   √  
none     √ √ √ √ √ √ √  
inherit     √ √ √ √ √ √ √  
ruby CSS3                  
ruby-base CSS3                  
ruby-text CSS3                  
ruby-base-group CSS3                  
ruby-text-group CSS3                  
compact CSS2.0/CSS3                  
elevation CSS2.1 level aural
angle (270deg)    
below | level | above | higher | lower    
inherit    
empty-cells CSS2.1 show Χ Χ Χ √ √ √ √ sets whether or not to show empty cells in a table when "separated
show     Χ Χ Χ √ √ √ √ Borders are drawn around empty cells
hide Default   Χ Χ Χ √ √ √ √ No borders are drawn around empty cells
inherit     Χ Χ Χ √ √ √ √  
float CSS2.1 none √ √ √ √ √ √ √  
left     √ √ √ √ √ √ √  
right     √ √ √ √ √ √ √  
none     √ √ √ √ √ √ √  
inherit     √ √ √ √ √ √ √  
font CSS2.1 depends on element and browser       √        
fStyle fVariant fWeight fSize/lineHeight fFamily                    
caption              
icon            
menu            
message-box            
small-caption            
status-bar            
inherit            
font-effect CSS3 no longer in spec                
font-emphasize CSS3 no longer in spec                
font-family CSS2.1 depends on element and browser       √        
font-1, font-2, generic                    
singleFontFamily                    
inherit                    
font-size CSS2.1 medium √ √ √ √ √ √ √  
xx-small | x-small | small | medium | large | x-large | xx-large     √ √ √ √ √ √ √  
larger | smaller     √ √ √ √ √ √ √  
length (12px)     √ √ √ √ √ √ √  
percent (108%)     √ √ √ √ √ √ √  
inherit     √ √ √ √ √ √ √  
font-size-adjust CSS2/CSS3 sandbox         √      
none default           √ √ √  
inherit             √      
length             √      
font-stretch CSS3 sandbox                
normal default   √ √ √ √ √ √ √  
wider                    
narrower                    
ultra-condensed / ultra-expanded                    
extra-condensed/ extra-expanded                    
condensed / expanded                    
semi-condensed / semi-expanded                    
inherit                    
font-style CSS2.1 normal √ √ √ √ √ √ √  
normal     √ √ √ √ √ √ √  
italic     Δ Δ Δ Δ Δ Δ Δ  
oblique     Δ Δ Δ Δ Δ Δ Δ  
inherit     √ √ √ √ √ √ √  
font-variant CSS2.1 normal √ √ √ √ √ √ √  
normal     √ √ √ √ √ √ √  
small-caps     √ √ √ √ √ √ √  
inherit     √ √ √ √ √ √ √  
font-weight CSS2.1 normal √ √ √ √ √ √ √  
normal     √ √ √ √ √ √ √  
bold     √ √ √ √ √ √ √  
bolder             √ √    
lighter             √ √    
100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900   couldn’t fully test because i don’t have "light" fonts         √ √    
inherit     √ √ √ √ √ √ √  
hanging-punctuation CSS3                  
none                    
start | end                    
end-edge                    
height CSS2.1 auto Δ     √ √ √ √  
length / percent     Δ     √ √ √ √  
auto     Δ     √ √ √ √  
inherit     Δ     √ √ √ √  
left CSS2.1 auto √ √ √ √ √ √ √  
length / percent     √ √ √ √ √ √ √  
auto     √ √ √ √ √ √ √  
inherit     √ √ √ √ √ √ √  
letter-spacing CSS2.1 inherited √ √ √ √ √ √ √  
length (3px)     √ √ √ √ √ √ √  
normal default   √ √ Δ √ √ √ √  
inherit     √ √ √ √ √ √ √  
line-height CSS2.1 normal √ √ √ √ √ √ √  
normal default   √ √ √ √ √ √ √  
number (2)     √ √ √ √ √ √ √  
length (3px)     √ √ √ √ √ √ √  
percent     √ √ √ √ √ √ √  
inherit     √ √ √ √ √ √ √  
line-stacking CSS3 shorthand                
strategy ruby shift (see below)                    
line-stacking-strategy CSS3                  
inline-line-height default                  
block-line-height                    
max-height                    
grid-height                    
line-stacking-ruby CSS3 inherited                
exclude-ruby default                  
include-ruby                    
line-stacking-shift CSS3 inherited                
consider-shifts default                  
disregard-shifts                    
list-style CSS2.1 depending on individual properties √ √ √ √ √ √ √  
type position image     √ √ √ √ √ √ √  
inherit     √ √ √ √ √ √ √  
list-style-image CSS2.1 inherited       √        
url()                    
none default                  
inherit                    
list-style-position CSS2.1 outside       √        
inside                    
outside                    
inherit                    
list-style-type CSS2.1 disc sandbox √ √ √ √ √ √ √  
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     √ √ √ √ √ √ √  
asterisks CSS3                  
box CSS3                  
check CSS3                  
diamond CSS3                  
footnotes CSS3                  
hyphen CSS3                  
cjk-ideographic CSS3                  
hiragana CSS3                  
katakana CSS3                  
hiragana-iroha CSS3                  
katakana-iroha CSS3                  

margin

margin-bottom
margin-left
margin-right
margin-top

 CSS2.1 depends on element and browser Δ Δ Δ √ √ √ √  
length (3px)     Δ Δ Δ √ √ √ √  
inherit     Δ Δ Δ √ √ √ √  
marquee-direction CSS3                  
forward                    
reverse                    
marquee-play-count CSS3                  
infinite                    
number                    
marquee-speed CSS3                  
slow                    
normal                    
fast                    
marquee-style CSS3                  
scroll                    
slide                    
alternate                    
max-height CSS2.1 none Χ     √ √ √ √  
length / percent     Χ     √ √ √ √  
none     Χ     √ √ √ √  
inherit     Χ     √ √ √ √  
max-width CSS2.1 none Χ     √ √ √ √  
length / percent     Χ     √ √ √ √  
none     Χ     √ √ √ √  
inherit     Χ     √ √ √ √  
min-height CSS2.1 0 Χ     √ √ √ √  
length / percent     Χ     √ √ √ √  
inherit     Χ     √ √ √ √  
min-width CSS2.1 0 Χ     √ √ √ √  
length / percent     Χ     √ √ √ √  
inherit     Χ     √ √ √ √  
opacity     IE has proprietary filter to simulate effect: filter: alpha(opacity=xx)     10  
inherit         10  
(number)         10  
orphans CSS2.1 2 Χ Χ Χ √ Χ Χ √  
integer     Χ Χ Χ √ Χ Χ √  
inherit     Χ Χ Χ √ Χ Χ √  
outline CSS2.1 depending on individual properties Χ Χ Χ √ √ √ √ see individual properties below
color style width     Χ Χ Χ √ √ √ √  
none     Χ Χ Χ √ √ √ √  
inherit     Χ Χ Χ √ √ √ √  
outline-color CSS2.1 invert Χ Χ Χ √ √ √ √  
rgb / #fff / colorName     Χ Χ Χ          
invert     Χ Χ Χ          
inherit     Χ Χ Χ          
outline-offset CSS3                  
inherit                    
(length)                    
outline-style CSS2.1 none Χ Χ Χ √ √ √ √  
dashed     Χ Χ Χ √ √ √ √  
dotted     Χ Χ Χ √ √ √ √  
double     Χ Χ Χ √ √ √ √  
groove     Χ Χ Χ √ √ √ √  
hidden     Χ Χ Χ √ √ √ √  
inset     Χ Χ Χ √ √ √ √  
none     Χ Χ Χ √ √ √ √  
outset     Χ Χ Χ √ √ √ √  
ridge     Χ Χ Χ √ √ √ √  
solid     Χ Χ Χ √ √ √ √  
inherit     Χ Χ Χ √ √ √ √  
outline-width CSS2.1 medium Χ Χ Χ √ √ √ √  
thin     Χ Χ Χ √ √ √ √  
medium     Χ Χ Χ √ √ √ √  
thick     Χ Χ Χ √ √ √ √  
length (3px)     Χ Χ Χ √ √ √ √  
inherit     Χ Χ Χ √ √ √ √  
overflow CSS2.1 depending on individual properties √ √ √ √ √ √ √  
visible     Δ √ √ √ √ √ √  
hidden     √ √ √ √ √ √ √  
scroll     √ √ √ √ √ √ √  
auto     √ √ √ √ √ √ √  
inherit     √ √ √ √ √ √ √  
no-display CSS3 sandbox                
no-content CSS3 sandbox                
overflow-style CSS3                  
auto                    
marquee-line                    
marquee-block CSS3                  
overflow-x CSS3   -ms- -ms- -ms-          
overflow-y CSS3   -ms- -ms- -ms-          

padding

padding-bottom
padding-left
padding-right
padding-top

 CSS2.1 depends on element and browser Δ Δ Δ √ √ √ √  
length (3px)     Δ Δ Δ √ √ √ √  
inherit     √ √ √ √ √ √ √  
page 2.0 auto                
identifier                    
auto                    
page-break-after CSS2.1 auto √ √ √ √ √ √ √ not inherited
always     √ √ √ √ √ √ √ force a page break after the element
auto                   page break where it would normally break
left             force page breaks so that next page is a left page
right           force page breaks so that next page is a right page
avoid                   Avoid a page break after the element
page-break-before CSS2.1 auto √ √ √ √ √ √ √ not inherited
always     √ √ √ √ √ √ √ force a page break after the element
auto                   page break where it would normally break
left             force page breaks so that next page is a left page
right           force page breaks so that next page is a right page
avoid                   Avoid a page break after the element
page-break-inside CSS2.1 auto               not inherited
avoid                   Avoid a page break inside the element
auto                   page break where it would normally break
pause CSS2.1 implementation dependent aural Shorthand for pause-before pause after
time (in ms)      
%      
pause-after CSS2.1 implementation dependent  
time (in ms)     time in milliseconds
%     pause the % of time it would take to say a word (>100% ok)
pause-before CSS2.1 implementation dependent  
time (in ms)      
%      
pitch CSS2.1 medium  
Hz / kHz      
x-low | low | medium | high | x-high      
pitch-range CSS2.1 50  
0 or more      
     
     
play-during CSS2.1 auto  
url(x.wav)      
url(x.wav) mix      
url(x.wav) repeat      
auto      
none      
position CSS2.1 static √ √ √ √ √ √ √  
absolute     √ √ √ √ √ √ √  
fixed     Χ Δ Δ √ √ Δ √  
relative     Δ Δ Δ √ √ √ √  
static     √ √ √ √ √ √ √  
punctuation-trim CSS3 inherited                
none default                  
start | end                
adjacent              
quotes CSS2.1 implementation dependent Χ Χ Χ √ 3.5   √  
string (‘”’ ‘“’ "’" "‘")     Χ Χ Χ          
none     Χ Χ Χ          
inherit     Χ Χ Χ          
richness CSS2.1 50 aural
number (50)    
inherit    
right CSS2.1 auto Δ √ √ √ √ √ √  
length / percent     Δ √ √ √ √ √ √  
auto     Δ √ √ √ √ √ √  
inherit     Δ √ √ √ √ √ √  
size 2.0 auto                
length (8.5in 11in)                    
portrait / landscape                    
auto                    
speak CSS2.1 normal aural
normal      
none      
spell-out      
inherit      
speak-header CSS2.1 once  
once      
always      
inherit      
speak-numeral CSS2.1 continuous  
digits      
continuous      
inherit      
speak-punctuation CSS2.1 none  
code      
none      
inherit      
speech-rate CSS2.1 medium  
number      
x-slow | slow | medium | fast | x-fast | faster | slower      
inherit      
stress CSS2.1 50  
number      
inherit      
table-layout CSS2.1 auto √ √ √ √ √ √ √7  
auto     √ √ √ √ √ √ √  
fixed     √ √ √ √ √ √ √  
inherit     √ √ √ √ √ √ √  
text-align CSS2.1 start √ √ √ √ √ √ √  
left     √ √ √ √ √ √ √  
right     √ √ √ √ √ √ √  
center     √ √ √ √ √ √ √  
justify     √ √ √ √ √ √ √  
inherit     √ √ √ √ √ √ √  
start | end CSS3           3.6      
(char)                    
text-align-last CSS3   –ms– –ms– –ms–          
start | end                    
left | right | center                    
justify                    
text-decoration CSS2.1 none √ √ √ √ √ √ √  
none     √ √ √ √ √ √ √  
underline     √ √ √ √ √ √ √  
overline     √ √ √ √ √ √ √  
line-through     √ √ √ √ √ √ √  
blink     √ √ √ √ √ √ √  
inherit     √ √ √ √ √ √ √  
text-emphasis CSS3 inherited                
                     
none default   √ √ √ √ √ √ √  
accent | dot | circle | disc                    
before | after                    
text-height CSS3                  
auto                    
text-size                    
font-size                    
max-size                    
text-indent CSS2.1 inherited √ √ √ √ √ √ √  
length / percent default = 0   √ √ √ √ √ √ √  
inherit     √ √ √ √ √ √ √  
hanging CSS3                  
text-justify CSS3   -ms- -ms- -ms- -ms-        
auto                    
inter-word                    
inter-ideograph | inter-cluster                    
distribute                    
kashida | tibetan                    
text-outline CSS3 inherited                
none default                  
color                    
length                    
text-overflow CSS3.X not in the spec yet -ms- -ms- -ms- -ms-        
string | clip | ellipses                    
text-shadow 2.0/3 inherited Χ Χ Χ Χ √ √ √ Not in the 2.1 spec
color leftOffset topOffset blurRadius 2.0/3   Χ Χ Χ Χ √ √- √ text-shadow sandbox
multiple shadows CSS3   Χ Χ Χ Χ √ √- 10  
none default                  
text-transform CSS2.1 none √ √ √ √ √ √ √ text-transform standbox
capitalize     √ √ √ √ √ √ √  
uppercase     √ √ √ √ √ √ √  
lowercase     √ √ √ √ √ √ √  
none     √ √ √ √ √ √ √  
inherit     √ √ √ √ √ √ √  
text-wrap CSS3                  
normal     √ √ √ √ √ √ √  
unrestricted                    
none                    
suppress                    
top CSS2.1 auto √ √ √ √ √ √ √  
length / percent     √ √ √ √ √ √ √  
auto     √ √ √ √ √ √ √  
inherit     √ √ √ √ √ √ √  
unicode-bidi CSS2.1 normal √ √ √ √        
normal     √ √ √ √ √ √ √  
embed     √ √ √ √        
bidi-override     √ √ √ √        
inherit                    
vertical-align CSS2.1/CSS3 baseline √ √ √ √ √ √ √ inline-level and table-cell elements only
baseline     Χ √; √ √ Χ Δ √  
sub     Δ Δ Δ √ √ √ √  
super     Δ Δ Δ √ √ √ √  
top     √ √ √ √ √ √ √  
text-top     √ √ √ √ √ √ √  
middle     Δ √ √ Δ √ √ √  
bottom     √ √ √ √ √ √ √  
text-bottom     Δ Δ Δ √ √ √ Δ  
percent     Δ Δ Δ √ √ √ √  
length (3px)     Δ Δ Δ √ √ √ √  
inherit     √ √ √ √ √ √ √  
auto                    
central                    
use-script CSS3                  
visibility CSS2.1 visible √ √ √ √ √ √ √  
visible     √ √ √ √ √ √ √  
hidden     Δ Δ Δ √ √ √ √  
collapse     Χ Χ Χ √ √ Δ Δ collapse in tables, hidden elsewhere
inherit     √ √ √ √ √ √ √  
voice-family CSS2.1 implementation dependent aural
specificVoice, genericVoice    
inherit    
volume CSS2.1 medium
number / percent    
silent | x-soft | soft | medium | loud | x-loud    
inherit    
white-space CSS2.1 normal √ √ √ √ √ √ √  
normal test   Δ Δ Δ √ √ √ √  
pre test   √ √ √ √ √ √ √  
nowrap     √ √ √ √ √ √ √  
pre-wrap     Χ Χ Χ √ √ √ √  
pre-line     Χ Χ Χ √ Χ √ √  
inherit     √ √ √ √ √ √ √  
white-space-collapse CSS3                  
preserve                    
collapse                    
preserve-breaks                    
discard                    
widows CSS2.1 2 Χ Χ Χ √ Χ Χ √  
integer     Χ Χ Χ √ Χ Χ √  
inherit     Χ Χ Χ √ Χ Χ √  
width CSS2.1 auto Δ Δ Δ √ √ √ √  
length / percent     Δ Δ Δ √ √ √ √  
auto     Δ Δ Δ √ √ √ √  
inherit     Δ Δ Δ √ √ √ √  
word-break CSS3   -ms- -ms- -ms-          
normal     √ √ √ √ √ √ √  
keep-all                    
loose                    
break-strict                    
break-all                    
word-spacing CSS2.1 inherited √ √ √ √ √ √ √  
length (3px)     Δ Δ Δ √ √ √ √  
normal default   √ √ √ √ √ √ √  
word-wrap CSS3   -ms- -ms- -ms-   3.5      
normal default   √ √ √ √ √ √ √  
break-word                    
writing-mode   Shorthand for direction and block progression               IE8 also supports bottom to top modes
lr-tb                  
rl-tb                  
tb-rl                  
tb-lr                  
z-index CSS2.1 auto Δ Δ Δ √ √ √ √ applies to positioned elements
integer (3)     Δ Δ Δ √ √ √ √  
auto     √ √ √ √ √ √ √  

 

Notes

  • Level of support for property is based on CSS2.1. So, if a browser supports all of CSS2.1 but not CSS3, they will get be listed as supporting the property, unless it’s a purely CSS3 property. If there is a browser specific prefix to make the CSS3 work, it passes as "almost good."
  • Browsers include:
    (if it passed originally in older browser, i did not retest)

    • IE6
    • IE7
    • IE7 compatibility mode
    • IE8
    • Firefox 3, 3.5, 3.6
    • Safari 3.2 and 4 beta
    • Opera 9.64 and 10
  • There are a lot of hidden title attributes in this page. When you hover over the deltas and underlined table cells, in standards compliant browsers, informaiton on how the browsers fails to comply with standards should be displayed.
  • This is still a work in progress, but it’s pretty far along, so I am posting. It will be updated soon and often until done… then I’ll remove this bullet point.

Key

Haven’t run tests yet Fails Some Support Almost Compliant Compliant Aural (will not support) Print
             
will test soon   may add links to tests may add link to tests   will unlikely be supporting will add support soon
This entry was posted in Browsers, CSS (including hacks), Web Development. Bookmark the permalink.

4 Responses to CSS3 Properties, Values & Browser Support

  1. Lee Kowalkowski says:
    February 19, 2010 at 8:08 am

    That’s exceptional! Would you like to offer a downloadable version?

    I’m curious to know why IE has deltas for display:inline-block, but these cells have no titles yet.

    Reply
  2. Estelle Weyl says:
    February 19, 2010 at 1:20 pm

    If i recall correctly, it is because they don’t support inline-block on elements that are natively block — it only works on natively inline elements. THere is a hack to enable it by setting hasLayout.

    I will be making a pdf of the whole thing when it’s done, but i still have too many holes, and a lot of CSS modules to add.

    Reply
  3. Jason says:
    February 23, 2010 at 7:53 am

    thanks for the great list.. however it’s not rendering in ie7 :-p

    Reply
  4. jpvincent says:
    February 24, 2010 at 1:00 am

    that’s an impressive job
    you’re replacing quirksmode in my bookmarks 🙂

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *