CSS Introduction | CSS3 Modules | Vendor Prefix

Vendor Prefix

The most widely used web browsers include Internet Explorer, Chrome, Firefox, Safari, and Opera.

A vendor prefix is a prefix used by major web browser vendors to let older browser versions know when they provide new experimental features. In other words, you use a vendor prefix when you want to use a feature that has not yet been included in a CSS recommendation, or a feature that is included in a CSS recommendation but has not yet been fully standardized. This makes it possible to use that feature even in older web browsers that do not yet include it.

Vendor Prefixes in Major Web Browsers

The vendor prefixes used by major web browsers are as follows.

Chrome and Safari use the same vendor prefix because both are WebKit-based browsers.

<style>
    .button {
        background: red;          <!-- Code for all browsers that do not support the gradient property -->
        background: -webkit-linear-gradient(red, yellow); <!-- Code for Chrome and Safari 4.0 or later -->
        background: -moz-linear-gradient(red, yellow);    <!-- Code for Firefox 3.6 or later -->
        background: -ms-linear-gradient(red, yellow);     <!-- Code for Internet Explorer 10.0 or later -->
        background: -o-linear-gradient(red, yellow);      <!-- Code for Opera 10.0 or later -->
        background: linear-gradient(red, yellow);         <!-- CSS standard syntax code -->
    }
</style>

In the example above, the first background property is for all browsers that do not support the gradient property. The final background property is written in the CSS standard syntax. The CSS standard syntax must appear after all code written with vendor prefixes so that the prefixed code can work correctly.

These vendor prefixes are no longer necessary once the experimental features are included in the CSS standard recommendation or become fully standardized.