Given that I'm not really bothered about backwards compatibility (I'm exploring CSS3 and HTML5 based design, rather than relying on on graphics and such) what are the benefits of using css like:
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
Over just using:
box-shadow: 3px 3px 5px 6px #ccc;
The latter appears to work fine in most modern browsers (except the obvious! :p looking at you IE! Although I'll assume it probably works in IE9, but I can't test as I'm on a Mac at the moment).
Am I seeing things? Do we need to use the browser specific code above? Or are all browsers moving towards supporting the standards?
It really depends on which features and which browsers you want to fully support. Even now some browsers are lagging.
Here is a really excellent guide: http://caniuse.com/
All browsers generally move towards standards support.
There are two issues
- A lot of the CSS3 rules available to us to use are still under review - i.e. not part of any standard yet.
- Some people persist in using older versions of a browser, which may not have support for non-prefixed rules.
For these two reasons, we continue to use vendor-prefixed CSS rules in our stylesheets.
The only prefix you need right now is the -webkit for chrome and safari support. Webkit is needed for -webkit-animation, -webkit-font-feature-settings, display: -webkit-flex, -webkit-filter etc..
-ms, -o and -moz provide support for browsers that even their own companies have stopped supporting.
来源：https://stackoverflow.com/questions/9401830/do-we-have-to-use-non-standard-browser-specific-css-vendor-prefixes-anymore