Vendor prefixes are prefixes for property names that were developed as a way of testing new CSS features or standards before browsers fully supported them. These prefixes were never intended to be used on production websites, but they are sometimes required to use certain new and cutting-edge features or to support older versions of browsers when those features were cutting edge.

Common vendor prefixes include:

  • -webkit- for Chrome, Safari, newer versions of Opera, and almost all iOS browsers, including Firefox for iOS
  • -moz- for Firefox
  • -ms- for Internet Explorer and Microsoft Edge
  • -o- for old pre-WebKit versions of Opera

Eventually, these experimental features are fully adopted into all browsers, at which point the vendor prefix is no longer required. Remember that browsers adopt features at different rates—for newer CSS features, you may need to include prefixed property names alongside. An example of this for the transform property would be as follows:

.tilted { -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); -ms-transform: rotate(15deg); -o-transform: rotate(15deg); transform: rotate(15deg); }

Rather than looking through every CSS feature on your site to determine which features require vendor prefixes, you can also use tools such as Autoprefixer to automatically include all vendor prefixes for the features that require them.



We’ve implemented the new text value for the background-clip property of our header text! Take a look at Pleasant Cafe’s new website.

Oh no! It seems like the new feature works in Firefox but doesn’t work in Chrome. It seems like we need to use the background-clip property with a vendor prefix for it to work in Chrome.

Inside the strong selector ruleset on line 42, add the background-clip property with the appropriate prefix and set its value to text.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?