Let’s build a vendor prefix quick reference

I have my own SCSS file to handle vendor prefixes. It’s painful to keep updated and requires some serious hunting to get all the nitty-gritty details for each property. I have to dig through caniuse, css3please, MDN, webplatform.org, and a few others. Yes, I could use Autoprefixer, -prefix-free, Compass, or any number of other solutions. I would rather not because I like knowing all the nitty-gritty little things going on with my code and which browsers I’m supporting.

The problem is that most of these resources either go in-depth on each property, usage, and tons of other nifty info (which is super awesome, but not great when you’re just after prefixes) or they don’t quite provide enough information. This makes figuring out which prefixes should be applied fairly tedious.

Here’s an example of a mixin I use for the transform property. CodeKit strips any single line comments, so I tend to include a ton for reference. In this case, it lists all the browsers used by each prefix. (with a bit nicer styling and layout)

@mixin transform($transform...) {
    -webkit-transform: $transform; // Chrome 4+, Safari 3.1+, iOS Safari, Opera, Android 2.3+, Blackberry 10
    // -moz-transform: rotate(7.5deg);  // Firefox 3.5-15 
    -ms-transform: $transform; // IE 9
    // -o-transform: rotate(7.5deg);  // Opera 10.50-12.00 
    transform: $transform; // Firefox 16+, IE 10+, Opera 12.10+ 
}

I don’t necessarily want a mixin for ever prefixed property ever, but I would LOVE a single page quick reference with every prefixed property laid out in a similar fashion. Something like this:

transform

-webkit-transform: rotate(7.5deg); // Chrome 4+, Safari 3.1+, iOS Safari, Opera, Android 2.3+, Blackberry 10
-moz-transform: rotate(7.5deg);  // Firefox 3.5-15 
-ms-transform: rotate(7.5deg); // IE 9
-o-transform: rotate(7.5deg);  // Opera 10.50-12.00 
transform: rotate(7.5deg); // Firefox 16+, IE 10+, Opera 12.10+

transform-origin

-webkit-transform-origin: left top; // Chrome 4+, Safari 3.1+, iOS Safari, Opera, Android 2.3+, Blackberry 10
-ms-transform-origin: left top; // IE9
transform-origin: left top;

transition

-webkit-transition: all .2s ease-in-out; // Safari 5.1 - 6, iOS Safari 6.1, Android 2.3+, Blackberry 10
transition: all .2s ease-in-out;

I would like to build a website that has all the prefixed properties in alphabetical order (possible sortable) in a way that is easily copy/pasted, but I will need some help. I’d like to pull browser data and prefixes from caniuse or another reliable source to keep it as updated as possible, but that kind of thing is a bit above my head. If you or someone you know wants to pitch in, I’ll take any help I can get. I can spot the hosting/domain costs and do the front-end design work. If we build this, we should keep it open source. Ping me on twitter if you’re interested.