PrefixFree: No More CSS Prefixes

In this article we will discuss a useful and freely available tool, PrefixFree. Which will hopefully help us break free from the all the CSS prefix stuff; we used to write in our css to make it compatible with more and more browsers.

A Common problem we all face while using CSS3 properties in our stylesheets. See this sample css code below

.element {
-webkit-box-shadow: 2px 2px 1px -2px black;
-moz-box-shadow: 2px 2px 1px -2px black;
box-shadow: 2px 2px 1px -2px black;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

Solution: PrefixFree (only 2kb gzipped)

The script processes linked style sheets (except the ones in @import rules), embedded style sheets, inline styles, even CSS added afterwards (such as in new elements, CSSOM property changes and lookups).

The good thing about prefixfree is that once the browser vendors drop their prefixes for CSS3 properties, you can just remove the script and your CSS will still work. Your code will continue to be valid CSS3.

Another useful feature is that the script auto-detects which properties need prefixing. Its code has no property list. It detects which properties are supported and which of them are supported only with a prefix. Everything is based on feature detection.

Sample code after using PrefixFree:

[css].element {
box-shadow: 2px 2px 1px -2px black;
border-radius: 10px;

PrefixFree adds the current prefix at runtime, so the user downloads a smaller CSS file.

A pre-processed CSS will be faster because no client-side processing is involved; But all the prefixes need to be downloaded, which adds lots of bloat also in our stylesheet. And if we are making a heavy use of CSS3 in our stylesheets, that’s far more bloat than the size of prefixfree.js.

Finally, We think it is a matter of our own decision and whether the advantages are more important for us than the disadvantages.

Previous Post     Next Post