CSS3 Is Here! Browser Extensions in Depth
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
The web has always been a laboratory for new ideas—both in design and for code. The code for the web is primarily defined by the World Wide Web Consortium (W3C), a special group of elves who carefully plan how we render web pages. This august body is thorough, but often slow.
The CSS Workgroup, a part of the W3C, develops its standards starting with a working draft that is open to public scrutiny and then becoming a candidate recommendation, to a proposed recommendation, to finally a recommendation. But this process can take years. To get things moving, browser manufacturers will often introduce their own CSS properties in advance of them becoming a recommendation or even placed into a draft. When the web was young, the browsers would simply define the code as they saw fit, even if this meant that it wouldn’t work or even conflicted with other browsers. For example, one browser might add a style for the mouse cursor appearance. In Internet Explorer, one of the styles was called “hand” while other browsers used “pointer.”
To prevent this from happening, browser extensions were implemented to set off officially approved CSS code from code being tested by the browser manufacturers. These allow designers to use styles that are still experimental in a particular browser, without fear that it will cause problems in other browsers, and how allowed CSS3 to already start to grow, especially when applied with the philosophy of progressive enhancement.
Embrace and Extend CSS
Each browser or its rendering engine has its own extension, and styles using one browser's extension will not work in other browsers. All of the extensions have the same basic format: a dash (-), the extension name (e.g., webkit), another dash, and then the style name. So, for example, the text shadow browser extension for WebKit browsers looks like this:
-webkit-text-shadow: 1px 1px 2px black;
In Mozilla-based browsers, the text shadow property looks like this:
-moz-text-shadow: 1px 1px 2px black;
Notice that other than the extension, the syntax is exactly the same, but this is not always the case, as we shall see with gradients a little later in the article.
Name That Extension
The extensions are not always based on the browser name, but some are based on the rendering engine (the base code used to display the web pages) or on the company name:
-webkit- Webkit browsers like Safari and Chrome (Sa & Ch) -moz- Mozila browsers like Firefox (FF) -o-and -wap- Opera (Op) -ms- Microsoft Browsers like Internet Explorer (IE)
If proceeded by one of these extensions, the style will automatically be ignored by other browsers. However, browser extensions are not a way to hide recognized styles from other browsers. Take this example:
-webkit-color: red;
This will not work in any browser, not even WebKit browsers. Only styles that are associated specifically with a browser extension will work.
Extensions in CSS Values
Extensions can also be used with CSS values. For example, to add a gradient to a background, WebKit would use:
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff));
This creates a linear gradient from black to white that will work in Safari 4+ and Chrome 2+. Remember, though, that the reason we use extensions is because this code is experimental; the extensions are put in place while a final standard is worked out by the W3C CSS Workgroup. The group has now started work on defining the gradient value, but the direction they are taking is different than the one first proposed by WebKit. The W3C current working syntax is for that same gradient:
background: linear-gradient(black, white);
So, for 5.1+ and Chrome 10+, the syntax now for gradients is:
background: -webkit-linear-gradient(black, white);
However, the older version will still work in newer browsers.
Deprecated Styles: Where Old Extensions Go to Retire
When a browser extension is replaced with newer syntax, it said to have been deprecated. Even after being deprecated, the browser will generally support the older version for two version releases more, in addition to the new version, just to give everyone a chance to catch up.
So, why didn't WebKit just start using the W3C syntax outright rather than continuing with using the extension? The specification is still in draft format, so it will possibly still be changing. The browser makers don't want to implement until it becomes a recommendation by the W3C, at which time change is highly unlikely.
Using Browser Extensions
Many of the styles that started as browser extensions have now been adapted as part of the general CSS specification and implemented in the browser, but, at least for a while, both the extension version and the official version of the style will both work in the browser, and you will want to include all versions to make sure that your styles are as backward-compatible as possible. Don't worry, though; they won't interfere with each other.
One of the most extreme examples is the gradient style, which was originally conceived by Safari, to be added to the WebKit rendering engine. However, the syntax as originally conceived was complex (to put it mildly), Firefox offered a more simplified language, and the W3C modified it still further. Of course, Internet Explorer complicates matters even further, because in order to fully support its browsers, we have to use the non-CSS style filter, and then a browser extended version -ms-filter-. However, because of browser extensions, they can all play nice together.
The following code will place a black to white gradient in the back of the background in virtually any browser you can throw it at:
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%, #000000), color-stop(100%, #ffffff)); /* Safari 4+, Chrome 2+ */
background: -webkit-linear-gradient(black, white); /* Safari 5.1+, Chrome 10+ */
background: -moz-linear-gradient(black, white); /* FF 3.6+ */
background: -ms-linear-gradient(black, white); /* IE10 */
background: -o-linear-gradient(black, white); /* Opera 11.10 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000',
endColorstr='#ffffff'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000',
endColorstr='#ffffff')"; /* IE8+ */
background: linear-gradient(black, white); /* the standard */
The New Styles on the Block
There are a lot of CSS properties available using browser extensions. Many overlap between the browsers, but many do not, and there are new ones being added and old ones being deprecated (taken off when the final standard is finalized). For the most up-to-date list of CSS browser extensions, it's generally best to check the development websites for each browser maker: