Web Development

End your CSS3 vendor prefix nightmares by using -prefix-free

If you struggle with adding vendor prefixes to your CSS3, -prefix-free is the tool for you.

prefixfreelogo_101613.gif
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

PrefixFreeFigA_101513.gif

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

PrefixFreeFigB_101513.gif

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

PrefixFreeFigC_101513.gif

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.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

1 comments
grayknight
grayknight

Generally, prefixes are a bad idea. This does in some ways reduce that problem by only having the prefixes that apply to the given browser. So maybe this would serve as a workable solution for those that are having clients "require" features that can only be done with not yet standard CSS.

Editor's Picks