问题
Would anyone here post a site that presents a neat summary of which vendor specific CSS3 extensions - e.g. -moz-border-radius - are still required or can be deprecated?
From what I have seen by and large all recent versions of Chrome, Safari and Opera (forget IE, I can live without it for my current app) are by and large happy to live with the W3C attributes with no vendor prefixes.
回答1:
They also have it in book form, The Book of CSS3 by Peter Gasston, that has tables listing all the CSS3 browser support. However I bet thats the last thing you wanted to look for... so this maybe?
回答2:
I suggest using the CanIUse site to check this.
The short answer is that you need vendor prefixes for everything that ever used them --- with the caveat that it depends on how far back you want to support old browser versions.
The CanIUse site contains browser support tables for virtually every browser feature you can imagine, and pretty much every browser you would want to support. It includes notes where particular browsers support a feature but require a vendor prefix.
You can use these tables to decide for yourself which prefixes are worth keeping and which you can drop.
Since you've asked specifically about border-radius, let's look at the support table for it: http://caniuse.com/#search=border-radius
This shows us that no current browser version requires a prefix. But Firefox needed the prefix up to v3.6, Chrome up to 4.0, and Safari up to 4.0. Mobile Safari (3.2) and Android Browser (2.1) also show up in the list.
If you need to support those browser versions or earlier, then you need the prefixes. Otherwise, you can get away without them.
Hope that helps.
回答3:
If prefixes are all you're interested in, the awesome http://shouldiprefix.com/ is probably what you're looking for.
回答4:
Great question- I couldn't find a global reference for vendor-prefix requirements.
I did a quick search on caniuse.com for the vendor-prefixed properties I'm using in my projects, and this is what I found (as of late 2013):
- border-radius: not necessary
- box-shadow: not necessary
- box-sizing:
-moz-required by current/future chrome - transform:
-webkit-required by all chrome/webkit browsers - gradient:
-webkit-required by current android browsers and other recent - linear-gradient:
-webkit-required by current android browsers and other recent box-sizing - input-placeholder: not necessary
- background-clip: not necessary
- user-select: required by all
(NOTE: I defined "not necessary" as not being required by any browser with 1% + global usage)
Feel free to add to this...
PUBLIC SERVICE ANNOUNCEMENT:
Remember that when using vendor-prefixed properties, they should always come before non-vendor-prefixed properties:
Example:
textarea {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
回答5:
The closest possible to a full summary, is making your own selective summary using the Big JS-Compatibility-Table, looking at window.document.documentElement.style, the object which is used to detect support for a particular CSS Feature.
It will give you a convenient dynamic table of all supported W3C CSS properties, by browser, using the camelCased CSS keyword variant, with the ability to select the browsers you are targeting to support. The still in this question being subject to change over time.
The Big JS-Compatibility-Table is not a very well know resource made by @TobiasBuschor, but very handy. I use this table fairly often to check various properties or apis, or cross-check with caniuse data.
The W3C does not fully track compatibility or what implementors actually do or release. And browser makers themselves, except for perhaps Opera, didn't document this stuff well at all until more recently.
For determining the choice as to what browsers are reasonable to deprecate support for (by removing the vendor prefix which would require them). It's going to depend on a given site's feature requirements.
The somewhat accepted convention as of this writing is that it's ok to deprecate support for any browser not supporting querySelector, localStorage and addEventListener.
Meaning you can safely drop support for Firefox 3.5, IE 8, Safari 3.2, Chrome 3, Opera Presto 10.1 and everything under.
Which is to say, it's a little too early right now to remove vendor prefixes, especially due to the fact millions of users still use Android 2.x or 4.3 devices, running Safari 4.x/5.x levels Android Stock Browsers, or Opera Mini (Presto 11). Those represent about 10% of global browser usage in 2014.
In that category, border-radius is pretty much the only one feature pretty safe to drop right now. While you could chose to drop others, if you decide to support only the latest browsers. It would be at your own risk and accountability of breaking compatibility with old browsers still heavily used.
It's going to take quite a few years still, before you can deliberately start dropping prefixes completely.
回答6:
You don't really need to bother with this question.
If you are using gulp or grunt, you can use a module that will automatically prefix your css according to your targets (IE8, IE9, Chrome 30, etc ..)
https://github.com/Metrime/gulp-autoprefixer
https://github.com/nDmitry/grunt-autoprefixer
来源：https://stackoverflow.com/questions/14212287/is-there-a-browser-compatibility-deprecation-table-for-css3-vendor-prefixes