Vendor Prefix: Why do we need a browser engine prefix?

What is the Vendor Prefix?

Vendor prefix—Browser engine prefixes are small strings placed before CSS properties to ensure that such properties can only be recognized and take effect under a specific browser rendering engine. Google Chrome and Safari use the WebKit rendering engine, Firefox uses the Gecko engine, Internet Explorer uses the Trident engine, and Opera used to use the Presto engine, but later switched to the WebKit engine. A browser engine generally does not implement CSS properties marked with prefixes of other engines. However, since mobile browsers based on WebKit are quite popular, browsers such as Firefox have also implemented some CSS properties marked with WebKit engine prefixes in their mobile versions.

What are the browser engine prefixes (Vendor Prefix)?

-moz- /* Firefox and other browsers using the Mozilla browser engine*/
-webkit- /* Safari, Google Chrome and other browsers using the Webkit engine*/
-o- /* Opera browser (early) */
-ms- /* Internet Explorer (not necessarily) */

Why do we need a Vendor Prefix?

These browser engine prefixes (Vendor Prefix) are mainly used by various browsers to experiment or test new CSS3 property features. It can be summarized into the following three points:

• Experiment with CSS properties that are not yet standardized — and may never be standardized
• Experimental implementation of new standard CSS3 properties
• Personalized implementation of equivalent semantics for some new properties in CSS3

Not all of these prefixes are needed, but there is usually no harm in adding them - just remember to put the unprefixed version on the last line:

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;

Some new CSS3 properties have been experimental for a long time, and some browsers have already stopped using prefixes for these properties. The Border-radius property is a very typical example. The latest browsers support the Border-radius attribute without a prefix.

CSS3 properties that require Vendor Prefixes

The main properties that need to add a vendor-prefix include:

• @keyframes
• Movement and transformation properties (transition-property, transition-duration, transition-timing-function, transition-delay)
• Animation properties (animation-name, animation-duration, animation-timing-function, animation-delay)
• border-radius
• box-shadow
• backface-visibility
• Column Properties
• flex property
• perspective property

The full list doesn't end there and will continue to grow.

Usage of vendor-prefix

When vendor-prefixes are needed, it is best to put the prefixes first and the standard prefixes last. for example:

/* Simple properties */
.myClass {
	-webkit-animation-name: fadeIn;
	-moz-animation-name: fadeIn;
	-o-animation-name: fadeIn;
	-ms-animation-name: fadeIn;
	animation-name: fadeIn; /* put the one without prefix at the end*/
}
/* Complex attribute keyframes */
@-webkit-keyframes fadeIn {
	0% { opacity: 0; } 100% { opacity: 0; }
}
@-moz-keyframes fadeIn {
	0% { opacity: 0; } 100% { opacity: 0; }
}
@-o-keyframes fadeIn {
	0% { opacity: 0; } 100% { opacity: 0; }
}
@-ms-keyframes fadeIn {
	0% { opacity: 0; } 100% { opacity: 0; }
}
/* Put the ones without prefix at the end*/
@keyframes fadeIn {
	0% { opacity: 0; } 100% { opacity: 0; }
}

Internet Explorer

Internet Explorer 9 supports many (but not all) of the new properties in CSS3. For example, you can also use the border-radius property without the vendor-prefix in IE.

IE6 to IE8 do not support CSS3. Unfortunately, there are still many users using these low-version browsers. So, make sure your website design can be displayed properly even without CSS3 support. For some properties like border-radius, linear-gradient, and box-shadow, you can use CSS3Pie, which is a small file that you put in the root directory of your website and will make your pages support these properties in IE6 and IE8.