Blog

The Cross-Browser Compatibility Guide – CSS Rules Across Browsers

the_cross_browser_compatibility_guide-_CSS_rules_across_browsers
Cross Browser Testing

The Cross-Browser Compatibility Guide – CSS Rules Across Browsers

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

RuleIE 6IE 7IE 8IE 9FirefoxChromeSafariOpera
@charsetYesYesYesYesYesYesYesYes
@importYesYesYesYesYesYesYesYes
@mediaYesYesYesYesYesYesYesYes
@pagePartialPartialYesYesNoYesYesYes
@font-faceYesYesYesYesYesYesYesYes
@namespaceNoNoNoYesYesYesYesYes
@keyframesNoNoNoNoNoNoNoNo

Values and Units

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

Value / UnitIE 6IE 7IE 8IE 9FirefoxChromeSafariOpera
inheritNoNoYesYesYesYesYesYes
initialNoNoNoNoYes (-moz)Yes (-webkit)Yes (-webkit)No
attr()NoNoYesYesPartialYesYesYes
calc()NoNoNoYesYesNoNoNo
counter()NoNoYesYesYesYes (-webkit)Yes (-webkit)No
url()YesYesYesYesYesYesYesYes
rgba(r,g,b,a)NoNoNoYesYesYesYesYes
hsl(h,s,l)NoNoNoYesYesYesYesYes
hsla(h,s,l,a)NoNoNoYesYesYesYesYes
currentColorNoNoNoYesYesYesYesYes
transparentPartialYesYesYesYesYesYesYes
%YesYesYesYesYesYesYesYes
chNoNoNoYesYesNoNoNo
cmYesYesYesYesYesYesYesYes
degNoNoNoYesYesYesYesNo
dpcmNoNoNoNoYesYesYesYes
dpiNoNoNoNoYesYesYesYes
emYesYesYesYesYesYesYesYes
exYesYesYesYesYesYesYesYes
gdNoNoNoNoNoNoNoNo
gradNoNoNoYesYesYesYesNo
HzNoNoNoNoNoNoNoNo
inYesYesYesYesYesYesYesYes
kHzNoNoNoNoNoNoNoNo
mmYesYesYesYesYesYesYesYes
msNoNoNoYesYesYesYesYes
pcYesYesYesYesYesYesYesYes
pxYesYesYesYesYesYesYesYes
ptYesYesYesYesYesYesYesYes
radNoNoNoYesYesYesYesYes
remNoNoNoYesYesYesYesYes
sNoNoNoYesYesYesYesYes
turnNoNoNoYesNoNoNoNo
vhNoNoNoYesNoNoNoNo
vmNoNoNoYesNoNoNoNo
vwNoNoNoYesNoNoNoNo
image()NoNoNoNoNoNoNoNo
linear-gradient()NoNoNoNoYes (-moz)Yes (-webkit)Yes (-webkit)No
radial-gradient()NoNoNoNoYes (-moz)Yes (-webkit)Yes (-webkit)No
repeating-linear-gradient()NoNoNoNoYes (-moz)Yes (-webkit)Yes (-webkit)No
repeating-radial-gradient()NoNoNoNoYes (-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.

PropertyIE 6IE 7IE 8IE 9FirefoxChromeSafariOpera
animationNoNoNoNoYes (-moz)Yes (-webkit)Yes (-webkit)Yes (-o)
animation-delayNoNoNoNoYes (-moz)Yes (-webkit)Yes (-webkit)Yes (-o)
animation-directionNoNoNoNoYes (-moz)Yes (-webkit)Yes (-webkit)Yes (-o)
animation-durationNoNoNoNoYes (-moz)Yes (-webkit)Yes (-webkit)Yes (-o)
animation-fill-modeNoNoNoNoYes (-moz)Yes (-webkit)Yes (-webkit)Yes (-o)
animation-iteration-countNoNoNoNoYes (-moz)Yes (-webkit)Yes (-webkit)Yes (-o)
animation-nameNoNoNoNoYes (-moz)Yes (-webkit)Yes (-webkit)Yes (-o)
animation-play-stateNoNoNoNoYes (-moz)Yes (-webkit)Yes (-webkit)Yes (-o)
animation-timing-functionNoNoNoNoYes (-moz)Yes (-webkit)Yes (-webkit)Yes (-o)
appearanceNoNoNoNoYes (-moz)Yes (-webkit)Yes (-webkit)Yes (-o)
backgroundYesYesYesYesYesYesYesYes
background-attachmentPartialYesYesYesYesYesYesYes
background-clipNoNoNoYesYesYesYesYes
background-colorYesYesYesYesYesYesYesYes
background-imageYesYesYesYesYesYesYesYes
background-originNoNoNoYesYesYesYesYes
background-positionPartialPartialYesYesYesYesYesYes
background-repeatYesYesYesYesYesYesYesYes
background-sizeNoNoNoYesYesYesYesYes
borderYesYesYesYesYesYesYesYes
border-bottomYesYesYesYesYesYesYesYes
border-bottom-colorYesYesYesYesYesYesYesYes
border-bottom-left-radiusNoNoNoYesYesYesYesYes
border-bottom-right-radiusNoNoNoYesYesYesYesYes
border-bottom-styleYesYesYesYesYesYesYesYes
border-bottom-widthYesYesYesYesYesYesYesYes
border-collapsePartialPartialYesYesYesYesYesYes
border-colorYesYesYesYesYesYesYesYes
border-imageNoNoNoNoNoYesYesYes
border-image-outsetNoNoNoNoNoNoNoNo
border-image-repeatNoNoNoNoNoNoNoNo
border-image-sliceNoNoNoNoNoNoNoNo
border-image-sourceNoNoNoNoNoNoNoNo
border-image-widthNoNoNoNoNoNoNoNo
border-leftYesYesYesYesYesYesYesYes
border-left-colorYesYesYesYesYesYesYesYes
border-left-styleYesYesYesYesYesYesYesYes
border-left-withYesYesYesYesYesYesYesYes
border-radiusNoNoNoNoYesYesYesYes
border-rightYesYesYesYesYesYesYesYes
border-right-colorYesYesYesYesYesYesYesYes
border-right-styleYesYesYesYesYesYesYesYes
border-right-widthYesYesYesYesYesYesYesYes
border-spacingNoNoYesYesYesYesYesYes
border-stylePartialPartialYesYesYesYesYesYes
border-topYesYesYesYesYesYesYesYes
border-top-colorYesYesYesYesYesYesYesYes
border-top-left-radiusNoNoNoNoYesYesYesYes
border-top-right-radiusNoNoNoNoYesYesYesYes
border-top-styleYesYesYesYesYesYesYesYes
border-top-widthYesYesYesYesYesYesYesYes
border-widthYesYesYesYesYesYesYesYes
box-alignNoNoNoNoYes (-moz)Yes (-webkit)Yes (-webkit)No
box-decoration-breakNoNoNoNoNoNoNoNo
box-directionNoNoNoNoYes (-moz)Yes (-webkit)Yes (-webkit)No
box-flexNoNoNoNoYes (-moz)Yes (-webkit)Yes (-webkit)No
box-flex-groupNoNoNoNoYes (-moz)Yes (-webkit)Yes (-webkit)No
box-linesNoNoNoNoNoNoNoNo
box-ordinal-groupNoNoNoNoYes (-moz)Yes (-webkit)Yes (-webkit)No
box-orientNoNoNoNoYes (-moz)Yes (-webkit)Yes (-webkit)Yes (-o)
box-packNoNoNoNoYes (-moz)Yes (-webkit)Yes (-webkit)No
box-shadowNoNoNoYesYesYesYesYes
box-sizingNoNoYesYesYes (-moz)YesYesYes
caption-sideNoNoYesYesYesYesYesYes
clearYesYesYesYesYesYesYesYes
clipYesYesYesYesYesYesYesYes
colorNoNoNoNoYesYesYesYes
column-countNoNoNoNoYes (-moz)Yes (-webkit)Yes (-webkit)Yes (-o)
column-fillNoNoNoNoYes (-moz)Yes (-webkit)Yes (-webkit)No
column-gapNoNoNoNoYes (-moz)Yes (-webkit)Yes (-webkit)No
column-ruleNoNoNoNoYes (-moz)Yes (-webkit)Yes (-webkit)No
column-rule-colorNoNoNoNoYes (-moz)Yes (-webkit)Yes (-webkit)No
column-rule-styleNoNoNoNoYes (-moz)Yes (-webkit)Yes (-webkit)No
column-rule-widthNoNoNoNoYes (-moz)Yes (-webkit)Yes (-webkit)No
column-spanNoNoNoNoNoYes (-webkit)Yes (-webkit)Yes
column-widthNoNoNoNoYes (-moz)Yes (-webkit)Yes (-webkit)Yes
columnsNoNoNoNoYes (-moz)Yes (-webkit)Yes (-webkit)Yes
contentNoNoYesYesYesYesYesYes
counter-incrementNoNoYesYesYesYesYesYes
counter-resetNoNoYesYesYesYesYesYes
cursorYesYesYesYesYesYesYesYes
directionYesYesYesYesYesYesYesYes
displayPartialPartialYesYesYesYesYesYes
empty-cellsNoPartialYesYesYesYesYesYes
floatYesYesYesYesYesYesYesYes
fontYesYesYesYesYesYesYesYes
font-familyYesYesYesYesYesYesYesYes
font-sizeYesYesYesYesYesYesYesYes
font-size-adjustNoNoNoNoYesYesYesYes
font-stretchNoNoNoYesYesYesYesYes
font-styleYesYesYesYesYesYesYesYes
font-variantYesYesYesYesYesYesYesYes
font-weightPartialPartialYesYesYesYesYesYes
heightYesYesYesYesYesYesYesYes
leftPartialPartialYesYesYesYesYesYes
letter-spacingYesYesYesYesYesYesYesYes
line-heightYesYesYesYesYesYesYesYes
list-styleYesYesYesYesYesYesYesYes
list-style-imageYesYesYesYesYesYesYesYes
list-style-positionYesYesYesYesYesYesYesYes
list-style-typeNoYesYesYesYesYesYesYes
marginYesYesYesYesYesYesYesYes
margin-bottomYesYesYesYesYesYesYesYes
margin-leftYesYesYesYesYesYesYesYes
margin-rightYesYesYesYesYesYesYesYes
margin-topYesYesYesYesYesYesYesYes
max-heightNoYesYesYesYesYesYesYes
max-widthNoYesYesYesYesYesYesYes
min-heightNoYesYesYesYesYesYesYes
opacityNoNoNoNoYesYesYesYes
orphansNoNoYesYesNoNoNoNo
outlineNoNoYesYesYesYesYesYes
outline-colorNoNoYesYesYesYesYesYes
outline-offsetNoNoNoNoYesYesYesYes
outline-styleNoNoYesYesYesYesYesYes
outline-widthNoNoYesYesYesYesYesYes
overflowPartialYesYesYesYesYesYesYes
overflow-xPartialYesYesYesYesYesYesYes
overflow-yPartialYesYesYesYesYesYesYes
paddingYesYesYesYesYesYesYesYes
padding-bottomYesYesYesYesYesYesYesYes
padding-leftYesYesYesYesYesYesYesYes
padding-rightYesYesYesYesYesYesYesYes
padding-topYesYesYesYesYesYesYesYes
page-break-afterYesYesYesYesNoNoNoYes
page-break-beforeYesYesYesYesNoNoNoYes
page-break-insideNoNoYesYesNoNoNoYes
positionPartialYesYesYesYesYesYesYes
quotesNoNoYesYesYesYesYesYes
resizeNoNoNoNoYesYesYesYes
rightPartialPartialYesYesYesYesYesYes
table-layoutYesYesYesYesYesYesYesYes
text-alignYesYesYesYesYesYesYesYes
text-align-lastPartialPartialPartialPartialYes (-moz)Yes (-webkit)Yes (-webkit)Yes
text-decorationYesYesYesYesYesYesYesYes
text-decoration-colorNoNoNoNoYes (-moz)Yes (-webkit)Yes (-webkit)Yes
text-decoration-lineNoNoNoNoYes (-moz)Yes (-webkit)Yes (-webkit)Yes
text-decoration-skipNoNoNoNoNoNoNoNo
text-decoration-styleNoNoNoNoYes (-moz)Yes (-webkit)Yes (-webkit)No
text-indentYesYesYesYesYesYesYesYes
text-shadowNoNoNoNoYesYesYesYes
text-transformYesYesYesYesYesYesYesYes
topPartialPartialYesYesYesYesYesYes
transformNoNoNoYes (-ms)Yes (-moz)Yes (-webkit)Yes (-webkit)Yes
transform-originNoNoNoYes (-ms)Yes (-moz)Yes (-webkit)Yes (-webkit)Yes
transitionNoNoNoNoYes (-moz)Yes (-webkit)Yes (-webkit)Yes
transition-delayNoNoNoNoYes (-moz)Yes (-webkit)Yes (-webkit)Yes
transition-durationNoNoNoNoYes (-moz)Yes (-webkit)Yes (-webkit)Yes
transition-propertyNoNoNoNoYes (-moz)Yes (-webkit)Yes (-webkit)Yes
transition-timing-functionNoNoNoNoYes (-moz)Yes (-webkit)Yes (-webkit)Yes
unicode-bidiYesYesYesYesYesYesYesYes
vertical-alignYesYesYesYesYesYesYesYes
visibilityYesYesYesYesYesYesYesYes
white-spacePartialPartialYesYesYesYesYesYes
widowsNoNoYesYesNoNoNoNo
widthYesYesYesYesYesYesYesYes
word-breakPartialPartialPartialPartialNoYesYesNo
word-spacingPartialPartialYesYesYesYesYesYes
word-wrapYesYesYesYesYesYesYesYes
z-indexPartialPartialYesYesYesYesYesYes

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

Leave your thought here

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