jQuery css gradient

Haben einen Farbverlauf hintergrund für ein element ich tun so etwas wie dieses:

.css('filter','progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#FFFFFF\', endColorstr=\'#'+event.backgroundColor+'\', gradientType=1)')
.css('background-image','-webkit-gradient(linear, left top, right bottom, color-stop(0.1, #FFFFFF), color-stop(0.99, #'+event.backgroundColor+'))')
.css('background-image','-moz-linear-gradient(top left, #FFFFFF 0%, #'+event.backgroundColor+' 100%)')
.css('background-image','-o-linear-gradient(top left, #FFFFFF 0%, #'+event.backgroundColor+' 100%)')

Nun, nicht jQuery angenommen, um alle zu eliminieren, die Arbeit in Bezug auf cross-browser-Kompatibilität Probleme? gibt es eine bessere Möglichkeit, das zu tun. Ohne den Einsatz zusätzlicher plugins?

  • Jquery beseitigen/reduzieren js Verwandte cross-browser-Probleme wird es nicht lösen Ihren css cross-browser-Probleme. Als für das, was ich weiß, jQuery wird nicht beheben das problem für dich.
  • Man könnte einfach definieren, alle, die in Ihrem stylesheet. Nicht sicher, warum Sie der Verwendung von jQuery, es sei denn, Sie müssen dies dynamisch oder so etwas.
  • Nicht verwenden "background-image:" - verwenden Sie "hintergrund:".
  • legen Sie alle diese in ein stylesheet unter einer Klasse, dann wechseln die Klasse mit jquery.
  • Wenn Sie die Verknüpfung syntax background dann, wenn Sie ändern Sie die hintergrund-Eigenschaften, die später, zum Beispiel background-position, dann Sie können auch überschreiben Sie den Farbverlauf in den hintergrund. Die CSS-Spezifikationen empfehlen nicht die Verwendung von Kurzschrift-codes nicht mehr.
  • Gute Entscheidung, auf den Grund nicht, die Verknüpfung zu verwenden.
  • gute Lösung in einigen Fällen, andere nicht. Beim arbeiten mit dynamischen Farben, die Sie nicht machen Millionen von CSS-Stilen zu berücksichtigen, für die Millionen von Farb-combos 🙂
  • Upps, ich sehe jetzt Brandon bedeckt den gleichen Kommentar, den ich hatte 😛
  • Ich weiß nicht, dass die Generalisierung ist korrekt. Zum Beispiel mit "opacity" jquery behebt die cross-browser-Probleme in gleichwertiger Weise zu dem, was er fordert hier mit den Steigungen. Ich Wette, dass die jquery-Menschen nur nahm und entschied, welche cross-browser-Probleme aufnehmen, um nicht aufblasen den code zu viel. Oder auch, wie wahrscheinlich: CSS gradient Popularität ist höher, und es konnte nur nicht umgesetzt werden noch.
  • die Kombination von Ihnen in einem einzigen .css-Aufruf wird es besser machen. Und jquery nicht umgehen einige Hersteller Präfixe für Sie, aber nicht für alle Eigenschaften.

InformationsquelleAutor iLemming | 2011-04-20
Schreibe einen Kommentar