Tired of adding prefix for each broswer when it comes to the new css3 attributes?
JavaScript
Pull request Compare This branch is 20 commits behind codler:master.
Permalink
Failed to load latest commit information.
build
test
README.markdown
jquery.css3finalize.js
jquery.css3finalize.min.js

README.markdown

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
  • -o- in Opera

In additional besides adding vendor prefix, it can also do some more. Eg. it add support for alpha color (rgba) in background-color in IE7-8. See more https://github.com/codler/jQuery-Css3-Finalize/wiki/Rules-supported

How to use

Simply add this line of code to your site for latest version

<script src="http://static.zencodez.net/js/jquery.css3finalize-latest.min.js"></script>

or for version 2.1

<script src="http://cdnjs.cloudflare.com/ajax/libs/css3finalize/2.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

node : 'style, link' // Elements to parse css text.

shim : true // Enables support of rgba in ie7-8 and more, read Rules-supported section.

callback : function() {} // Calls after each node.

Tests

This script has been tested in IE 8-9, FF, Chrome, Safari 5, Opera on windows

http://jsfiddle.net/kuUTU/

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.
  • It seems IE8 strips out attributes on invalid value on known property in style-tag.

cssHooks

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

Example

$('a').css({'border' : '1px solid #000000', 'column-width' : 10});

In normal case you would have needed to add a prefix

$('a').css({'border' : '1px solid #000000', '-moz-column-width' : 10});

Feedback

I appreciate all feedback, thanks! If you would like to donate you can send to this Bitcoin address 1FCT3xhLBRD1MUxnS1ppcLrbH9SCeZpu6D