jQuery CSS Abstraktion

Zunächst einmal sollte gesagt werden, dass Sie versuchen sollten, Ihre Stile und Ihr JavaScript voneinander fernzuhalten. Wenn Sie den Stil eines Elements mit JavaScript ändern möchten, fügen Sie dem Element einen Klassennamen hinzu (oder entfernen Sie ihn). Verwenden Sie dann diesen Klassennamen als Ankerpunkt in Ihrem CSS, um die Formatierung zu beeinflussen.

Es gibt jedoch Zeiten, in denen Sie Formatierungen innerhalb von JavaScript anwenden müssen. jQuery hat eine Funktion genau dafür.

$("#thing").css("margin-right", 0);

Es kann sogar ein wenig ansprechend sein, da jQuery einige browserspezifische Eigenheiten für Sie handhabt. Zum Beispiel erfordert die Deckkraft (opacity) eine Vielzahl von CSS-Eigenschaften, um browserübergreifend kompatibel zu sein. Aber mit jQuery müssen Sie nicht alle davon anwenden. Allein das Setzen der Deckkraft mit der CSS-Funktion funktioniert. jQuery weiß, in welcher Browserumgebung es sich befindet, und wendet die richtige Eigenschaft an.

// just works
// also alternate CSS syntax
$("#thing").css({
   opacity: 0.5
});

Sie könnten also dieses Denken erweitern und davon ausgehen, dass jQuery Ihnen auch bei anderen Dingen hilft, die mehrere CSS-Eigenschaften erfordern, um denselben browserübergreifenden Effekt zu erzielen, wie das klassische Beispiel border-radius. Wir brauchen-moz-border-radiusfür Mozilla-Browser, -webkit-border-radius für WebKit-Browser undborder-radiusfür Opera (und die Zukunft). Aber jQuery hilft uns hier nicht.

// not gonna help in current Firefox or Safari/Chrome
$("#thing").css({
   "border-radius": "20px"
});

Um browserübergreifend kompatibles CSS über jQuery zu erhalten, müssen wir immer noch alle drei auflisten.

$("#thing").css({
   "border-radius": "20px",
   "-moz-border-radius": "20px",
   "-webkit-border-radius": "20px"
});

Was ist damit los? David Walsh denkt, es wäre eine Aufblähung der Bibliothek, diese Abstraktion in jQuery zu haben. Ben Alman denkt, jQuery sollte vollständig unterstützte CSS-Eigenschaften behandeln (die border-radius-Spezifikation ist noch nicht endgültig). Screwlewse denkt, der einzige Grund, warum Deckkraft auf diese Weise unterstützt wird, ist, dass sie für Animationen (Kernfunktionen wie fadeToggle) benötigt wird.

Ich bin mir nicht zu 100% sicher, was ich denke. Einerseits wäre es schön, wenn das magisch für mich erledigt würde. Andererseits kann ich die Argumente bezüglich Aufblähung und nicht abgeschlossener Spezifikationen verstehen.

Was denkst du?

Wenn Sie sich jemals dabei ertappt haben, abgerundete Ecken über jQuery anwenden zu müssen, sind Sie vielleicht gut beraten, dies in ein kleines Plugin für sich selbst zu abstrahieren.

$.fn.roundThis = function(radius) {
    return this.each(function(e) {
        $(this).css({
           "border-radius": radius,
           "-moz-border-radius": radius,
           "-webkit-border-radius": radius
        });  
    }); 
};

$(function() {

    // usage
    $("#thing-that-will-become-rounded").roundThis("20px");

});

Das wird IE aber immer noch nicht handhaben, aber es gibt tolle Plugins, die das tun.

---

In anderen Nachrichten: Herzlichen Glückwunsch an Brent Traut zum Gewinn des kostenlosen Tickets für die jQuery Conference bei meinem kleinen Gewinnspiel. Zehn Personen, die teilgenommen haben, spendeten insgesamt 115 US-Dollar für Open-Source-Projekte. Pseudo-zufällige Zahlen wählten den Gewinner. Wenn Sie immer noch darüber nachdenken, zu kommen, sollten Sie es tun! Und wenn Sie immer noch darüber nachdenken, für Open Source zu spenden, sollten Sie es tun!