CSS 3 Finalize

With this plugin you can write CSS without the vendor prefixes. The plugin takes care of it and will automatically add vendor prefixes. This will save time and the pain of rewriting same attribute many times.

For example the css3 attribute transform need to have the prefix

• -moz- in Firefox
• -ms- in Internet explorer
• -webkit- in Chrome, Safari

How to use

Simply add this line of code to your site

<script src="https://cdnjs.cloudflare.com/ajax/libs/css3finalize/4.0.1/jquery.css3finalize.min.js"></script>

Once the script is loaded it will search for style-tags and link-tags (within same domain) and parse them.

Manual loading

If you don't want the script to automatically load and parse then you could set this code

<script>
// Disable autoload
window.cssFinalize=false;
// DOM is ready
jQuery(function($) {
	// Start parse
	$('style, link').cssFinalize();
});
</script>

Options

// Which node CSS3 Finalize should read and add vendor prefixes
node : 'style,link',
// If it should add the vendor prefixes
append : true,
// This will be called for each nodes after vendor prefixes have been appended
callback : function(css) {}

Tests

This script has been tested in IE 10-11, FF, Webkit

http://jsfiddle.net/Q96Gc/

Some notes

• The script can only read link-tags where it source are from same domain.
• Link-tags cannot be read on webkit and Opera on local files.

cssHooks

You can leave out the prefix when setting a style in jQuery css method.

Example

$('a').css({'width' : 'calc(100% - 80px)', 'column-width' : 10});

In normal case you would have needed to add a prefix

$('a').css({'width' : '-webkit-calc(100% - 80px)', '-moz-column-width' : 10});

LESS

Example using less.js post processing together with this script