The concept of CSS Browser Extensions is very important while learning the css selectors and properties. This article and tutorial is about an overview and idea of browser CSS extensions. I have already discussed about the specified CSS properties set by the W3C, but the browser developers occasionally introduce browser-specific properties due to two major reasons,

  1. A spec is still under development by the W3C but the browser developer wants to start using the style now.
  2. The browser developer wants to try a new idea but doesn’t want to wait for the W3C to accept it and begin work on it, which can take years.

Here is a syntax for the browser CSS extensions.

selector {
     -moz-property: value;
     -webkit-property: value;
     -o-property: value;
     -ms-property: value;
     property: value;
}

Reason of above syntax is as, sometimes the exact syntax of the official CSS specification will be slightly different from the “sand-box” version created for a specific browser.

To avoid confusion and ensure forward compatibility of CSS code, each rendering engine has adapted its own prefix to use with CSS properties that are extensions unique to that browser. The prefixes for each browser are as follows,

CSS Browser Extensions

Extension Rendering Engine Browser(s) Example
-moz- Mozilla Firefox, Camino -moz-border-radius
-ms- Trident Internet Explorer -ms-layout-grid
-o- Presto Opera -o-border-radius
-webkit- Webkit Chrome, Safari -webkit-border-radius

I hope this article has helped you a lot in strengthening the concept of W3C and Vendor specific CSS properties. Don’t forget to subscribe your email to be tuned with latest updates.