クロスブラウザCSS3コードをDRYにする方法はありますか？私はCSS3でグラデーション背景を作成する場合

Question

は、私はこれをしなければならない。

background-color: #3584ba; 
background-image: -webkit-gradient(linear, left top, left bottom, from(#54a0ce), to(#3584ba)); /* Safari 4+, Chrome */ 
background-image: -webkit-linear-gradient(top, #54a0ce, #3584ba); /* Safari 5.1+, Chrome 10+ */ 
background-image: -moz-linear-gradient(top, #54a0ce, #3584ba); /* FF3.6 */ 
background-image:  -o-linear-gradient(top, #54a0ce, #3584ba); /* Opera 11.10+ */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#54a0ce', endColorstr='#3584ba'); /* IE */ 

を、これは本当に迷惑です。私は使用している場合は、私のコードのクロスブラウザの互換性になりますよりよい解決策、例えばjQueryプラグインは、そこにある：

background-image: -webkit-linear-gradient(top, #54a0ce, #3584ba); /* Safari 5.1+, Chrome 10+ */ 

例えば？ CSS3コードを書くのに役立つツールはありますか？

• http://lesscss.org/
• http://leafo.net/lessphp/
• http://sass-lang.com/
• http://compass-style.org/

これらは一般的にCSSプリプロセッサと呼ばれている。

Answer 1

これには多くのツールがあります。

あなたは（通常は "ミックスイン" と呼ばれる）関数定義のように、一度このような何かを書くことに終わるでしょう：

.linear-gradient(@start, @end) { 
    background-color: @end; 
    background-image: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end)); /* Safari 4+, Chrome */ 
    background-image: -webkit-linear-gradient(top, @start, @end); /* Safari 5.1+, Chrome 10+ */ 
    background-image: -moz-linear-gradient(top, @start, @end); /* FF3.6 */ 
    background-image:  -o-linear-gradient(top, @start, @end); /* Opera 11.10+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@start', endColorstr='@end'); /* IE */ 
} 

を次に適用する：

.my-class { 
    .linear-gradient(#54a0ce, #3584ba); 
} 
.my-other-class { 
    .linear-gradient(#ccc, #aaa); 
} 

は非常にお勧めします。

Answer 2

あなたはいつもあなたのためにそれらを生成するためのオンラインツールを使用することができます。

http://www.colorzilla.com/gradient-editor/

http://www.css3maker.com/css-gradient.html

Answer 3

は私のコードを作るよりよい解決策、例えばjQueryプラグインがあり、クロスブラウザ互換

クライアント側のソリューションでは、http://lea.verou.me/prefixfree/

固定されていないCSSプロパティのみをどこでも使用できるスクリプト。 これは、バックグラウンドで動作し、現在のブラウザの接頭辞をCSSコードの に追加します。

その後、唯一の神秘的にあなたのCSSから欠落している接頭辞の機能を使用する必要があります：

background-image: linear-gradient(top, #54a0ce, #3584ba); 

Answer 4

私は質問への答えを見つけました。それは "autoprefixer"と呼ばれるプログラムで、無料で、Grunt（他のものと同様に）を使います。あなたは編集されていないcssをファイルまたはディレクトリに与え、ターゲットとする特定のブラウザに基づいてプレフィックスを自動的に追加し、それらを新しいファイルに出力します。ここでそれを使用する方法についての記事です。著者Autoprefixerについて

ポスト：http://24ways.org/2013/grunt-is-not-weird-and-hard/は そして、あなたはreadmeファイルを見つけるために、GitHubの上でそれを見ることができます：絶対初心者のためのうなり声を使用する方法http://css-tricks.com/autoprefixer/ 。

私はまったく同じことを探していましたが、これは普通のCSSを処理するだけのベストソリューションでした。私はそれが助けて欲しい

Answer 5

https://autoprefixer.github.io/これを試してみてください。これは必ずしも簡単なコードを書くのに役立つわけではありません。これはjavascriptライブラリではありません。しかし、それはベンダープレフィックスを追加し、役に立たないCSSコードを取り除きます。

background-image: -webkit-linear-gradient(top, #54a0ce, #3584ba); 
background-image: linear-gradient(top, #54a0ce, #3584ba); 

あなたのコードを入れて、それは私が得る結果です。 （私はその結果を得るために元のコードから-webkit-を削除しました）。