Require all gradient definitions(すべてのグラデーション接頭辞を定義する必要があります)

文章はcsslintの中国語版の訳文で、原文をクリックして英語版を見ることができて、もし翻訳の間違いや誤字などに出会ったら、伝言を残して~訳文の内容は不定期に更新して~カタログに戻ってください
2011年12月現在、CSSグラデーションの標準定義はまだ未定で、つまり遊覧器にまたがって色グラデーションを実現するには、多くの異なる版の遊覧器接頭辞を使用する必要がある.これまでCSSグラデーションには5つの異なる遊覧器接頭辞がありました.

-ms-linear-gradient and -ms-radial-gradient for Internet Explorer 10+

-moz-linear-gradient and -moz-radial-gradient for Firefox 3.6+

-o-linear-gradient and -o-radial-gradient for Opera 11.10+

-webkit-linear-gradient and -webkit-radial-gradient for Safari 5+ and Chrome

-webkit-gradient for Safari 4+ and Chrome (aka "Old WebKit")

簡単な二色グラデーションを実現するには、次のコードが必要です.

background: -moz-linear-gradient(top,  #1e5799 0%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #1e5799 0%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #1e5799 0%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #1e5799 0%,#7db9e8 100%); /* IE10+ */

このような多くの接頭辞では、符号化では、そのうちの1つまたは複数のグラデーション接頭辞を少なく書くことを忘れがちである.

ルールの詳細

ルールID:gradientsこの規則では、ランプを使用するときに一部の遊覧器接頭辞のみが定義され、すべての遊覧器接頭辞が定義されていない場合に警告が表示されます.
次の例では、警告を示します.

/* Missing -moz, -ms, and -o */
.mybox {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8));
    background: -webkit-linear-gradient(top,  #1e5799 0%,#7db9e8 100%);
}

/* Missing old and new -webkit */
.mybox {
    background: -moz-linear-gradient(top,  #1e5799 0%, #7db9e8 100%); 
    background: -o-linear-gradient(top,  #1e5799 0%,#7db9e8 100%);
    background: -ms-linear-gradient(top,  #1e5799 0%,#7db9e8 100%);
}

次の例では、警告は表示されません.

.mybox {
    background: -moz-linear-gradient(top,  #1e5799 0%, #7db9e8 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8));
    background: -webkit-linear-gradient(top,  #1e5799 0%,#7db9e8 100%);
    background: -o-linear-gradient(top,  #1e5799 0%,#7db9e8 100%);
    background: -ms-linear-gradient(top,  #1e5799 0%,#7db9e8 100%); 
}