The Zen Elements CSS3 Series has been given a small update, not only providing a few additional CSS3 tutorials but also a revised CSS3 Browser Compatibility Chart!
Very briefly, CSS stands for ‘Cascading Style Sheets’ and is a mark-up language for altering and giving style to a website or elements within a website. The 3 represents the next generation/version of style sheet language.
It is very important to learn that while it is fun to learn and play with CSS3, it is still not yet fully supported in current browsers. This means that if you are to incorporate CSS3 in a live website, it would be a good idea to make sure there is fallback code for the browsers that are struggling to support it. See our Browser Compatibility Chart Below.
Don’t just listen to me though! Eric Meyer is a fantastic chap who knows a good thing or two about CSS, among other things!
Discover below the compatibility of css with the earliest fully compatible versions for modern browsers, that is without any old -moz- or -wekit- prefixes.
|
Chrome |
Firefox |
Safari |
Edge |
Opera |
|
| Background Images | ✅ 4+ | ✅ 2+ | ✅ 3.1+ | ✅ 12+ | ✅ 10+ |
| Border Image | ✅ 56+ | ✅ 50+ | ✅ 15.4+ | ✅ 12+ | ✅ 43+ |
| Border Radius | ✅ 5+ | ✅ 50+ | ✅ 7+ | ✅ 12+ | ✅ 11.5+ |
| Box Shadow | ✅ 10+ | ✅ 4+ | ✅ 5.1+ | ✅ 12+ | ✅ 11.5+ |
| @Font-face | ✅ 4+ | ✅ 3.5+ | ✅ 3.1+ | ✅ 12+ | ✅ 10+ |
| Gradients | ✅ 71+ | ✅ 83+ | ✅ 12.1+ | ✅ 79+ | ✅ 58+ |
| HSL / HSLA | ✅ 4+ | ✅ 3+ | ✅ 3.1+ | ✅ 12+ | ✅ 10+ |
| Multiple Columns | ✅ 50+ | ✅ 52+ | ✅ 9+ | ✅ 12+ | ✅ 37+ |
| Opacity | ✅ 4+ | ✅ 2+ | ✅ 3.1+ | ✅ 12+ | ✅ 10+ |
| RGB / RGBA | ✅ 4+ | ✅ 3+ | ✅ 3.1+ | ✅ 12+ | ✅ 10+ |
| Text Shadow | ✅ 4+ | ✅ 3.5+ | ✅ 4+ | ✅ 79+ | ✅ 10+ |
| Transform | ✅ 36+ | ✅ 16+ | ✅ 9+ | ✅ 17+ | ✅ 23+ |
| Transition | ✅ 26+ | ✅ 16+ | ✅ 9+ | ✅ 12+ | ✅ 11.5+ |
| Last Updated: 16/04/2025 | |||||
We hope you get some use out of this CSS3 coding guide!
@zen