In this blog, I am going to explain about the vendor specific css and the implementation of it.

What is Vendor Specific CSS ?

Vendor Specific CSS is an extension which added to the CSS property for different browsers. By using extension, we can apply the browser specific feature to the CSS property.

Every browser makers or Vendors had introduced their own specific extension to handle the feature of CSS property.

Browser vendors are free to add or implement new feature with extension.

How to use Vendor Specific CSS?

In Vendor Specific CSS, identifiers are used to define and it begin with '-' (dash) or '_' (underscore).

'-' + vendor identifier + '-' + meaningful name
'_' + vendor identifier + '-' + meaningful name

In below example, we are using a CSS property opacity and vendor specific extension for three browsers including firefox, internet explorer and safari.

.widgetBox{
  background: red;
  /* IE filter extension */
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20);
  width:100%;                /* Required for IE filter */
  -moz-opacity: 0.2;         /* Mozilla extension */
  -khtml-opacity:0.2;        /* Konqueror extension (Safari 1.1)*/
   opacity: 0.2;              /* the correct CSS3 syntax */
}

Lets understand more about extensions with Table A.

Table A - Vendor Specific Extension