Course Content

If you are facing any issue in playing video please use Firefox browser.

Course Content


What Is Vendor Prefixes In CSS3?

CSS vendor prefixes also known as CSS browser prefixes. These prefixes became popular with the rise of CSS3 a few years ago. Sometimes browsers don’t understand some properties; to make them understand for whom and how these properties are written, vendor prefixes are used. To use a brand new CSS style property, you take the standard CSS property and add the prefix for each browser. To give browser specification we will use vendor prefixes.

There are many browsers available like chrome, Firefox, internet explorer, safari, opera mini etc. Some properties work in some browser and same properties may not work in other browsers.If your browser is not updated, then you have to use vendor prefixes. How to define vendor prefixes? They are defined at CSS.  WebKit is a HTML/CSS web browser rendering engine for Safari/Chrome/Android and IOS. Another such prefix is moz which is used for Firefox.

Let’s see Working of Vendor Prefixes -

We have made one animation in past video. That animation can run on latest browsers but it can’t run on older version of Internet explorer or safari. To make them run, we will use vendor prefixes.

-moz-@keyframes test {
from {background-color: red;  }
to {background-color: yellow; }

Same for Chrome/Safari/Android we will write -

-webkit-@keyframes test{
from {background-color: red;}
to {background-color: yellow;}

For Internet Explorer -

-ms-@keyframes test{
from {background-color: red;}
to {background-color: yellow;}

For Opera Mini -

-o-@keyframes test{
from {background-color: red;}
to {background-color: yellow;}

You can use different Vendor Prefixes to different properties. Like to run img hover -

.image_main: hover .img_hover{top:0px; transition: all .8s eas-in-out; -webkit-transition: all .8s ease-in-out; -moz-transition: all .8s ease-in-out;}

You will see, only webkit transition is enable and rest are strikethrough. Same way, if you go to Mozilla, webkit and ms will disable. So this way, you can give style to different browsers using vendor prefixes. Vendor prefixes work on transition, transform, animation and border. In border, not all borders are supported by all browsers. So for that, you can use vendor prefixes.


Recommended Courses

Share With Friend

Have a friend to whom you would want to share this course?

Download The Apps

Code Scan or Download the app
Google Play Store
297K+ Downloads
4.5 Rating
10K+ Reviews
  • Learn anywhere on the go
  • Get regular updates about your enrolled or new courses
  • Share content with your friends
  • Evaluate your progress through practice tests
  • No internet connection needed
  • Enroll for the webinar and join at the time of the webinar from anywhere