Friday, December 20, 2013

Transfer your CSS to cross browser compatible using prefixr



For example, for linear gradient from top to bottom for background in CSS (no browser supports linear gradients using only this standard syntax)
background: linear-gradient(red, blue);

I have to write four other CSS rules for each of these for the different browsers.
 /* For Safari and Chrome */
 background: webkit-linear-gradient(red, blue);
 /* For Firefox */
background: -moz-linear-gradient(red, blue);
/*for Opera */
background: -o-linear-gradient(red, blue);

/* For Microsoft Internet Explorer */
background: -ms-linear-gradient(red, blue);


 
It is quite time consuming to write all these CSS rules for different browsers. We can use prefixr website:
 http://prefixr.com/
 In the input box, you paste
background: linear-gradient(red, blue);
then click Prefixize button, you can get
background: -webkit-linear-gradient(red, blue);
background: -moz-linear-gradient(red, blue);
background: -o-linear-gradient(red, blue);
background: -ms-linear-gradient(red, blue);
background: linear-gradient(red, blue);

You can save a lot of time for  writing your CSS scripts.

No comments:

Post a Comment