As a developer, it is beneficial to understand browser prefixes. New properties don’t work when used in the development, and this could cause a hinderance when writing codes. Browser prefixes were introduced to make non-standard
We have four major prefixes in development:
Prefixes | Browser compatibility |
---|---|
-webkit- |
Chrome, Safari, newer versions of Opera, almost all iOS browsers including Firefox for iOS; any WebKit based browser |
-moz- |
Firefox |
-O- |
Old pre-WebKit versions of Opera |
-ms- |
Internet Explorer and Microsoft Edge |
Browser prefixes are used to make non-standard properties work. Below is a sample usage to make the CSS transform
property work on all browsers.
The prefixes are used in this syntax:
-prefixe-property: value;
Let’s look at the code below:
Take a look at the CSS section:
Line 11: We give mydiv
the transform
property with the browser prefix -webkit-
which makes the property work on Chrome and other browsers that the -webkit-
prefix is used for.
Line 12: We give mydiv
the transform
property with the browser prefix -moz-
which makes the property work on Firefox.
Line 13: We give mydiv
the transform
property with the browser prefix -ms-
which makes the property work on Internet Explorer and Microsoft Edge.
Line 14: We give mydiv
the transform
property with the browser prefix -o-
which makes the property work on Opera.