Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Vendor Prefixes
Another thing to bear in mind is that a lot of CSS3 bling features still aren't finished, and they're supported only in browsers with vendor-specific prefixes. For example, to get a linear gradient to work in WebKit, you would have to use this:
-webkit-linear-gradient(black,red);
If you just used the declaration above, your code would work only in WebKit-based browsers such as Safari and Chrome, which would be really bad for cross-browser compatibility. Instead, you should provide a stack of declarations for different browsers, like so:
-webkit-linear-gradient(black,red); -moz-linear-gradient(black,red); -ms-linear-gradient(black,red); -o-linear-gradient(black,red); linear-gradient(black,red);
A non-prefixed version should be provided at the end; then, when browsers drop their prefixes, your code won't break.
Having to do this for multiple CSS3 properties is a pain, to be sure, but that's what you get when you want to use experimental features in production work. The features listed in this article are all finished or very close to being finished, so browsers should theoretically drop their prefixes soon, but many won't be dropped as soon as you'd think, for fear of breaking existing code that only uses specific vendor prefixes. iPhone-only web app developers, we're looking at you!
To mitigate this problem, consider using a solution such as Lea Verou's Prefix free, a small JavaScript library that works out what browser is accessing your site and adds the appropriate prefix at runtime. Note that I haven't used this on the examples in this article, to make sure that the prefixes are easy to understand.