Web Design & Graphics

Automatically add browser specific CSS3 Properties with CSSFX.js

cssfx.js download

cssfx.js downloadOne of the most annoying part of CSS3 is adding vendor/browser specific properties manually is css file. In order to make the design appear correctly in all browser, developers are forced to add -webkit-, -moz-, -o- in their design for different browsers. This work is time consuming as well as adding 4-5 lines of extra codes in each css increases the size of css file as well.

Solution : Automatically generate vendor specific CSS3

Luckily, there is a tiny script named CSSfx.js hosted is github that automatically generates required browser specific css3 on the client-side. This saves you lots of time, maintenance, and bandwidth and this script is only 2. 3kb! CssFx supports most of the CSS3 properties and has support even for IE6.

automatically generated browser / vendor specific css3 properties

Automatically generated browser / vendor specific css3 properties by cssfx.js.

What features are supported?

CSSFx supports almost all css3 properties such as box shadows, border radius, multiple columns, border image, RGBA, transforms, keyframes, transitions (and properties inside transitions), flexible box, gradients, and a ton of other useful things (like opacity, ellipsis, and inline-block).

Which browsers are supported?

It works on all major new and old browser even Internet Explorer 6 is supported. Minimum browser requirement : Firefox 3+, Chrome 1+, Internet Explorer 6+, Safari 3+, Opera 9+.

How do I use it?

Include the JS file, and give external stylesheets the “cssfx” class, that all. Example;

<link rel="stylesheet" href="yourstylesheet.css"> <script src="cssfx.min.js"></script>

You can download cssfx.js from the CssFx.js project hosted on Github.

Nepallica was started by Pritush and regularly updates this blog, beside Nepallica he also contributes to Nepalunderground.com. Connect with on Google+

How to download and install Internet Explorer 9

Previous article

How to register domain on name.com using Promo Code [With Video instruction]

Next article

You may also like

Leave a Reply

1 Comment threads
0 Thread replies
Most reacted comment
Hottest comment thread
0 Comment authors
How to Float:center in css ? Recent comment authors
newest oldest most voted
Notify of
How to Float:center in css ?

[…] auto;and remove float: code. This will automatically put the content to the center.Also read: Automatically add browser specific CSS3 Properties with CSSFX.jsI don’t do much CSS , but yesterday while editing a CSS theme I needed to move a content from […]