-moz and -webkit css no longer needed?

I have been using the -moz and -webkit css styles for a while now for things like box shadow, text shadow, etc. And lately I have noticed that each FireFox, Chrome, Safari, and IE (9) all yield the same results with the standard box-shadow and text-shadow and similar css styles.

I was wondering if this is documented anywhere. Because I successfully removed all of the brows开发者_JS百科er-specific ones from a site and it still looks the same in all four of those browsers.

The latest browsers support these css3 properties by default. These -moz and -webkit specials should however still be used for backwards compatibility with older browsers. Older browsers implemented these to allow the use of these properties before they became standard.

I suppose it depends on the version of the browsers you are targeting.

It sounds like if, and only if, your app or site is intended to only work on the very latest versions of all the browsers, you can afford to omit the -moz and -webkit on the specific properties you have tested.

There are other properties that aren't supported on all browsers, e.g. my personal favourite webkit-transition. Of course in actual reality it's unlikely you can get away with targetting only the latest browsers unless you're making a personal project.

If you don't want to write that much and still want backwards compatibility: less.css could be your friend.

Another thing: w3schools.com has an up-to-date database for all CSS commands and which browser supports it. Helped a lot.

It might be useful to keep them for older browsers that don't have the standards, but do have the -moz and -webkit css styles.

For the latest versions of Firefox, Chrome and Safari that is true.

However, for people using earlier versions of the browsers (Firefox 3.6, as an example) you would still need to leave the -moz and -webkit prefixes.
If you want to target them, you shouldn't remove them.
These properties are progressive enhancement though, so removing them would not be harmful.

the best thing to do is to keep them all in there,

example:

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

depending on the user's browser version, they will still see the border-radius, older browsers will still use the -moz and -webkit version, the latest versions of safari / firefox or chrome will use the final implementation of the border-radius property.