CSS/Wertetypen/Zahlen und Verhältnisse

15min

leicht

• CSS-Syntax

Nicht jeder Wert in CSS beschreibt eine Größe mit einer Maßeinheit. Viele CSS-Eigenschaften verwenden einfache Zahlenwerte, Prozentangaben oder Verhältnisse, um |CSS-Eigenschaften zu steuern, Abstände zu berechnen oder Größen zueinander in Beziehung zu setzen.

Ein Zahlenwert ohne Einheit besteht nur aus einer Zahl und erhält seine Bedeutung durch die jeweilige CSS-Eigenschaft. So beschreibt beispielsweise opacity: 0.5 einen Transparenzwert, während line-height: 1.5 als Multiplikator für die Zeilenhöhe verwendet wird. Die gleiche Zahl kann also je nach Kontext eine unterschiedliche Bedeutung haben. Auch Prozentwerte und Verhältnisse beschreiben Beziehungen zwischen Werten.

Diese Werte unterscheiden sich von Längen-, Winkel- oder Zeitangaben: Sie messen keine feste Größe, sondern geben an, wie ein Wert interpretiert, berechnet oder mit anderen Werten verglichen wird.

Zahlen

In CSS sind alle Zahlen aus dem Bereich der rationalen Zahlen in Dezimalbruchdarstellung erlaubt. Als Zahl wird jeder numerische Wert bezeichnet, dem keine Maßangabe folgt.

Unterschieden wird zwischen Ganzzahlen und Fließkommazahlen. Das Dezimalkomma wird in CSS durch den Punkt (.) repräsentiert, wie es in der EDV allgemein üblich ist. Die Null vor dem Punkt bei kleinen Zahlen ist optional.

Beispiel

z-index: 1;            /* Ganzzahl */
z-index: -2;           /* negative Ganzzahl */
line-height: 1.5;      /* Fließkommazahl */
opacity: .5;           /* Fließkommazahl ohne Null vor dem Komma (entspricht 0.5) */
vertical-align: -.5em; /* negative Fließkommazahl ohne Null vor dem Komma */

opacity: 1/2; /* keine Dezimalbruchdarstellung, nicht erlaubt */

Im letzten Beispiel handelt es sich nicht um eine Dezimalbruchdarstellung. Diese Angabe ist nicht erlaubt, sie wird ignoriert.

Für viele Eigenschaften ist der Bereich der erlaubten Zahlen eingeschränkt, etwa auf Ganzzahlen oder positive Werte.

Siehe auch: Zahlenwerte in JavaScript

Numerische Konstanten

Für Berechnungen kennt CSS die numerischen Konstanten e und pi. Hinzu kommen die degenerierten Konstanten infinity, -infinity und NaN, die primär zum Darstellen eines Über- oder Unterlaufs einer Berechnung genutzt werden, wenn der Wert in Textform dargestellt werden soll.

Man kann sie aber auch verwenden, um den "größten möglichen Wert" auszudrücken. Das ergibt selten Sinn, aber wenn, dann ist infinity klarer im Ausdruck als einfach nur einen gewaltigen Wert ins Stylesheet zu schreiben (der sich vielleicht später doch als zu klein erweist oder Diskussionen über seine Herleitung auslöst).

Prozentangaben

Prozentangaben werden definiert, indem direkt nach einer Zahl das Prozentzeichen (%) notiert wird.

Beispiel

width: 100%;
line-height: 120%;

Prozentangaben in einer Eigenschaft können sich auf verschiedene Werte beziehen: Auf den Wert derselben Eigenschaft des Elternelements (z. B. die width-Eigenschaft), auf den Wert einer anderen Eigenschaft, die auf dasselbe Element angewendet wird (z. B. die line-height-Eigenschaft, die sich auf die font-size-Eigenschaft bezieht) oder auf den Wert derselben Eigenschaft eines Vorfahrenelements, wenn das Element von seinem Elternelement abgekoppelt wurde (z. B. durch Verwendung absoluter Positionierung). Auf welche Werte sich Prozentangaben beziehen ist bei den einzelnen Eigenschaften beschrieben.

Beachte, dass bei Prozentangaben der Höhe (height), vertikalem Innen- und Außenrand nicht die Höhe, sondern die Breite als Grundlage genommen wird.

Dies ermöglichte es mit dem Padding-bottom height fix, quadratische Boxen oder feste Seitenverhältnisse festzulegen. Heute gibt es dafür eigene Eigenschaften wie aspect-ratio.

Verhältniswerte

Verhältnisse werden verwendet um zwei Werte in ein Verhältnis zu setzen. Ein Verhältnis besteht aus einer positiven Zahl, gefolgt von einem Schrägstrich, wiederum gefolgt von einer zweiten positiven Zahl. Zwischen Zahl und Schrägstrich sind Leerzeichen erlaubt.

Einige CSS-Eigenschaften und Medienmerkmale verwenden den Typ ratio. Hierbei handelt es sich um eine Verhältnisangabe zweier Zahlenwerte - also das, was im obigen Beispiel für opacity gerade ausgeschlossen wurde.

Beispiel

img {
   aspect-ratio: 16 / 10;
}

@media (aspect-ratio > 1.6) {
   ...
}

In diesem Beispiel wird der Verhältniswert 16 zu 10 zuerst in einer Formatierung mit der aspect-ratio-Eigenschaft und dann in einer Medienabfrage verwendet.

Wenn in CSS eine ratio Angabe zugelassen ist, kann sie entweder als Bruch a / b notiert werden, wobei a und b zwei Zahlenwerte und auch 0 sein dürfen. Alternativ kann man auch a durch b dividieren und das Ergebnis als Eigenschaftswert hinschreiben. In diesem Fall nimmt CSS an, dass b den Wert 1 hat.

Das Besondere an ratio-Werten ist, dass sie intern nicht als ein Wert, sondern tatsächlich als getrennte Werte gespeichert werden. Wird eine solche Eigenschaft als Text ausgegeben (z.B. um sie in einem style-Attribut abzulegen), enthält dieser Text den Bruchstrich.

Ein Verhältniswert, bei dem Zähler oder Nenner den Wert 0 haben, nennt man degeneriert.

Siehe auch:

• 

  Größenangaben in CSS – von em bis clamp() und fit-content
  • Breite oder Höhe?
    eine Angabe reicht!
   
• 

  Responsive Raster
  ohne Media Queries

  Bilderwand aus Quadraten

   

Bruchteile

Im Flexbox Modul wurde für die zusammenfassende Eigenschaft flex ein ganzzahliger, einheitenloser Wert eingeführt, der einem Bruchteil des verfügbaren zu füllenden Platzes entspricht. Im Grid Layout Module erhält dieser Wert die Einheit fr (fraction, engl. für Bruchteil).

Browserunterstützung
caniuse.com

Grundraster mit 3 verschieden breiten Spalten

 grid-template-columns: 1fr 4fr 2fr ;

Die drei Spalten erhalten jetzt 1/n, 4/n bzw. 2/n Breite.

Siehe auch:

• 

  Responsive Raster
  ohne Media Queries

  fr - Mit Bruchteilen rechnen

   

Auflösungen

Der Begriff Auflösung beschreibt die Dichte der Bildpunkte eines Ausgabemediums. Mit Hilfe dieser Einheiten kann angegeben werden, wie viele Bildpunkte auf einer Strecke in einer Einheit wie Zoll oder Zentimeter entfallen. Umgangssprachlich wird als Auflösung aber auch die Gesamtzahl der Bildpunkte in der Breite und Höhe eines Bildes oder Anzeigegeräts bezeichnet - unabhängig von dessen physischer Größe.

Achte also auf diesen subtilen Unterschied, wenn du den Begriff Auflösung liest.

Browserunterstützung
caniuse.com

Übersicht der Auflösungsmaße in CSS

Einheit	Beschreibung	Beispiel
dpi	Die Einheit dpi gibt die Anzahl der Bildpunkte pro Zoll an.	@media (resolution: 96dpi) { }
dpcm	Die Einheit dpcm gibt die Anzahl der Bildpunkte pro Zentimeter an.	@media (max-resolution: 50dpcm) { }
dppx x	Die Einheit dppx (Alias: x) gibt die Anzahl der Gerätepixel pro CSS-Pixel an.	@media (max-resolution: 1dppx) { }

Beachte: Auch Safari unterstützt mittlerweile die CSS Auflösungsabfrage mittels resolution, wie sie in der Spezifikation definiert wird. Die nicht standardisierte device-pixel-ratio-Abfrage ist damit auch im praktischen Gebrauch obsolet. Mit Hilfe der dppx-Einheit und ihrem Alias x lässt sich gut lesbar eine Media-Query für "Ist die Geräteauflösung mindestens das doppelte der CSS Auflösung" formulieren:

Beispiel

@media (min-resolution: 2x) {
   ...
}

• Maßangaben und Maßeinheiten
• Wertetypen in CSS
  (Übersicht)
• Schlüsselwörter
  und Zeichenketten