Removed Vendor Prefixes When Child to Other Vendor's Prefixed Block

[ScottMichaud]

If a vendor-prefixed rule occurs inside another vendor's prefixed block, I removed it. For instance, a -moz-transition will always be ignored inside a -webkit-keyframes block. With this patch, each vendor's block will only have that vendor's children and unprefixed children.

This resulted in a significant file size decrease of spinners.css (its size went from ~192KB to about ~134KB, which is a 30% savings). Of course, size reductions in individual files will be above or below this average.

Further optimizations are possible by removing prefixed rules from unprefixed blocks for browsers where the browser vendor unprefixed the rules before the blocks. For instance, -webkit-keyframes outlived -webkit-box-shadow, so you could remove all -webkit-box-shadows from unprefixed keyframes blocks, but I didn't. The gains will probably be just about pointless. Would be useful to add to a CSS optimizing application, though.

[jlong]

This is a great idea! We also need to update the Sass source files to use the correct prefixes. Is this something you could look into as well?

[ScottMichaud]

Turns out that all of the _base.scss mixins are nullified (and won't even compile) in newer versions of Compass. ((See: https://github.com/Compass/compass/issues/1798))

I basically gut _base.scss to be just @import "compass/css3"; It now compiles on Compass 1.0.3 and SASS 3.4.13, and it optimizes out mismatched vendor prefixes (and more). I kept _base as an import though, because future spinners might want to define their own mixins. Who knows?

I updated my branch (and the pull request) to use the new method. It will break compatibility with old versions of SASS and Compass, though. On the other hand, spinner.css is now just 103KB.

[jlong]

Perfect. Thank you!