We need to find a way to avoid writing a lot of duplicated CSS code only to implement all the existing browser experimental prefixes. A good solution is provided by Prefix Free (http://leaverou.github.com/prefixfree/), a small JavaScript library created by Lea Verou that detects the user's browser and dynamically adds the required prefixes. To install it, we just need to download the .js
file in a js
folder within our project, name it prefixfree.js
, and add the corresponding script tag to index.html
just after the css
request:
<script src="js/prefixfree.js"></script>
From this point on, we don't have to worry about prefixes anymore because this library will do the heavy lifting for us. There are, however, some minor drawbacks; some properties are not automatically detected and prefixed (for example, radial-gradient
and repeating-radial-gradient
are not prefixed with -moz-
) and we have to suffer a brief delay, roughly equal to the script download time...