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.
Instructions
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
.