Vendor Prefixes
The CSS Browser (Vendor) prefix is a way to add support for new CSS features for the browser before those features are fully supported across all browsers.
When CSS3 is popular, choose all sorts of new choices. Unfortunately, not all of them were browser-supported. The developers of the vendor service organization help to use those innovations and need to use them without waiting for each browser to become available.
CSS prefixes
The prefixes used are:
- -webkit- Chrome, Safari, newer versions of Opera, almost all – iOS browsers.
- -moz- Firefox.
- -o- Old versions of Opera.
- -ms- Microsoft Edge and Internet Explorer.
When using a Vendor prefix, keep in mind that it is only temporary. Many of the properties that used to have a Vendor prefix attached to them are now fully supported and not needed.
How Should You Use Them?
You can easily use vendor prefixes, simply by adding them before the property, like this:
.element {
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}
In this case, you ensure the property is supported in browsers.
It is a good practice to put the unprefixed property at the bottom. This way, by using the cascading nature of CSS, you ensure that when the property is fully supported, this is the one it will use.
Which Property Needs Prefixing?
A good thing would be to stop guessing and check out these websites: (http://shouldiprefix.com/) (https://www.w3.org/TR/css-2010/#properties/)
A good way to check which property is available for use without a Vendor prefix is to check the CanIUse service. There you can see which browsers currently support which properties.
