Blog We love to talk!

Mar Tue

The cross-browser compatibility guide – CSS rules across browsers

  •  3-27-2012

Welcome to the third part of the cross-browser compatibility guide. You can find the directory here.

CSS rules across browsers

CSS 2 and 3 know many style rules which you can use to separate the styling and markup of your website. Unfortunately, not every rule can be recognized in every browser. So again we’ll need some big tables to figure out what to use and when.

At-Rules

Rule IE 6 IE 7 IE 8 IE 9 Firefox Chrome Safari Opera
@charset Yes Yes Yes Yes Yes Yes Yes Yes
@import Yes Yes Yes Yes Yes Yes Yes Yes
@media Yes Yes Yes Yes Yes Yes Yes Yes
@page Partial Partial Yes Yes No Yes Yes Yes
@font-face Yes Yes Yes Yes Yes Yes Yes Yes
@namespace No No No Yes Yes Yes Yes Yes
@keyframes No No No No No No No No

Values and Units

In many cases CSS rules need values and / or units. And of course there are cross-browser issues.

Value / Unit IE 6 IE 7 IE 8 IE 9 Firefox Chrome Safari Opera
inherit No No Yes Yes Yes Yes Yes Yes
initial No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) No
attr() No No Yes Yes Partial Yes Yes Yes
calc() No No No Yes Yes No No No
counter() No No Yes Yes Yes Yes (-webkit) Yes (-webkit) No
url() Yes Yes Yes Yes Yes Yes Yes Yes
rgba(r,g,b,a) No No No Yes Yes Yes Yes Yes
hsl(h,s,l) No No No Yes Yes Yes Yes Yes
hsla(h,s,l,a) No No No Yes Yes Yes Yes Yes
currentColor No No No Yes Yes Yes Yes Yes
transparent Partial Yes Yes Yes Yes Yes Yes Yes
% Yes Yes Yes Yes Yes Yes Yes Yes
ch No No No Yes Yes No No No
cm Yes Yes Yes Yes Yes Yes Yes Yes
deg No No No Yes Yes Yes Yes No
dpcm No No No No Yes Yes Yes Yes
dpi No No No No Yes Yes Yes Yes
em Yes Yes Yes Yes Yes Yes Yes Yes
ex Yes Yes Yes Yes Yes Yes Yes Yes
gd No No No No No No No No
grad No No No Yes Yes Yes Yes No
Hz No No No No No No No No
in Yes Yes Yes Yes Yes Yes Yes Yes
kHz No No No No No No No No
mm Yes Yes Yes Yes Yes Yes Yes Yes
ms No No No Yes Yes Yes Yes Yes
pc Yes Yes Yes Yes Yes Yes Yes Yes
px Yes Yes Yes Yes Yes Yes Yes Yes
pt Yes Yes Yes Yes Yes Yes Yes Yes
rad No No No Yes Yes Yes Yes Yes
rem No No No Yes Yes Yes Yes Yes
s No No No Yes Yes Yes Yes Yes
turn No No No Yes No No No No
vh No No No Yes No No No No
vm No No No Yes No No No No
vw No No No Yes No No No No
image() No No No No No No No No
linear-gradient() No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) No
radial-gradient() No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) No
repeating-linear-gradient() No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) No
repeating-radial-gradient() No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) No

CSS Properties

Properties are the major part of style sheets. Again, not every property can be used across different browsers.

Property IE 6 IE 7 IE 8 IE 9 Firefox Chrome Safari Opera
animation No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) Yes (-o)
animation-delay No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) Yes (-o)
animation-direction No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) Yes (-o)
animation-duration No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) Yes (-o)
animation-fill-mode No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) Yes (-o)
animation-iteration-count No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) Yes (-o)
animation-name No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) Yes (-o)
animation-play-state No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) Yes (-o)
animation-timing-function No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) Yes (-o)
appearance No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) Yes (-o)
background Yes Yes Yes Yes Yes Yes Yes Yes
background-attachment Partial Yes Yes Yes Yes Yes Yes Yes
background-clip No No No Yes Yes Yes Yes Yes
background-color Yes Yes Yes Yes Yes Yes Yes Yes
background-image Yes Yes Yes Yes Yes Yes Yes Yes
background-origin No No No Yes Yes Yes Yes Yes
background-position Partial Partial Yes Yes Yes Yes Yes Yes
background-repeat Yes Yes Yes Yes Yes Yes Yes Yes
background-size No No No Yes Yes Yes Yes Yes
border Yes Yes Yes Yes Yes Yes Yes Yes
border-bottom Yes Yes Yes Yes Yes Yes Yes Yes
border-bottom-color Yes Yes Yes Yes Yes Yes Yes Yes
border-bottom-left-radius No No No Yes Yes Yes Yes Yes
border-bottom-right-radius No No No Yes Yes Yes Yes Yes
border-bottom-style Yes Yes Yes Yes Yes Yes Yes Yes
border-bottom-width Yes Yes Yes Yes Yes Yes Yes Yes
border-collapse Partial Partial Yes Yes Yes Yes Yes Yes
border-color Yes Yes Yes Yes Yes Yes Yes Yes
border-image No No No No No Yes Yes Yes
border-image-outset No No No No No No No No
border-image-repeat No No No No No No No No
border-image-slice No No No No No No No No
border-image-source No No No No No No No No
border-image-width No No No No No No No No
border-left Yes Yes Yes Yes Yes Yes Yes Yes
border-left-color Yes Yes Yes Yes Yes Yes Yes Yes
border-left-style Yes Yes Yes Yes Yes Yes Yes Yes
border-left-with Yes Yes Yes Yes Yes Yes Yes Yes
border-radius No No No No Yes Yes Yes Yes
border-right Yes Yes Yes Yes Yes Yes Yes Yes
border-right-color Yes Yes Yes Yes Yes Yes Yes Yes
border-right-style Yes Yes Yes Yes Yes Yes Yes Yes
border-right-width Yes Yes Yes Yes Yes Yes Yes Yes
border-spacing No No Yes Yes Yes Yes Yes Yes
border-style Partial Partial Yes Yes Yes Yes Yes Yes
border-top Yes Yes Yes Yes Yes Yes Yes Yes
border-top-color Yes Yes Yes Yes Yes Yes Yes Yes
border-top-left-radius No No No No Yes Yes Yes Yes
border-top-right-radius No No No No Yes Yes Yes Yes
border-top-style Yes Yes Yes Yes Yes Yes Yes Yes
border-top-width Yes Yes Yes Yes Yes Yes Yes Yes
border-width Yes Yes Yes Yes Yes Yes Yes Yes
box-align No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) No
box-decoration-break No No No No No No No No
box-direction No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) No
box-flex No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) No
box-flex-group No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) No
box-lines No No No No No No No No
box-ordinal-group No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) No
box-orient No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) Yes (-o)
box-pack No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) No
box-shadow No No No Yes Yes Yes Yes Yes
box-sizing No No Yes Yes Yes (-moz) Yes Yes Yes
caption-side No No Yes Yes Yes Yes Yes Yes
clear Yes Yes Yes Yes Yes Yes Yes Yes
clip Yes Yes Yes Yes Yes Yes Yes Yes
color No No No No Yes Yes Yes Yes
column-count No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) Yes (-o)
column-fill No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) No
column-gap No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) No
column-rule No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) No
column-rule-color No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) No
column-rule-style No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) No
column-rule-width No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) No
column-span No No No No No Yes (-webkit) Yes (-webkit) Yes
column-width No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) Yes
columns No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) Yes
content No No Yes Yes Yes Yes Yes Yes
counter-increment No No Yes Yes Yes Yes Yes Yes
counter-reset No No Yes Yes Yes Yes Yes Yes
cursor Yes Yes Yes Yes Yes Yes Yes Yes
direction Yes Yes Yes Yes Yes Yes Yes Yes
display Partial Partial Yes Yes Yes Yes Yes Yes
empty-cells No Partial Yes Yes Yes Yes Yes Yes
float Yes Yes Yes Yes Yes Yes Yes Yes
font Yes Yes Yes Yes Yes Yes Yes Yes
font-family Yes Yes Yes Yes Yes Yes Yes Yes
font-size Yes Yes Yes Yes Yes Yes Yes Yes
font-size-adjust No No No No Yes Yes Yes Yes
font-stretch No No No Yes Yes Yes Yes Yes
font-style Yes Yes Yes Yes Yes Yes Yes Yes
font-variant Yes Yes Yes Yes Yes Yes Yes Yes
font-weight Partial Partial Yes Yes Yes Yes Yes Yes
height Yes Yes Yes Yes Yes Yes Yes Yes
left Partial Partial Yes Yes Yes Yes Yes Yes
letter-spacing Yes Yes Yes Yes Yes Yes Yes Yes
line-height Yes Yes Yes Yes Yes Yes Yes Yes
list-style Yes Yes Yes Yes Yes Yes Yes Yes
list-style-image Yes Yes Yes Yes Yes Yes Yes Yes
list-style-position Yes Yes Yes Yes Yes Yes Yes Yes
list-style-type No Yes Yes Yes Yes Yes Yes Yes
margin Yes Yes Yes Yes Yes Yes Yes Yes
margin-bottom Yes Yes Yes Yes Yes Yes Yes Yes
margin-left Yes Yes Yes Yes Yes Yes Yes Yes
margin-right Yes Yes Yes Yes Yes Yes Yes Yes
margin-top Yes Yes Yes Yes Yes Yes Yes Yes
max-height No Yes Yes Yes Yes Yes Yes Yes
max-width No Yes Yes Yes Yes Yes Yes Yes
min-height No Yes Yes Yes Yes Yes Yes Yes
opacity No No No No Yes Yes Yes Yes
orphans No No Yes Yes No No No No
outline No No Yes Yes Yes Yes Yes Yes
outline-color No No Yes Yes Yes Yes Yes Yes
outline-offset No No No No Yes Yes Yes Yes
outline-style No No Yes Yes Yes Yes Yes Yes
outline-width No No Yes Yes Yes Yes Yes Yes
overflow Partial Yes Yes Yes Yes Yes Yes Yes
overflow-x Partial Yes Yes Yes Yes Yes Yes Yes
overflow-y Partial Yes Yes Yes Yes Yes Yes Yes
padding Yes Yes Yes Yes Yes Yes Yes Yes
padding-bottom Yes Yes Yes Yes Yes Yes Yes Yes
padding-left Yes Yes Yes Yes Yes Yes Yes Yes
padding-right Yes Yes Yes Yes Yes Yes Yes Yes
padding-top Yes Yes Yes Yes Yes Yes Yes Yes
page-break-after Yes Yes Yes Yes No No No Yes
page-break-before Yes Yes Yes Yes No No No Yes
page-break-inside No No Yes Yes No No No Yes
position Partial Yes Yes Yes Yes Yes Yes Yes
quotes No No Yes Yes Yes Yes Yes Yes
resize No No No No Yes Yes Yes Yes
right Partial Partial Yes Yes Yes Yes Yes Yes
table-layout Yes Yes Yes Yes Yes Yes Yes Yes
text-align Yes Yes Yes Yes Yes Yes Yes Yes
text-align-last Partial Partial Partial Partial Yes (-moz) Yes (-webkit) Yes (-webkit) Yes
text-decoration Yes Yes Yes Yes Yes Yes Yes Yes
text-decoration-color No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) Yes
text-decoration-line No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) Yes
text-decoration-skip No No No No No No No No
text-decoration-style No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) No
text-indent Yes Yes Yes Yes Yes Yes Yes Yes
text-shadow No No No No Yes Yes Yes Yes
text-transform Yes Yes Yes Yes Yes Yes Yes Yes
top Partial Partial Yes Yes Yes Yes Yes Yes
transform No No No Yes (-ms) Yes (-moz) Yes (-webkit) Yes (-webkit) Yes
transform-origin No No No Yes (-ms) Yes (-moz) Yes (-webkit) Yes (-webkit) Yes
transition No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) Yes
transition-delay No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) Yes
transition-duration No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) Yes
transition-property No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) Yes
transition-timing-function No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) Yes
unicode-bidi Yes Yes Yes Yes Yes Yes Yes Yes
vertical-align Yes Yes Yes Yes Yes Yes Yes Yes
visibility Yes Yes Yes Yes Yes Yes Yes Yes
white-space Partial Partial Yes Yes Yes Yes Yes Yes
widows No No Yes Yes No No No No
width Yes Yes Yes Yes Yes Yes Yes Yes
word-break Partial Partial Partial Partial No Yes Yes No
word-spacing Partial Partial Yes Yes Yes Yes Yes Yes
word-wrap Yes Yes Yes Yes Yes Yes Yes Yes
z-index Partial Partial Yes Yes Yes Yes Yes Yes

 

As you can see CSS is far from being cross-browser compatible. You need to be careful which selectors, units and properties you use.

Photo by Steven Guzzardi

No Comments

Leave a Reply

Your email address will not be published.