Explain CSS vendor prefixes
Last Updated :
08 Apr, 2024
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:
- Internet Explorer: -ms-
- Chrome: -webkit-
- Safari: -webkit-
- Firefox: -moz-
- iOS: -webkit-
- Android: -webkit-
- Opera: -o-
- Microsoft Edge:-ms-
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />
<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>
</head>
<body>
<div class="mybox"></div>
<script src="./script.js"></script>
</body>
</html>
Output:
The output of the above code
Example 2: Here we see another example of using vendor prefix.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<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>
</head>
<body>
<span class="home-text">
It is the world's first Document
</span><br>
<script src="./script.js"></script>
</body>
</html>
Output:
The output of the above code
Note:
- In CSS, a browser simply ignores properties that it’s not understandable.
- Always put the standardized property at the last. Any browser will use the last definition for its understandability, overwriting any previous one.
Share your thoughts in the comments
Please Login to comment...