CSS vendor prefixes

CSS vendor prefixes:

CSS vendor prefixes, also sometime known as or CSS browser prefixes, are a way for browser makers to add support for new CSS features before those features are fully supported in all browsers. This may be done during a sort of testing and experimentation period where the browser manufacturer is determining exactly how these new CSS features will be implemented. These prefixes became very popular with the rise of CSS3 a few years ago

When CCS3 was first being introduced, a number of excited properties began to hit different browsers at different times. For example, the webkit-powered browsers (Safari and Chrome) were the first ones to introduce some of the animation-style properties like transform and transition. By using vendor prefixed properties, web designers were able to use those new features in their work and have them seen on the browsers that supported them right away, instead of having to wait for every other browser manufacturer to catch up!

So from the perspective of a front-end web developer, browser prefixes are used to add new CSS features onto a site while  having comfort knowing that the browsers will support those styles. This can be especially helpful when different browser manufacturers implement properties in slightly different ways or with a different syntax.

The CSS browser prefixes that you can use (each of which is specific to a different browser) are:

• Android: -webkit-
• Chrome: -webkit-
• Firefox: -moz-
• Internet Explorer: -ms-
• iOS: -webkit-
• Opera: -o-
• Safari: -webkit-
• In most cases, to use a brand new CSS style property, you take the standard CSS property and add the prefix for each browser. The prefixed versions would always comes first (in any order you prefer) while the normal CSS property will come last.For example, if you want to add a CSS3 transition to your document, you would use the transition property as shown below:

-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;

Note: Remember, some browsers have a different syntax for certain properties than others do, so don’t assume that the browser-prefixed version of a property is exactly the same as the standard property. For example, to create a CSS gradient, you use the linear-gradient property. Firefox, Opera, and modern versions of Chrome and Safari use that property with the appropriate prefix while early versions of Chrome and Safari use the prefixed property -webkit-gradient. Also, Firefox uses different values than the standard ones.


Original article by Srujan Kumar.G on 30/6/17