Browserhandling in Compass 1.0

Compass

Was mich häufig am Code, den CSS-Präprozessoren erzeugen, gestört hat, ist die große Anzahl an browserspezifischen Präfixen, die man so heute nicht mehr braucht. Nehmen wir einmal an, man ändert nichts an den Standardeinstellungen und benutzt das Compass-Mixin (von Compass vor Version 1) für border-radius:

@import "compass/css3";
.beispiel {
@include border-radius(25px);
}

… so erhält man das folgende Ergebnis:

.beispiel {
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
-ms-border-radius: 25px;
-o-border-radius: 25px;
border-radius: 25px;
}

Ganz schön viel Code. Dabei gab es nie einen Browser, der -o-border-radius oder -ms-border-radius verstanden hätte, da der Internet Explorer und Opera direkt die Eigenschaft border-radius implementiert haben.

Nun ist es aber leider nicht so, dass man prinzipiell sagen könnte, dass es etwa sinnlos ist, die Angabe -ms- zu machen; bei 2D-Transformationen beispielsweise braucht man sie. Es ist also von Fall zu Fall unterschiedlich.

Und es kommt ein weiterer Faktor hinzu: Bei manchen CSS3-Eigenschaften kann man es verschmerzen, wenn ein älterer Browser sie nicht interpretiert und getrost auf das Präfix verzichten, bei anderen hingegen ist dann das ganze Layout zerstört. In letzteren Fällen ist es sinnvoll, eine Angabe mit dem Präfix zu machen, auch wenn die Nutzerzahl, die es brauchen, sehr klein ist.

Das heißt, eigentlich müsste man immer von Fall zu Fall je nach Eigenschaft und je nach Daten von http://caniuse.com/ entscheiden, ob man ein Präfix benutzt oder nicht.

Diese Arbeit nimmt einem Compass 1.0 ab. Compass verwendet eine JSON-Datei von CanIuse mit allen Informationen über Browserversionen, Verbreitung der Versionen (basiert auf StatCounter GlobalStats) und benötigte Präfixe. Welche Browser berücksichtigt werden sollen, steuert man in Compass 1.0 über zwei Variablen:

$graceful-usage-threshold: 0.1;
$critical-usage-threshold: 0.01;

Beide Variablen geben einen Schwellenwert an. $graceful-usage-threshold: 0.1; bedeutet, dass das Präfix nicht mehr benutzt wird, wenn es von weniger als von einem von 1.000 Nutzer benötigt werden würde. Auch $critical-usage-threshold benennt einen Schwellenwert, aber bezieht sich auf Eigenschaften, deren Nichtunterstützung größere Auswirkungen hat – beispielsweise box-sizing oder Flexbox.

Wenn man heute das neue Browserhandling austesten möchte, muss man zuerst die Compass 1.0 installieren. Bis zum offiziellen Erscheinen (aktuellen Stand findet man bei https://twitter.com/compass) geht das über

gem install compass --pre

Um zu verstehen, wie das neue Handling der Präfixe funktioniert, hilft die folgende Angabe in der SCSS-Datei:

$debug-browser-support: true;

Wenn man danach CSS3-Mixins benutzt, erhält man Kommentare mit Erklärungen, ob und warum welche Angaben integriert sind. Verwendet man jetzt noch einmal das Mixin für border-radius, sieht die Ausgabe im Stylesheet nun so aus:

.beispiel {
/* Capability border-radius is prefixed with -moz because 0.36154% of users need it which is more than the threshold of 0.1%. */
/* Creating new -moz context. */
-moz-border-radius: 25px;
/* Capability border-radius is not prefixed with -ms because 0% of users are affected which is less than the threshold of 0.1. */
/* Capability border-radius is not prefixed with -o because 0% of users are affected which is less than the threshold of 0.1. */
/* Capability border-radius is prefixed with -webkit because 0.14767% of users need it which is more than the threshold of 0.1%. */
/* Creating new -webkit context. */
-webkit-border-radius: 25px;
border-radius: 25px;
}

Yepp, korrekt – 0% der Nutzer würden -o-border-radius oder -ms-border-radius benötigen. Ob man aber heute noch -moz-border-radius verwenden sollte? Wenn man meint, dass nicht, kann man ja den Schwellenwert etwas höher stellen:

$graceful-usage-threshold: 0.5;
@import "compass/css3";
$debug-browser-support: true;
.beispiel {
@include border-radius(25px);
}

Dann erhält man nur noch die Angabe ohne Präfix:

.beispiel {
/* Capability border-radius is not prefixed with -moz because 0.36154% of users are affected which is less than the threshold of 0.5. */
/* Capability border-radius is not prefixed with -ms because 0% of users are affected which is less than the threshold of 0.5. */
/* Capability border-radius is not prefixed with -o because 0% of users are affected which is less than the threshold of 0.5. */
/* Capability border-radius is not prefixed with -webkit because 0.14767% of users are affected which is less than the threshold of 0.5. */
border-radius: 25px;
}

Die Erläuterungen in den  Kommentaren zeigen, dass die Anpassungen wie geplant funktioniert haben – und das funktioniert natürlich dann auch bei den anderen CSS3-Eigenschaften, wo eben mehr Präfixe benötigt werden. Jetzt müsste man das nur noch mit den aktuellen Statistiken der betroffenen Seite kombinieren, und dann wäre es ganz ganz perfekt …

Mehr zum Browserhandling bei Compass 1.0 bei http://atendesigngroup.com/blog/new-browser-support-features-compass-1x

Kommentare sind geschlossen.