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
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
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.
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.
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
- 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).
- 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
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:
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.
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).
The CSS3 code snippet is shown below:
/** Easy trapezoids with 3D transforms **/
content: ”; /* To generate the box */
top: 0; right: 0; bottom: 0; left: 0;
transform: perspective(4px) rotateX(1deg);
/* Tip by @krofdrakula */
border-radius: 10px 10px 0px 0px;
/* Text-shadow and Skew CSS3 Transforms */
font-family: ‘times new roman’, serif;
padding:0; margin:150px 0 0 150px;
-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;
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;
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.
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.
Lea offers an FAQ
with questions and answers to the most common issues that folks have encountered when implementing -prefix-free.
Lea rounds out her offering with several plugins that help add
a jQuery plugin, and CSS variables.
If you have been struggling with creating vendor-specific prefixes for