CSSトランスコーダ：ベンダー固有のプロパティをレンダリングする

Question

ベンダー固有のプロパティをスタイルシートに自動的に追加する「トランスコーダー」の種類があるのだろうか？ 「私はJavascript solution見つけた

div.rounded { 
    border-radius: 5px; 
    -mox-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    opacity: 0.8; 
    filter:Alpha(Opacity=80); 
} 

、私はむしろしたい：私はこの出力トランスコーダを介して、ファイルを実行することができます

div.rounded { 
    border-radius: 5px; 
    opacity: 0.8; 
} 

：例えば私はこのようなスタイルシートを作成した場合JSに依存するのではなく、スタイルシートをあらかじめコンパイルしてください。

Answer 1

この種のツールには、Compass CSS Framework（http://compass-style.com）があります。 jQueryがJavaScriptにどのようなものをCSSに与えるかは、すべての詳細を記入して正規化することです。コンパス（とSASS）で

あなたはかなり楽に求めているものを行うことができます。

div.rounded { 
    @include border-radius; /* by default the radius is 5px */ 
} 

フレームワークがあまりにも思われる場合の出力は、その後

div.rounded { 
    -webkit-border-radius: 5px 5px; 
    -moz-border-radius: 5px/5px; 
    -o-border-radius: 5px/5px; 
    -ms-border-radius: 5px/5px; 
    -khtml-border-radius: 5px/5px; 
    border-radius: 5px/5px; 
} 

の線に沿って何かになりますあなたのニーズに重い手を加えれば、custom mixin with argumentsのようなより基本的なSASS解決策も考えられます：

@mixin my-border-radius($radius) { 
    -webkit-border-radius: $radius; 
    -moz-border-radius: $radius; 
    -o-border-radius: $radius; 
    -ms-border-radius: $radius; 
    -khtml-border-radius: $radius; 
    border-radius: $radius; 
} 

div.rounded { 
    @include my-border-radius(5px); 
}