The role of CSS vendor prefixing

Is CSS vendor prefixing a good or a bad thing?

I think the reason why this question is doing the rounds is because, like with so many questions, there is no black & white answer. This is what I think.

As a computer scientist (by training) I find the concept of having more than one interface for a single function frankly ridiculous. So, when I first encountered vendor prefixing in CSS3 I hated it. If you are unsure what I mean consider the following CSS for styling of border radius.

-webkit-border-radius: 4px 4px;
-moz-border-radius: 4px / 4px;
-khtml-border-radius: 4px / 4px;
border-radius: 4px / 4px;

The vedor prefixes are the -webkit-, -moz- and -khtml- text preceding the border-radius style. These relate to the WebKit, Mozilla and Konqueror (Linux browser) css engines but there are more; -ms- for Microsoft and -o- for Opera just to complete the list of usual suspects.

In the period between the introduction of the border-radius functionality in the browser and ratification of the W3C recommendation, vendors cannot be sure what the exact interface will be. In the example above, each vendor has been faced with the same dilemma: what will the interface be? Will there be a delimiter between the vertical and horizontal radii? If so, will it be a comma or a forward-slash? Which way round will the radii be specified (vertical then horizontal or vice verse)? You can see that webkit made the false assumption regarding the delimiter but how were they to know.

Designers require early exposure to new features, especially when designing in the browser (which should be applauded, rather that Photoshop-ping everything). However, that is as far as I think they should be taken and prefixes should not be released into the wide for two reasons.

  1. The application of vendor prefixing in production code leads to the hideous example given above where the web developer has to code for all candidate browsers. We in the west all to often focus on the big five: Chrome, Explorer, FireFox, Safari and Opera. This is far from a global perspective – but just imagine the CSS mess we would have if we pandered to 10 or 20 browsers, all with their own take on border-radius; an that’s just one feature. I recognise that tools like SASS & Compass help considerably to the management of this kind of thing but why should we take such measures?
  2. And what happens when the interface is standardised. All the CSS files that have to be re-worded to remove redundant code. Besides, have we misunderstood progressive enhancement? Should we not be delivering a completely acceptable presentation for users for non-compliant browsers, and a enhanced presentation on standards-compliant browsers; and disregard the half-way house measure, however well intended.

Return to Articles

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s