CSS3 vendor Prefixes and a nice box sizing tool

Chris Coyier tweeted last night about a CSS3 tool called box-shadow.info.

If you're gonna make a CSS3 helper app thingy, do like box-shadow.info and help people understand prefixes/compatibility.

It's a great tool but what I love about it isn't the the tool itself its the way that it explains how vendor prefixes and compatibility work.

For example if you untick the Gecko vendor prefix (-moz) then the code is removed and the browser compatibility changes Firefox from 3.5+ to 4.0+

Screen shot with the Gecko prefix

Screen shot - without the Gecko Prefix

What does this mean? Well it means at version 4 of Firefox, they stopped requiring the vendor prefix.

If you switch off -webkit then it changes the compatibility of Chrome from 4.0+ to 10.0+.

So what?

I think this tool gives people a better understanding of how vendor prefixes work and the various differences between prefixes and browser versions.

As Chris suggests I think it would be great if people creating code generators like this would take time to explain the impact that vendor prefixes have. #HighFive http://box-shadow.info

If you have no idea what vendor prefixes are take a look at this article I wrote on the subject.

Published by thebeebs

Martin works for Oracle as a Developer Evangelist. He’s been a developer since the late 90s and loves figuring out problems and experimenting with code. Read more