-prefix-free Script and Prefixes in CSS

Question

I am going to be remodeling a website and will be using the -prefix-free script to eliminate my prefixes in the CSS. However, some of the CSS I will not be editing. This CSS does contain some prefixes. If I leave those prefixes in the CSS will -prefix-free still work correctly or are there reasons I should go through the CSS files and eliminate all prefixes?

In other words: Will prefixes in the CSS break or cause weird functionality in conjunction with the -prefix-free script?

Answer 1

-prefix-free will leave any properties already prefixed in your stylesheet alone. In fact, it will not add other prefixes for the same property or rule if you specify at least one individual prefix for it.

For example, if you have

-webkit-border-radius: 10px;

Then -prefix-free will not add -moz-border-radius for Firefox versions older than 4.0, nor will it add an unprefixed border-radius for any browser. WebKit browsers will apply the border radius as usual, since they understand -webkit-border-radius.

If you want -prefix-free to add prefixes for other browsers, you will need to change that to

border-radius: 10px;

So, it depends on which properties you want it to apply all the necessary prefixes for. If you want -prefix-free to apply prefixes everywhere that is necessary, you'll need to go through your stylesheet and remove any prefixes that were already there.

Of course, keep in mind that you may want to keep prefixes hardcoded for certain properties, such as WebKit-specific pseudo-elements, -webkit-appearance and -webkit-text-size-adjust. Again, this depends on the property; you may have to research and decide based on your layout needs.

The script's homepage contains a test drive which you can use to preview the results for prefixed and unprefixed properties. Bear in mind that the results are tailored to the browser you use to run the test drive, so if you add border-radius and run it in Firefox 4 or later, you won't see any changes. However, if you place a -webkit-border-radius declaration instead, you'll still see that -prefix-free leaves it untouched in the preview pane, without even adding the unprefixed property, regardless of the browser you use.

Answer 2

The -prefixes are only for supporting features that are present in the browser, but have not been standardized yet, or have not complete implementation.

Since a lot of spec has been standardized, the requirement of prefixes for certain properties are no longer required, and have been present since a lot of versions. example : border-radius.

You can have a look here, to see which properties still require the prefix.

There will be no effect when using a CSS, with prefixes for some elements, while no prefixes for the others.