@dangayle

How to globally remove Opera and KHTML vendor prefixes from your Compass stylesheets

First of all, use Compass to write your stylesheets. That way this:

.test {
    -moz-border-radius-topright: 4px;
    -webkit-border-top-right-radius: 4px;
    border-top-right-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -webkit-border-top-left-radius: 4px;
    border-top-left-radius: 4px;
}

can be written like this:

.test{
    @include border-top-right-radius(4px);
    @include border-top-left-radius(4px);
}

But wait? This is what Compass ACTUALLY outputs (And I always forget that MS has decided to jump into the vendor pre-fixed CSS3 game also. Yay.):

.test {
    -moz-border-radius-topright: 4px;
    -webkit-border-top-right-radius: 4px;
    -o-border-top-right-radius: 4px;
    -ms-border-top-right-radius: 4px;
    -khtml-border-top-right-radius: 4px;
    border-top-right-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -webkit-border-top-left-radius: 4px;
    -o-border-top-left-radius: 4px;
    -ms-border-top-left-radius: 4px;
    -khtml-border-top-left-radius: 4px;
    border-top-left-radius: 4px;
}

I love Konquerer and Opera, really I do, but not at the expense of all that extra cruft in my CSS that only .5% of my total visitors will ever use. So how do I globally remove all Opera and Konquerer vendor-prefixed CSS3 from my Compass processed CSS?

At the top of your base SCSS file, add the following Compass variables:

$experimental-support-for-opera:false;
$experimental-support-for-khtml:false;

Now the results are what I want:

.test {
    -moz-border-radius-topright: 4px;
    -webkit-border-top-right-radius: 4px;
    -ms-border-top-right-radius: 4px;
    border-top-right-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -webkit-border-top-left-radius: 4px;
    -ms-border-top-left-radius: 4px;
    border-top-left-radius: 4px;
}

Pages