jQueryのバックグラウンドグラデーションの-os -/- ms接頭辞が機能しない？

Question

ここでは、-webkit-gradientと連携していないjQuery .css()についての投稿をいくつか見てきましたが、まだ-ms-linear-gradient、-o-linear-gradient、linear-gradientのいずれかが見つかりませんでした。

私は、ColorZillaから直接取られた、ブラウザ間の互換性のために最も一般的なCSSプロパティを使用して、要素の背景グラデーションを#hexに設定する機能を作成しました。

は、ここで私が話している特定のスニペットを見ます：

$(elem).css({ 
     'background': b, 
     'background': '-moz-linear-gradient(top, '+a+' 0%, '+b+' 100%)', 
     'background': '-webkit-gradient(linear, left top, left bottom, color-stop(0%,'+a+'), color-stop(100%,'+b+'))', 
     'background': '-webkit-linear-gradient(top, '+a+' 0%,'+b+' 100%)', 
     'background': '-o-linear-gradient(top, '+a+' 0%,'+b+' 100%)', // Breaks execution 
     'background': '-ms-linear-gradient(top, '+a+' 0%,'+b+' 100%)', // Breaks execution 
     'background': 'linear-gradient(top, '+a+' 0%,'+b+' 100%)', // Breaks execution 
     'filter': 'progid:DXImageTransform.Microsoft.gradient(startColorstr=\''+a+'\', endColorstr=\''+b+'\',GradientType=0)' 
     }); 

私はときにアクティブ（いずれかをまとめて、または個別に）ことを次の各プロパティに//breaks executionコメントを配置したブレークは、スクリプトの実行（他の特性、例えばbackground: b（もちろんb変数であること）が設定されている。私は絶対にこれがある理由として困惑

を。

これまでのところ私が試してみた：

• 二重引用符の代わりに単一引用符を使用します。
• 可変使用（+a+,+b+）を実際の16進数に置き換える。

私はおそらく、それらの3つの文字がエスケープされなければならないと思っていますか？

これがなぜかを理解するための助けがあれば、大いに感謝します！

Answer 1

JavaScriptオブジェクトのbackgroundプロパティを何度も設定して再設定しています。

最後に、.css()に渡すオブジェクトをログに記録すると、リスト内の最後のbackground値とfilterの2つのプロパティしか含まれていないことがわかります。

だからあなたのコードは同等です：あなたは、代わりにこの（jsfiddle demo）のような何かを試すことができ

$(elem).css({ 
    'background': 'linear-gradient(top, '+a+' 0%,'+b+' 100%)', 
    'filter': 'progid:DXImageTransform.Microsoft.gradient(startColorstr=\''+a+'\', endColorstr=\''+b+'\',GradientType=0)' 
}); 

：

var i, l, backgrounds = [ 
    '-moz-linear-gradient(top, '+a+' 0%, '+b+' 100%)', 
    '-webkit-gradient(linear, left top, left bottom, color-stop(0%,'+a+'), color-stop(100%,'+b+'))', 
    '-webkit-linear-gradient(top, '+a+' 0%,'+b+' 100%)', 
    '-o-linear-gradient(top, '+a+' 0%,'+b+' 100%)', 
    '-ms-linear-gradient(top, '+a+' 0%,'+b+' 100%)', 
    'linear-gradient(top, '+a+' 0%,'+b+' 100%)' 
]; 

// Try each background declaration, one at a time 
// Like in a stylesheet, the browser should(!) ignore those 
// it doesn't understand. 
for(i = 0, l = backgrounds.length ; i < l ; i++) { 
    $(elem).css({ background: backgrounds[i] }); 
} 

$(elem).css({ 
    'filter': "progid:DXImageTransform.Microsoft.gradient(startColorstr='"+a+"', endColorstr='"+b+"',GradientType=0)" 
}); 

このコードはまったく当然のことながら、非常に効率的ではありません。また、複数の宣言を理解しているブラウザでは、既に動作している宣言を無意識に上書きします。それで、最適に見えるように最適化してください。