Browser vendors sometimes add prefixes to experimental or nonstandard CSS properties and JavaScript APIs, so developers can experiment with new ideas while—in theory—preventing their experiments from being relied upon and then breaking web developers' code during the standardization process. Developers should wait to include the unprefixed property until browser behavior is standardized.
Vendor prefixes are useful when we want to include a new CSS feature and make it work in older browsers.
The major browsers use the following prefixes:
webkit-(Chrome, Safari, newer versions of Opera, almost all iOS browsers including Firefox for iOS; basically, any WebKit based browser)moz-(Firefox)o-(old pre-WebKit versions of Opera)ms-(Internet Explorer and Microsoft Edge)
Example:
-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;Source: https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix
We can use postprocessors to speed up the process of using vendor prefixes: https://autoprefixer.github.io
❗ Great article about postprocessors: https://css-tricks.com/autoprefixer/#demo