Do You Exclusively Use webkit Prefixes?

You've undoubtedly read about the vendor prefix web development drama of the week. If not, the W3C mailing lists have been on fire ever since it was discussed (and essentially announced) that Microsoft, Opera, and Firefox will begin to adopt and style webkit-prefixed properties. One of the reasons behind this decision is that we developers aren't being responsible when coding our stylesheets; we're applying too many webkit-specific properties, without considering other browsers.

Upon hearing this, I was left thinking to myself: is this really true?

Huh? What's Going On?

To catch up on the hot drama, gives the following articles a read:

The basic gist is that non-webkit vendors are planning to recognize and style the -webkit prefix on a number of CSS3 properties. This is partially due to the fact, they say, that too many developers have been lazy, relying too much on Webkit, and not updating older projects (especially so for mobile designs). As these competing browsers see it, they have no choice; their hands are being forced.

It's one thing to toy around with non-standard, Webkit-specific properties for fun (such as -webkit-text-stroke); we've even posted similar articles on Nettuts+. However, it's another thing entirely if developers are, for example, exclusively using Webkit's prefix when applying CSS gradients or transitions.

Prefixing Services

An often-touted excuse for not properly prefixing all CSS3 properties is that it can be considerably difficult to keep track of which prefixes are necessary for any given property. This is certainly true, but has our community not provided a variety of solutions?

Can I Use

To begin with the manual, look-up route, CanIUse.com is a fantastic reference when we need to determine if a particular browser supports a CSS3 property. If it is supported, but requires a prefix, CanIUse will tell you.

It's an essential bookmark for all web developers (and is not limited to only CSS).

Compass

Compass is a framework for Sass that, among other things, will automatically handle the process of prefixing your CSS3 properties. For instance, to apply cross-browser, sanity-saving box-sizing to a website, with CSS, we'd write:

* {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
}

However, when using Compass, we can simply include a mixin, like so:

* {
  @include box-sizing(border-box); 
}

This way, designers never need to concern themselves with whether or not a particular browser provides a prefixed version of a new property; Compass does it for you.

Nettuts+ Prefixr

At Nettuts+, we've, also, provided an easy way to "auto-prefix." Either use the website or its API in your favorite code editor to automatically filter through your stylesheet, and update any CSS3 properties that are missing a prefixed version. This can even be integrated into your build script, so that you only ever code using the official syntax.

The difference between Prefixr and Compass is that the former doesn't require a preprocessor, if you prefer to code all CSS by hand. Simply feed Prefixr a stylesheet, and it'll do the rest.

Prefix-Free

Lea Verou's Prefix-Free is a neat solution as well. It's unique in that it's a JavaScript-based solution that dynamically determines which browser is being used, and then assigns the necessary prefixes to the stylesheet. Simply import Prefix-free, use the official syntax for the new CSS3 properties, and it'll take care of the rest.

While some may view the fact that it depends on JavaScript to function as a disadvantage, a considerable bonus to this method is that your stylesheets become both smaller and more maintainable. For development purposes, it's a great choice; however, for production, you might consider using a different tool, as there can be considerable performance consequences.

CSS3 Please

CSS3Please is a nifty service that provides copy-and-paste, cross-browser CSS. Adjust the values according to your needs, and you instantly have a snippet that will correctly target all applicable browsers.

Are You Not Using These?

If you're a preprocessor user who prefers to create his or her own CSS3 mixins, then fantastic; however, otherwise, are some of you not using these services? If so, why not? It's understandable that Firefox and Microsoft may feel forced into supporting the webkit prefix for some properties, despite their better judgment. Particularly for older and smaller projects, we're not always great about updating the stylesheets as needed. This is precisely why prefixed properties have hung around for so long, despite the fact that properties like border-radius have long since been supported, unprefixed. Webkit doesn't want to "break" these websites.

So what's the deal? Are we not being responsible?

Christian Heilmann has launched a project, called Prefix the Web; it encourages developers to update GitHub projects to include all necessary browser prefixes. Unfortunately, the initiative may be too late. What do you think?

HIGHLIGHTS OF THE DAY