What are -moz and -webkit in CSS

What are -moz and -webkit in CSS

In this blog, we will learn CSS Vendor prefixes properties. Sometimes we see –moz, -webkit, -o etc. in many css3 properties like in a border radius, transition, animation, and many more. let’s see what are CSS prefixed properties, why should we use them, how to use these.

 

What are CSS Vendor Prefixes?

CSS Prefixes are nothing just a simple name followed by the (-) character with the valid identifier. Here are some popular CSS prefixes are following:

 

 

Prefix

 

 

Browser

 

-webkit-

 

 

For safari browser, Android Browser

 

-moz-

 

 

For Firefox Browser

 

-o-

 

 

For opera Browser

 

-ms-

 

 

For Microsoft Edge, Internet Explorer

 

 

Example:

 .box {
-webkit-animation-name: changecolor;
  -o-animation-name: changecolor;
  -ms-animation-name: changecolor;
  -moz-animation-name: changecolor;
  animation-name: changecolor;
}



Why Should we use CSS Prefixer?

CSS Prefixer is mandatory for all new CSS3 Properties to work properly in all browers. In many browsers such as opera, Mozilla, internet explorer css properties does not work. There are some CSS3 properties which uses CSS prefixer:

  • background-image:linear-gradient(#000,#f00);
  • border-radius:10px;
  • animation-name:changecolor;
  • transition: all 2s;

 


How to use CSS Prefixer?

You can use CSS prefixes in two ways:

  1. Add manually CSS Prefixer
  2. Automatically add CSS Prefixer

 


Add Manually CSS Prefixer:

You can add manually CSS prefixer in CSS3 Properties, but it is a very hard working process to add manually one by one.

Example:

 .box {
-webkit-animation-name: changecolor;
  -o-animation-name: changecolor;
  -ms-animation-name: changecolor;
  -moz-animation-name: changecolor;
  animation-name: changecolor;
}



Automatically add CSS Prefixer:

You can automatically add CSS prefixer in your all CSS properties where it is necessary by using the following website:

https://autoprefixer.github.io/