90 CSS Properties, Values and Browser Support

CSS Properties Index

Below is every CSS 2.1 Property, all the possible values for that propery, and the support for each property value from grade-A browsers

This is a work still in progress (i.e. unfinished) , but if you find a mistake, please let me know. Scroll on the table to see all the properties. Note, this was done with Opera 9.64, and FF 3.5, so I am currently updating those too. Also, if you hover over some of the yellow delta’s, some have title tags that explain how they work or fail.

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 transparent none scroll repeat 0% 0% see individual background properties below
background-attachment CSS2.1 scroll Δ Δ Δ  
scroll     Δ Δ Δ  
fixed     Χ Χ Χ  
inherit      
local CSS3   Δ Δ Δ Χ Χ Χ Χ  
background-color CSS2.1 transparent  
rgb()     Δ Δ  
#FFFFFF      
colorName     Δ  
transparent     Δ  
inherit      
rgba() CSS3   Χ Χ Χ Χ Χ  
background-image CSS2.1 none  
inherit     Δ Δ Δ  
none      
url      
url, url CSS3   Χ Χ Χ Χ Χ Χ  
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 repeat  
inherit      
repeat      
no-repeat      
repeat-x / repeat-y      

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 none  
dashed      
dotted      
double      
groove     Δ  
hidden     Χ Χ Χ  
inset     Δ  
none      
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-collapse CSS2.1 separate Δ Δ Δ 'table' and 'inline-table' elements
collapse     Δ Δ Δ  
separate      
inherit      
border-spacing CSS2.1 0 Χ Χ Χ 'table' and 'inline-table' elements
length     Χ Χ Χ  
length length     Χ Χ Χ  
inherit     Χ Χ Χ  
bottom CSS2.1 auto Δ  
length     Δ  
percent     Δ  
auto     Δ  
caption-side CSS2.1 top Χ Χ Χ  
top      
bottom     Χ Χ Χ  
left / right not in spec   Χ Χ Χ Χ Χ Χ  
clear CSS2.1 none  
both      
left      
right      
none      
clip CSS2.1 auto Χ Χ Χ on absolutely positioned elements
rect(T, R, B, L)     Χ Χ Χ  
auto      
inherit     Χ Χ Χ  
color CSS2.1 depends on element and browser  
rgb()     Δ Δ  
#CCCCCC      
colorName      
transparent     Χ Χ Χ Χ Χ  
inherit      
rgba()     Χ Χ Δ Δ Δ Δ Χ  
content
:before & :after
CSS2.1 normal Χ Χ Χ  
none     Χ Χ Χ Χ  
normal     Χ Χ Χ Χ Χ  
url()     Χ Χ Χ  
string     Χ Χ Χ  
open-quote / close-quote     Χ Χ Χ Χ Δ  
no-open-quote / no-close-quote     Χ Χ Χ Χ  
attr(x)     Χ Χ Χ  
counter     Χ Χ Χ  
inherit     Χ Χ Χ  
counter-increment CSS2.1 none Χ Χ Χ  
counterName int     Χ Χ Χ  
none     Χ Χ Χ  
inherit     Χ Χ Χ  
counter-reset CSS2.1 none Χ Χ Χ  
counterName int     Χ Χ Χ  
none     Χ Χ Χ  
inherit     Χ Χ Χ  

cue

cue-after

cue-before

CSS2.1 none aural  
url(x.wav)      
none      
inherit      
cursor CSS2.1 auto  
url(x.cur)     Χ Χ  
auto      
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 ltr (left-to-right)              
ltr      
rtl                    
inherit      
display CSS2.1 inline (depends on element)  
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-row     Δ Δ Δ    
table-column     Δ Δ Δ    
table-cell     Δ Δ Δ    
table-caption     Δ Δ Δ    
none      
inherit      
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-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-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      
height CSS2.1 auto Δ      
length / percent     Δ      
auto     Δ      
inherit     Δ      
left CSS2.1 auto  
length / percent      
auto      
inherit      
letter-spacing CSS2.1 normal  
length (3px)      
normal     Δ  
inherit      
line-height CSS2.1 normal  
normal      
number (2)      
length (3px)      
percent      
inherit      
list-style CSS2.1 depending on individual properties  
type position image      
inherit      
list-style-image CSS2.1 none              
url()                    
none                    
inherit                    
list-style-position CSS2.1 outside              
inside                    
outside                    
inherit                    
list-style-type CSS2.1 disc  
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      

margin

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

CSS2.1 depends on element and browser Δ Δ Δ  
length (3px)     Δ Δ Δ  
inherit     Δ Δ Δ  
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     Χ      
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-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      
overflow-x CSS3                  
overflow-y CSS3                  

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 / right                   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      
quotes CSS2.1 implementation dependent Χ Χ Χ      
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  
auto      
fixed      
inherit      
text-align CSS2.1 start  
left      
right      
center      
justify      
inherit      
text-decoration CSS2.1 none  
none      
underline      
overline      
line-through      
blink      
inherit      
text-indent CSS2.1 0  
length / percent      
inherit      
text-shadow 2.0 none Χ Χ Χ Χ Χ Not in the 2.1 spec
color leftOffset topOffset blurRadius 2.0   Χ Χ Χ Χ Χ √- text-shadow sandbox
multiple shadows CSS3   Χ Χ Χ Χ Χ √- Χ  
text-transform CSS2.1 none text-transform standbox
capitalize      
uppercase      
lowercase      
none      
inherit      
top CSS2.1 auto  
length / percent      
auto      
inherit      
unicode-bidi CSS2.1 normal              
normal                    
embed                    
bidi-override                    
inherit                    
vertical-align CSS2.1 baseline inline-level and table-cell elements only
baseline     Χ √; Χ Δ  
sub     Δ Δ Δ  
super     Δ Δ Δ  
top      
text-top      
middle     Δ Δ  
bottom      
text-bottom     Δ Δ Δ Δ  
percent     Δ Δ Δ  
length (3px)     Δ Δ Δ  
inherit      
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      
widows CSS2.1 2 Χ Χ Χ Χ Χ  
integer     Χ Χ Χ Χ Χ  
inherit     Χ Χ Χ Χ Χ  
width CSS2.1 auto Δ Δ Δ  
length / percent     Δ Δ Δ  
auto     Δ Δ Δ  
inherit     Δ Δ Δ  
word-spacing CSS2.1 normal  
length (3px)     Δ Δ Δ  
normal      
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.
  • Browsers include:
    • IE6
    • IE7
    • IE7 compatibility mode
    • IE8
    • Firefox 3 (some 3.5 beta)
    • Safari 3.2 (some 4 beta)
    • Opera 9.64
  • When you hover over the deltas, 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.

6 Responses to 90 CSS Properties, Values and Browser Support

  1. Rain-man says:

    clip:IE6 support clip:rect(T, R, B, L)
    on absolutely positioned and fixed elements

  2. Brian says:

    I’ve seen this information in other tables before, but never all together in a manner so well laid out as to be completely usable.

    Thanks.

  3. fantasai says:

    This is awesome. The CSSWG is planning to collect test results for the CSS2.1 test suite. Would you be interested in designing the reports? It’s going to be a lot of data, and we’d like to make it usable for web designers.

  4. vinod says:

    how about Google Chrome and IE8 Compatibility

  5. Estelle Weyl says:

    Vinod-

    IE8 is included in the listings above.
    I did not include Chrome since it uses webkit, which is the basis for Safari – which i included. Also, while Google is becoming popular on hand held devices, it has minuscule PC browser share.

  6. Andrew Perry says:

    Has this been updated for FF4 / Chrome 10 / IE9 somewhere?

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>