CSS 3 Finalize

Some css3 attributes needs to have a prefix in front in order to work in different browser. The plugin takes care of that so you only need to write without the prefix.

For example the css3 attribute box-sizing need to have the prefix

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

If you write without the prefix it won't work in those browser, you need the write each of them. Here is where this jquery plugin comes in. You only need to write it without the prefix and the plugin will automatically add the prefix. With this you will save time and the pain of rewriting same attribute many times.

How to use

Simply add this code to your site

<script src="https://github.com/codler/jQuery-Css3-Finalize/raw/master/static/jquery.css3finalize-latest.min.js"></script>

Alternative links

http://bsy.se/jquery.css3finalize-latest.min.js or http://static.zencodez.net/js/jquery.css3finalize-latest.min.js

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 parse on loading and parse when you want you could set

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

Tests

This script has been tested in IE 7, FF 3.6, Chrome 7, Safari 5, Opera 10.6 on windows

Some notes

• The script can only read link-tags where it source are from same domain. Except for local files in IE 7.
• Link-tags cannot be read on Chrome 7 on local files.

$.fn.Css is extended (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.