CSS3 Tools For Managing Vendor Prefixes

 10/28/13

In the mad rush to bring CSS3 properties to the masses, browser vendors added their own vendor prefixes to the property names as an interim solution. Now, we have a bit of a mess as a result. I’m not going to enumerate all of the ways in which vendor prefixes are bad and how the world would be a better place without them. You already know that. What’s needed is a sane way to deal with them that doesn’t take up all of your development time. One approach, is to use tools that generate CSS rules for you from unprefixed CSS3 properties. That allows you, the developer, to blissfully imagine that prefixes never existed, by shielding you from those evil little monsters. In today’s article, we’re going to focus on several such tools, namely CSS3 Please!, Prefixr, -prefix-free, and CSSPrefixer.

A Range of Solutions

The current crop of free CSS tools on the market offer a range of solutions from clicking a button to project watchers that regenerate your CSS files whenever you rebuild your project. So whether you’re working on a small site or an Enterprise-scale one, there is a tool that will do the job for you. One key deciding factor should be ease of setup versus usability. The more automated the process, the more time you’ll save down the road. The downside there is that you’ll have to install and configure a framework and project structure to work with the tool.

Keeping that in mind, we’ll start at the “lite” end of the spectrum and progressively move towards more complex solutions.

CSS3 Please!

If you like your changes to have an immediate effect on page elements like I do, then I’ve got just the solution for you. CSS3 Please! is an online tool written by Paul Irish and Jonathan Neal. If that first name sounds familiar to you, then perhaps you’ve read about him in my article on the HTML5 Boilerplate Website Template. Irish is on a mission to create web sites that are truly look and function their best across all major browsers and platforms. As such, he snuck in fixes for things such as background color that leak outside of container borders as well as Internet Explorer support for a few features like IE filters.

But that’s not the only reason to recommend CSS3 Please!. Ease of use is another. Not only can you edit CSS values directly in page, but values in corresponding properties will automatically be updated as you type. Once you’ve updated a rule, you can copy it (or the entire page) via a click of a button to paste into your own stylesheet(s).

Prefixr

Another category of tools are CSS parsers. The most popular of the lot is Prefixr. It offers a large textarea into which you paste your unprefixed (or partially prefixed) code. Then clicking the “Prefixize” button converts everything for you in one fell swoop.

It may be ridiculously simple, but it’s powerful nonetheless! There are a number of options that you can select from to tailor the output to your requirements including:

• code compression
• line breaks
• exclusion of certain vendor prefixes

Moreover, you can go back to an essentially unprefixed format by selecting the Exclude All checkbox, so that only the official syntax is displayed.

-prefix-free

To generate your prefixed CSS, run CSSPrefixer from the command line as follows:

cssprefixer my1.css my2.css -- minify > result.CSS

Or from Python:

import cssprefixer cssprefixer.process(open('my.css').read(), debug=False, minify=True) 

Webassets has a filter for CSSPrefixer that will work with Django, Flask, or any other Python web framework .

Conclusion

Today, we explored the CSS3 Please!, Prefixr, -prefix-free, and CSSPrefixer tools for dealing with CSS3 vendor prefixes. Of these, only CSSPrefixer is meant to be utilized as part of a larger deployment framework. Next time, we’ll be taking a look at another tool called Compass. It’s part of a category called CSS preprocessors and includes a set of CSS3 mixins that can be included with your own code.