The Cross-Browser Compatibility Guide – CSS Rules Across Browsers
The Cross-Browser Compatibility Guide – CSS Rules Across Browsers
browseemall 
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
