Explain CSS vendor prefixes (original) (raw)

Last Updated : 5 Aug, 2025

The process of introducing new CSS properties and HTML elements can be long and convoluted. Sometimes changes are proposed by standards committees (like the World wide web consortium (W3C)) and other times browser vendors create their properties.

A property created by the W3C doesn't work until browser vendors implement them in new versions of their browsers. Sometimes, there are disagreements about how a standard should be implemented. Sometimes, a browser vendor creates a new transition property, You had to do this with vendor prefixes Other times a browser vendor creates a new property which later becomes a standard, but with a slightly different syntax. And even worse, if end-users never upgrade their browsers then none of the new features will work at all.

A **vendor prefix is a special prefix that is added to a CSS property. Each rendering engine has its own prefix which will only apply the property to that particular browser.

The vendor prefix is supported by the following browsers:

**Syntax:

CSS `

.someClass {

/* Support for Firefox */
-moz-propertyName: propertyValue;

/* Support for webkit based browsers 
   (Chrome, Safari, iOS, etc.) */
-webkit-propertyName: propertyValue;

/* Support for Opera */
-o-propertyName: propertyValue;

/* Support for Edge and Internet Explorer */
-ms-propertyName: propertyValue;

/* Standardized property */
propertyName: propertyValue;

}

`

For better understanding, we will take some examples of how to use it:

**Example 1: Here is the implementation of the above-explained methods.

HTML `

<title>Box Hover</title>

<style>
    .mybox {
        width: 300px;
        height: 250px;
        background-color: blue;
        border-radius: 25px;
        transition: all 0.2s ease;
        -webkit-transition: all 0.2s ease;
    }

    .mybox:hover {
        background-color: pink;
        width: 500px;
        height: 250px;
    }
</style>

`

**Output:

The output of the above code

**Example 2: Here we see another example of using vendor prefix.

HTML `

<style>
    span.home-text,
    span.devrev-text {
        background: linear-gradient(to right, 
            #f00, #ff0, #0ff, #0f0, #00f);
        background-size: 200% auto;
        color: #000;
        font-size: 40px;
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: shine 9s linear infinite;
    }

    @keyframes shine {
        0% {
            background-position: 0% 100%;
        }

        50% {
            background-position: 100% 0%;
        }

        100% {
            background-position: 0% 100%;
        }
    }
</style>
It is the world's first Document

`

**Output:

The output of the above code

**Note: