Should we still use -webkit- and -moz- for recognised CSS3 properties?

Question

I am trying to clean up a CSS file and I am wondering if it is now safe to remove vendor specific properties is they have been standardized (or at least semi-standardized)?

For example should I still use

-webkit-border-radius
-moz-border-radius
border-radius

Or is it better to simply go with

border-radius

?

Answer 1

This depends on the property, but mostly the answer is that you should keep using the browser-prefixed versions too. It depends on the implementation status and on the actual use of various versions of browsers, rather than standardization status as such.

Check out MDN descriptions of properties, section Browser compatibility. Though not authoritative and not absolutely up-to-date in all cases, they are a great reference. For example the border-radius description says that Firefox 4.0 and newer, Chrome 4.0, and Safari 5.0 support the standard, non-prefixed version. Older versions have very low usage now.

On the other hand, existing code should not be cleaned up. You win nothing but risk making some silly mistakes in editing code. Even though e.g. the current version Firefox ignores the prefixed property name, this does not prevent pages using it from working, provided that they also set the property using the standard name.

In contrast, for example, the very useful hyphens property currently has no support except as browser-prefixed. To take another example, border-image is mostly supported as browser-prefixed only, though Firefox 15 and newer and Opera also support the standard name.

There are reasons why older versions of browsers may still be used. One reason is that some application that is important in some environment might fail to work on newer versions of a browser. (Or that’s what I’ve been told when I have encountered some very old versions in use.)