CSS3 rules are very hard to remember. This articles is intended to familiarize you with an awesome online free helper tool that will make your life easier by checking you existing css and fixing all the css3 styling rules by adding proper browser prefixes. The tool is here:

http://prefixr.com

CSS3 is becoming more and more popular every day. But writing proper fallbacks or browser specific prefix for every browser is kind of a tedious work to do. For example, you want to add border-radius to some element with class "rounded". As the specification suggest you might write:

.rounded {
border-radius: 5px;
}

But we must remember that there are several browsers that do not have added support for full spec list yet. But most of them have implemented those by their own prefix, nevertheless. In this case you have write:

.rounded {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

The first line acts on older webkit browsers and gets ignored by the rest. The second line gets parsed by older mozilla browsers whiles being ignored by the rest and finally the last line gets parsed by almost all the recent browsers that have started following the spec list.

 

The above example is a simpler one. Things get uglier when we try to implement complicated rendering styles like "transform". For example, consider a situation where you want to rotate an element 45 degree. According to spec you need to write only

.rotated {
transform: rotate(45deg);
}

But instead you have to write:

.rotated {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}

At the above example all the browsers specific tags got included in addition to the actual spec.

So, how do you expect to remember all those browser specific prefixes and which are available for which style? You don't need to. There is an online helper that can help you on this thing.

http://prefixr.com

This helper takes input of any css code and pushes browser specific prefixes wherever necessary. All you have to do is to write css using css3 spec or using any browser specific prefixes and pass the css through the above tool. It will take care of the prefix adding and sanitizing by itself.

prefixr site snapshot

Happy Prefixing! :-)

Add new comment