Home » CSS » CSS3 » Prefix-free
CSS3 No Comments

Prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed.

I discovered Prefix-free the other day and think it is a genius idea! I find it a bit annoying to have to add in vendor prefixes -webkit-, -moz- and -o- for every CSS3 property I want to use, so in effect, adding each one in 3 times to get them to work in the most recent browsers. With this script, you can add the property without the prefixes into your stylesheet, and the script will detect which browser you are using to view the page and work behind the scenes to add on the prefixes required to view that effect.

For example, if you are viewing a page in Google Chrome, it would turn this:

div {
	box-shadow: 0 0 5px 5px #999;

Into this:

div {   
    	-webkit-box-shadow: 0 0 5px 5px #999;

To get it to work, follow these steps:

  1. Download the Prefix free javascript file
  2. Link the script to your HTML page
  3. In your CSS file, use unprefixed CSS
  4. Check it in various browsers to see if it works