How-To: CSS Vendor Prefixes

CSS vendor prefixes add preliminary browser support for new CSS features before the CSS specification has been finalised. This allows faster release of new features but there is a possibility that the syntax of the final standard could be different.

Some common CSS browser prefixes are:

Android: -webkit-
Chrome: -webkit-
iOS: -webkit-
Safari: -webkit-

Firefox: -moz-
Internet Explorer: -ms-
Opera: -o-

To use a vendor prefix take the standard CSS property and add the prefix for each browser, typically you will need to use 4 sets of rules to cover all the major browsers.

If you also add the standard CSS property listed last, then browsers that support the standard property will use that rule. Browsers that only support the vendor prefixes will use those rules and ignore the properties they don’t understand.

In 2016 Apple changed their policy to implement new experimental features with unprefixed tags, behind a runtime flag.

When using vendor prefixes you should be aware that at some point the browers are likely to be updated to fully support the new CSS standard (possibly with a name change) and will then remove the old prefixed version.

“The only meaningful definition of a “generalist” is a specialist who can relate his own small area to the universe of knowledge” ~ Peter Drucker

Copyright © 2013-2022
Some rights reserved