Is there a browser-compatibility deprecation table for CSS3 vendor prefixes? [closed]

Question

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.

Answer 1

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.

Answer 2

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?

Answer 3

If prefixes are all you're interested in, the awesome http://shouldiprefix.com/ is probably what you're looking for.

Answer 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+ */
}