CSS3 Tools For Managing Vendor Prefixes

By Rob Gravelle

 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).

css3please_color_chooser (66K)

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.

prefixr (92K)

-prefix-free

-prefix-free is a client-side solution that works behind the scenes to add the current browser's prefix to any CSS code, if it has one. It's JavaScript-based, so all that's required is to include prefixfree.js in your page, usually right after the stylesheets.

-prefix-free is also extendable via a number of plugins. The Dynamic DOM plugin handles the adding of <link> and <style> elements to the document, as well as getting and setting unprefixed properties through the DOM, such as element.style.transform = 'rotate(90deg)';. The jQuery plugin lets you access unprefixed CSS properties through jQuery's .CSS() method. Viewport-relative units provides a static polyfill for the new vw, vh, vmin, vmax units when the units are not natively supported. Finally, the CSS Variables supports rudimentary CSS variable usage. It will add the necessary prefixes and use if a prefixed implementation is available. It also supports overwriting of variable values.

prefix-free (68K)

CSSPrefixer

Not to be confused with Prefixr above, CSSPrefixer is a more versatile tool that can be used online or installed to your own workstation to be included as part of your Python-driven deployment. As such, you can use python's easy_install module or pip if you have it. Having come across complaints that the former only installs dependencies, I would encourage you to go with the latter.

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 .

cssprefixer (38K)

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.


If you enjoyed this article, please contribute to Rob's rock star aspirations by purchasing one of Rob's cover or original songs from iTunes.com for only 0.99 cents each.

Rob Gravelle resides in Ottawa, Canada, and is the founder of GravelleWebDesign.com. Rob has built systems for Intelligence-related organizations such as Canada Border Services, CSIS as well as for numerous commercial businesses. Email Rob to receive a free estimate on your software project.

In his spare time, Rob has become an accomplished guitar player, and has released several CDs. His band, Ivory Knight, was rated as one Canada's top hard rock and metal groups by Brave Words magazine (issue #92).

Rob uses and recommends MochaHost, which provides Web Hosting at $1.95 per month, 2 LifeTime Free Domains, and 6 Months Free!



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date