CSS/Wertetypen/Zahlen und Verhältnisse

Aus SELFHTML-Wiki
< CSS‎ | Wertetypen(Weitergeleitet von Fr)
Wechseln zu: Navigation, Suche

Jede in CSS verwendete Eigenschaft hat einen Wertetyp, der die für diese Eigenschaft zulässigen Werte definiert. Ein Blick auf eine beliebige Eigenschaftsseite hilft Ihnen, die Werte zu verstehen, die mit einem Wertetyp verbunden und für eine bestimmte Eigenschaft gültig sind.

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.

Beachten Sie, 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: 5 / 3;
}
@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.

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).

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.

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. Achten Sie also auf diesen subtilen Unterschied, wenn Sie den Begriff Auflösung lesen.

Ü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) { }
Beachten Sie: 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[1]:
Beispiel
@media (min-resolution: 2x) {
   ...
}

Weblinks

  1. MDN: resolution