Prozentangaben in CSS: Die Größe ist entscheidend

Viele Grid-Systeme im Frontend basieren auf Prozentangaben, um die Größe ihrer Grid-Elemente zu definieren. Dass hierbei auch die Anzahl der Nachkommastellen entscheidend ist, sollte auch bei der Generierung von Prozentzahlen durch Präprozessoren wie Sass berücksichtigt werden.

Da je nach Aufteilung des Rasters lange – auch periodische – Dezimalzahlen entstehen, wird oft ab einer bestimmten Nachkommastelle gekürzt. Die Anzahl der Nachkommastellen und das Runden dieser wird jedoch, je nach Browser, unterschiedlich interpretiert.

Rundung am Beispiel von Sass

Sass bietet zur Berechnung der Prozentwerte eine eigene percentage()-Funktion, die wie folgt aufgerufen werden kann:

.col-4-12 {
  width: percentage(4 / 12);
}

Die Anzahl der Dezimalstellen ist bei libsass im Standard auf 5 gesetzt (Sass::Script::Number.precision = 5).

Das folgende Beispiel zeigt im Chrome die Schwächen bei fünf Nachkommastellen auf:

Das Beispiel zeigt ein simples 12er-Raster mit zwei Elementen (4/12 und 8/12). Der kompilierte CSS-Code für die beiden Grid-Elemente enthält – wie angenommen – 5 Nachkommastellen:

…

.col-4-12 {
  width: 33.33333%;
  background: #ddd;
}

.col-8-12 {
  width: 66.66667%;
  background: #eee;
}

…

Chrome rechnet im obigen Beispiel die 33.33333% des ersten Grid-Elements intern zu 164,984 px um:

Dies führt dazu, dass die Grid-Elemente in ungünstigen Fällen nicht die gesamte Breite ausfüllen (1 Pixel fehlend). In Chrome ist dies im Beispiel durch den roten Biltzer erkennbar:

Einige Browser benötigen also weitere Nachkommastellen um richtig zu arbeiten. Dies hängt damit zusammen, dass je nach Länge der Nachkommastellen eine andere Rundung und somit die Berechnung „genauer“ erfolgt.

Twitters Bootstrap empfiehlt eine number precision von 8. Andere empfehlen sogar eine Anhebung auf 10 Stellen.

Gulp + Sass number precision anpassen

Wenn mit Sass und Gulp (gulp-sass) gearbeitet wird, muss lediglich wie folgt der Parameter precision mit dem gewünschten Wert übergeben werden:

.pipe(sass({ precision: 8 }))

Sven Adlung

Selbstbewusst stellt sich Sven jeder Herausforderung. Sein Herz schlägt für neueste Technik und mit seinem Auge für ansprechendes Design bereichert er jedes Team.