CSS/Wertetypen/Zahlen und Verhältnisse

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Text-Info

Lesedauer
15min
Schwierigkeitsgrad
leicht
Vorausgesetztes Wissen
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.

Zahlen[Bearbeiten]

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. 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[Bearbeiten]

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[Bearbeiten]

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

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

Beispiel
width: 100%;
line-height: 120%;
Beachten Sie, dass bei Prozentangaben bei Festlegungen 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[Bearbeiten]

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.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

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[Bearbeiten]

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

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari

Details: 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.

Auflösungen[Bearbeiten]

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.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Leer

Details: 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) { }
Beachten Sie: Safari unterstützt die CSS Auflösungsabfrage mittels resolution, wie sie in der Spezifikation definiert wird, nicht. Es wird die Benutzung der nicht standardisierten device-pixel-ratio Abfrage benötigt[1]


Weblinks[Bearbeiten]

  1. MDN: resolution