| title | authors | intro | types | categories | published | updated | status | ||||
|---|---|---|---|---|---|---|---|---|---|---|---|
CSS3 vendor Prefixes and a nice box sizing tool |
|
Chris Coyier tweeted last night about a CSS3 tool ... |
|
|
2012/03/06 12:00:00 |
2012/03/06 13:00:00 |
archived |
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.
- Chris Coyier (@chriscoyier) March 5, 2012 <script src="images/widgets.js" charset="utf-8"></script>
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+
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+.
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.