The W3C guru Lea Verou created a nifty JavaScript called -prefix-free. She says it
allows you to “Break free from CSS prefix hell!”

With -prefix-free, you pull down the file from the resource page and make
the script call within your web page documents to the source .js file, and this
JavaScript does all the work for you in the background; this allows you to skip
writing in vendor prefixes for new CSS3 styling that otherwise requires you to
code specific lines of code for most of the newly defined properties. You can
now code all un-prefixed CSS properties everywhere, while the JavaScript adds
the current browser’s prefix to any CSS3 code you write, and it is only invoked
when needed from your original stylesheets. If you have been struggling with
adding vendor prefixes to your CSS3, this is the tool for you.

Browser support

According to Lea, the current browser support for -prefix-free is IE9+, Opera 10+, Firefox 3.5+, Safari 4+, and Chrome on desktop and Mobile Safari, Android browser, Chrome and Opera Mobile on mobile.

Features

The four main features that help make -prefix-free such an
easy implementation are:

  • It processes every stylesheet in <link> or
    <style> elements and adds a vendor prefix where needed by the current
    browser.
  • It processes elements with a style attribute and
    adds a vendor prefix where needed by the current browser.
  • It takes care of new <link> or
    <style> elements, and any style attribute changes and CSS Object Model (CSSOM) changes (this
    feature requires a plugin).
  • It allows the jQuery .css() method
    “get” and “set” un-prefixed properties (this feature
    requires a plugin).

Known limitations

Lea provides this list of the JavaScript’s known limitations:

  • It does not support @import files.
  • Cross-origin linked stylesheets are not
    supported unless they are Cross-Origin
    Resource Sharing (CORS)-enabled.
  • Un-prefixed linked stylesheets will not work for
    local testing in Chrome and Opera unless you have a local web server running. Alternatively,
    you can enable local XHR
    for Chrome by adding the flag –allow-file-access-from-files. And to enable
    local XHR for Opera, you have to add the opera:config#UserPrefs|AllowFileXMLHttpRequest,
    check that option, and select Save.
  • Un-prefixed values in inline styles and in the
    style attribute won’t work in IE and Firefox versions < 3.6, and un-prefixed
    properties won’t work in Firefox versions < 3.6.

Download and install -prefix-free

The download
is only 2 KB when gzipped and is 6 KB when it is not compressed. The file is
named prefixfree.min.js, and is
available under an MIT license,
which means that you are free to use a copy of the software as is without any warranty.
The typical call to the file from within the <head> of your web
page documents would be something like this snippet:

<script src="js/prefixfree.min.js" type="application/javascript"></script>

It is recommended that you add the js file just after your stylesheets to
minimize the possibility that Flash of Unstyled Content (FOUC) will occur.

Demonstration testing

I created a demo index.html file and an added styles.css file and then
incorporated several CSS3 properties within the stylesheet and tested them in
Chrome without the typical vendor prefixes. I included CSS3 styling code that I
borrowed from several of my previous articles about CSS3, as well as code that Lea shared on dabblet for creating a trapezoid and trapezoid tab, and they include properties for transform, border-radius,
text-shadow, and transform-origin. As I expected, none of them worked without
the vendor prefixes in Chrome (Figure A).

Figure A

The CSS3 code snippet is shown below:

/** Easy trapezoids with 3D transforms **/

p {
position: relative;
display: inline-block;
padding: 1em;
margin: 2em;
}

p::before {
content: ”; /* To generate the box */
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
background: skyblue;
transform: perspective(4px) rotateX(1deg);
}

p.tab::before {
/* Tip by @krofdrakula */
border-radius: 10px 10px 0px 0px;
}

/* Text-shadow and Skew CSS3 Transforms */

.bgrd {
width:700px;
height:400px;
background:#aaa;
text-align:center;
border-radius:50px;

}

h1.skew {
font-family: ‘times new roman’, serif;
padding:0; margin:150px 0 0 150px;
position:relative;
color:#fff;
font-size: 100px;
text-shadow:
-1px -1px 0 #f8f8f8,
-2px -2px 0 #f0f0f0,
-3px -3px 0 #e8e8e8,
-4px -4px 0 #e0e0e0,
-5px -5px 0 #d8d8d8,
-6px -6px 0 #d0d0d0,
-7px -7px 0 #c8c8c8;
transform-origin: bottom left;
transform: skewY(-15deg);
position: absolute;
z-index: 100;
}

.skew:before {
content:attr(title);
color:transparent;
position:absolute;
left:0; bottom:0;
text-shadow:
0 0 5px rgba(0,0,0,.25);
0 0 10px rgba(0,0,0,.2);
0 0 20px rgba(0,0,0,.15);
0 0 40px rgba(0,0,0,.1);
transform-origin: bottom left;
transform: skewX(60deg);
z-index:-1;
}

.word_wrap {
word-wrap: break-word;
width:200px;
}

Then, I attached the -prefix-free JavaScript file to the index.html file,
updated the hosted web page document and the styles.css file, and refreshed the
browser, and the expected CSS3 properties performed as promised. Figure B shows
the result as displayed in Chrome.

Figure B

Resources

Along with the JavaScript, Lea provides the following resources.

Test drive

You can run an online Test drive using
the prefixing in real-time writing some CSS in the left panel and then viewing
the prefixed results in the right panel (Figure C). In this example, the
transform: rotate, the animation: rotate, and the transform perspective CSS on
the left panel is shown with the resulting prefixed CSS on the right panel.

Figure C

FAQ

Lea offers an FAQ
with questions and answers to the most common issues that folks have encountered when implementing -prefix-free.

Plugins

Lea rounds out her offering with several plugins that help add
flexibility and integration to the JavaScript, including a dynamic DOM plugin,
a jQuery plugin, and CSS variables.

Conclusion

If you have been struggling with creating vendor-specific prefixes for
all the innovative CSS3 properties, you can instead add in Lea’s -prefix-free JavaScript and let it handle most of the work for you.