CSS/Wertetypen/Zahlen und Verhältnisse

Aus SELFHTML-Wiki
CSS‎ | Wertetypen(Weitergeleitet von Prozentangabe)
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 dir, 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.

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

Winkelmaße

In CSS3 werden Winkelmaße definiert, so dass Rotationen festgelegt werden können. Bei positiven Werten erfolgt die Rotation im Uhrzeigersinn, bei negativen Werten gegen den Uhrzeigersinn. Siehe auch Drehsinn. Die Angabe einer Einheit ist immer erforderlich, auch wenn der Betrag der Winkelangabe 0 ist.

Übersicht der Winkelmaße in CSS
Einheit Beschreibung Beispiel
deg Winkelgrade (°), von engl. degree. Ein Vollwinkel, also eine Kreisumrundung, entspricht 360°. transform: rotate(45deg);
grad Gon (g, oder „Neugrad“, von engl. 'gradian'. Ein Vollwinkel entspricht 400 gon. Diese Einheit ist eine Erfindung der französischen Revolution. Sie findet im Vermessungswesen, im Bergbau und in der Robotik Verwendung[2], hat sich aber sonst nicht durchsetzen können. rotate: 50grad;
rad Bogenmaß. Ein „Radiant“ ist ein Umfangsstück auf dem Einheitskreis der Länge 1, ein in rad angegebener Winkel entspricht also der Bogenlänge auf einem Einheitskreis, dessen Mittelpunkt im Scheitelpunkt des Winkels liegt. Eine Vollwinkel entspricht somit 2π rad. rotate: 2.5rad;
turn Umdrehungen, engl. turns. Der neue Standard[3] für diejenigen, die keine Lust haben, sich von drei Winkeleinheiten verwirren zu lassen Ein Vollwinkel entspricht einer Kreisumrundung, also 1turn. rotate: .75turn;

Und welche Einheit soll man nun nehmen? CSS versteht alle vier. Die turn-Einheit könnte sich dann als praktisch erweisen, wenn man Drehungen im CSS errechnen will. Will man die Winkelwerte in JavaScript verarbeiten, ist eher rad angebracht, weil die JavaScript-Winkelfunktionen Bogenmaß erwarten.
Wenn du deinen Benutzern einen Winkelwert anzeigen möchtest, dann ist deg diesen vermutlich am vertrautesten. Und grad? Wenn die Benutzer Feldvermesser oder Robotiker mit 200 Steps/Vollkreis Schrittmotoren sind, dann freuen sie sich vermutlich darüber…

Beachte: Das erste Beispiel wurde mit der transform-Eigenschaft notiert, die als Wert die rotate()-Funktion erhält.
Die anderen Beispiele verwenden die neue, einfachere rotate-Eigenschaft. Dort wird der Wert CSS-typisch nach dem Doppelpunkt notiert.

Siehe auch:

Transform
mit CSS
drehen,
skalieren, schräg
stellen und
verschieben


Zeitmaße

Zeitmaße werden genutzt um die Dauer eines Ablaufs oder einer Verzögerung zu definieren. Zeitmaße dürfen nicht negativ sein. Die Angabe einer Einheit ist immer erforderlich, auch wenn der Betrag 0 ist.

Übersicht der Zeitmaße in CSS
Einheit Beschreibung
s Sekunde.
ms Eine Millisekunde entspricht dem 1000. Teil einer Sekunde.


Siehe auch:

  • CSS-animation
    • transition
    • animation
    • offset-path
     


Weblinks

  1. ↑ MDN: resolution
  2. ↑ Wikipedia: Gon Einheit, abgerufen am 08.03.2025
  3. ↑ XKCD: Standards

Abgerufen am 24.06.2026
von "http://wiki.selfhtml.org/wiki/CSS/Wertetypen/Zahlen_und_Verh%C3%A4ltnisse"