Adding vendor prefixes to your code
UPDATE: in a recent press release (May 2013), Opera described their transition to the WebKit engine. You will still need to use the -o- for older versions of the Opera browser.
As web standards develop internet browsers also evolve. Unfortunately they do not always develop at the same pace. In order to make new CSS3 features work in current web browsers, we have to use vendor prefixes for some of the new CSS3 properties.
With the introduction of CSS3 Standards, there are a number of new properties available to use to make your website sparkle. Some are effects such as drop shadow for boxes and text; gradients and border-radius for your divs. Others are transitions and animations.
As these features are still in their infancy with many internet browsers displaying the effects in different ways, we must add a vendor prefix to identify properties for specific browsers.
The most popular internet browsers are Mozilla Firefox, Google Chrome, Apple Safari and Microsoft’s Internet Explorer. For the purpose of this post we will forget about Internet Explorer as it uses its own filters, particularly IE5.5-IE 8.
There are a number of other browsers out there such as Opera but the main web browsers are those noted above so please don’t waste your time writing code for every browser available.
Here is a list of the vendor prefixes for the most common web browsers.
This is an example of a CSS3 property using vendor prefixes:
It is important to note that when you use the vendor prefixes above, you must use them in the correct order as shown followed by the CSS3 property without a browser prefix as the wrong order may slow the loading time of your site.
Annoying but temporary
Adding the vendor prefixes is annoying and repetitive, and depending on which properties you use, it can increase the size of your style sheet. Fortunately the browser prefix is only temporary which is why you add the final property without a prefix – you are future-proofing your style sheet. Eventually as CSS3 standards are fully accepted by browser makers, these prefixed properties will no longer need the prefix. Regrettably we will still have to use the prefixes when CSS4 comes into general use for its new properties.
As with most CSS3 properties, each internet browser displays slightly differently and this is particularly true for those properties requiring a vendor prefix.
No getting away from prefixes
As the internet is a continually evolving creature there will always be prefixes, workarounds and hacks. A good web designer will always use the most current and modern methods while making provision for older versions of internet browsers.
Nuisance as they may be, vendor prefixes are here to stay.
What are your thoughts on the use of vendor prefixes in every day web design? Do you find them a hindrance or just a mild nuisance? Is there an internet browser you particularly target?