Advertisement
Editorials

Do You Exclusively Use webkit Prefixes?

by

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

CanIUse

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

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

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

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

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?

Related Posts
  • Code
    Web Development
    Alternatives to PrefixrCss3 wide retina preview
    With Prefixr no longer being developed, let's look at a few alternatives for managing CSS vendor prefixes.Read More…
  • Web Design
    HTML/CSS
    Why I Choose Stylus (And You Should Too)Stylus thumb
    The world of front end web development has been steadily increasing its uptake of what we call "CSS Preprocessors", which extend the functionality of regular CSS. Arguably the two most well known, with the greatest user base, are LESS and Sass/SCSS. However there is a third preprocessor that hasn't received quite as much attention, and that's Stylus.Read More…
  • Web Design
    HTML/CSS
    A Simple Mixin Alternative to Standard CSS GridsMixin grid retina
    Over the past few years CSS grid systems have become a very popular way of rapidly producing layout scaffolding in web design. They can be a fantastic time-saving resource, with talented coders having intelligently crafted systems which cater to a wide array of possible layouts designers might need to create. However, this isn't the only way to approach grid-based web layouts, and today we're going to examine an alternative.Read More…
  • Code
    HTML & CSS
    AbsurdJS or Why I Wrote My Own CSS PreprocessorAbsurd 400
    As a front-end developer, I'm writing a lot of CSS and using pure CSS is not the most efficient way nowadays. CSS preprocessors are something which have helped me a lot. My first impression was that I finally found the perfect tool. These have a bunch of features, great support, free resources and so on. This is all true and it still applies, but after several projects, I realized that the world is not so perfect. There are two main CSS preprocessors - LESS and SASS. There are some others, but I have experience with only these two. In the first part of this article I'll share with you what I don't like about preprocessors and then in the second part I'll show you how I managed to solve most of the problems that I had.Read More…
  • Web Design
    HTML/CSS
    Foundation's Sassy Styles ExplainedFoundation sass retina1
    In this tutorial we'll cover what can be done with the flexible Sass styles included in the Foundation framework. A lot of these offer a more customisable feature set than that of the CSS version, plus there are shortcuts which can be used to style items such as the top bar quickly and easily.Read More…
  • Web Design
    HTML/CSS
    Stir up Your Own Delicious Sass MixinsMix preview
    Sass is designed to help write CSS faster; mixins are of the features that make it possible. Several heavyweight libraries exist with complex formulas for every situation, but today I’m going to show how to stir up your own mixins that complement existing workflows.Read More…