CSS/Wertetypen/Zahlen und Verhältnisse
- 15min
- leicht
- • CSS-Syntax
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.
Inhaltsverzeichnis
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.
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 */
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.
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.
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.
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).
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.
| 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) { }
|
@media (min-resolution: 2x) {
...
}
Weblinks
- ↑ MDN: resolution
