Lea Verou’s Prefix Free CSS

prefix-free

I probably shouldn’t just assume everyone knows about this. You have to be a web developer and also actively research and spend time learning new things. What developer doesn’t do that?

What it is: Prefix free is a single JS file (2kb) that you download and include with your site files.

What it does: It processes every style you’ve written in your CSS and adds any needed vendor prefixes.

Why use it?: Lea’s one JS file frees you up to write the code you want to and not have to worry about which browser the viewer is using to view your site.

To expand on the “not have to worry about which browser” statement above, you might know that web-standards are only now getting focused on ONE standard for all browsers. We are just currently coming out of a time where each developer targeting certain web browsers would have to use a specific prefix for rendering their CSS correctly in each browser! Yes really.

However this prefixing is only temporary as all browsers are working towards standardized statements. If you are interested in finding out if the property you are trying to use needs prefixing (the manual way, not using Lea’s prefix free method) you can visit the site caniuse.com which will show you what browsers support what you are trying to do.

Ideally, if we wanted a transition effect of 4 seconds for an element we would write in our CSS file:

Though the reality is that to support all browsers out there you’d have to write:

And that’s just what Lea’s prefix free does. You write the one statement (with no prefixes) and her code figures out all the prefixes that need to be added—freeing you up to bang out CSS all day long.

Check out Lea’s GitHub page to download and read more about Prefix Free. I love it!

Tags: , , ,

Leave a Reply

Other tags used in my blog:

 (1)  (6)  (1)  (16)  (1)  (1)  (17)  (1)  (16)  (1)  (1)  (7)  (1)  (4)  (15)  (5)  (2)  (27)  (9)  (1)  (11)  (4)  (4)  (4)  (8)  (1)  (6)  (1)  (4)  (1)  (1)  (1)  (3)  (1)  (3)  (4)  (7)  (3)  (3)  (4)  (1)  (1)  (2)  (1)  (7)  (10)  (12)  (2)  (6)  (1)  (3)  (16)  (2)  (3)  (1)  (5)  (1)  (27)  (4)  (4)  (9)