CSS/Wertetypen/Maßangaben

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

In CSS gibt es eine Vielzahl von Maßangaben:

  • Längenmaße (absolute und relative),
  • Kreismaße und auch
  • Zeitmaße.[1]

Für eine Maßangabe schreiben Sie direkt hinter dem Zahlenwert, ohne jede Trennung, eine Maßeinheit. Für eine Längenangabe mit dem Betrag 0 ist die Angabe der Maßeinheit optional.

Beispiel 
border-top-width: 3px;
margin: 0em; /* Diese und die nachfolgende Angabe sind identisch. */
margin: 0;

Längenangaben

Die Gruppe der absoluten Längenmaße setzt sich aus zwei Teilen zusammen:

  • den physischen Einheiten Zoll, Pica, Punkt, Zentimeter und Millimeter.
  • sowie der Einheit Pixel, die in einem festen Verhältnis zu den physischen Einheiten steht, aber mit den Bildpunkten des Ausgabegerätes nicht übereinstimmen muss. Deshalb spricht man hier auch von CSS-Pixeln.

Absolute Längenmaße

CSS kennt sechs physische oder absolute Längenmaße:

Übersicht der physischen Längenmaße in CSS
Einheit Name Größe
cm Zentimeter 1 cm = 37,8 Pixel (gerundet)
mm Millimeter 0,1 cm = 3,78 Pixel (gerundet)
Q Quarter-millimeters 1Q = 1/4mm
in Zoll 2,54 cm ≙ 96 Pixel
pc Pica 1/6 Zoll ≙ 16 Pixel
pt Punkt[2] 1/72 Zoll ≙ 1,33 Pixel (gerundet)
ca. 0,3133 mm (im Drucklayout)
px Ein CSS-Pixel ist der sichtbare Bereich eines Pixel auf einem Gerät
mit einer Punktdichte von 96 DPI
und einer Armlänge Abstand vom Leser. 		variabel ≙ 0,75 Punkt = 1/96in

Der Umrechnungsfaktor zwischen den Einheiten ist fest. Frühere Versuche, die Umrechnung zwischen px und den anderen Einheiten an das verwendete Gerät anzupassen, führten nur dazu, dass viele (unsauber gestaltete) Webseiten unlesbar wurden.

CSS gibt zwei Methoden vor, physische Längenmaße zu verarbeiten.[3]

  1. Bei der Druckausgabe werden alle physischen Maße ohne Abweichung auf den Ausdruck angewendet. Das bedeutet, dass ein als 1in hoch und breit definiertes Element beim Nachmessen auf Papier 2,54 cm hoch und breit sein sollte.
    Aus diesem Grund eignen sich physische Längenmaße, insbesondere die aus der Typografie bekannten, für das Erstellen von speziellen Druckstylesheets.
  2. Bei allen anderen grafischen Ausgabemedien ist die genaue, physische Größe eines Pixels für jedes Gerät eine andere.
    Die Umrechnung von CSS-Pixeln auf physische Maße ist daher nicht möglich!
    Maßangaben, die auf allen Ausgabemedien identisch angezeigt werden sollen, sind in der Regel nicht sinnig.
    • Beispielsweise verfügt ein mobiles Ausgabegerät nur über wenige Quadratzoll Anzeigefläche, eine Leinwand hingegen mehrere Quadratmeter. Trotzdem kann das kleine Smartphone-Display eine höhere Anzahl an Bildpunkten haben als der Projektor.
    • Ein Projektor hat eine festgelegte Anzahl von Pixeln in x- und y-Richtung, die Darstellungsgröße ergibt sich aus dem Abstand zur Leinwand.

Die Basiseinheit Pixel

Die Basiseinheit für alle Längenmaße ist der CSS-Pixel[4]. Er wird beschrieben als gerade noch zu sehender Punkt, der in Armlänge vom Betrachter entfernt ist. Da diese Beschreibung sehr schwammig ist, gilt die technische Definition, dass ein Pixel eine Größe von 1/96 Zoll hat.

Da diese Parameter alle nicht genau definiert sind, und es sich bei CSS-Pixeln entgegen landläufiger Meinung nicht um einen physisch vorhandenen Bildpunkt auf dem Monitor handelt, dem so genannten device pixel (engl. für Gerätepixel), sollten Sie Pixel als Einheit vermeiden.[5]

Hauptartikel: Vergessen Sie den Begriff Pixel!

Hauptartikel: Punktdichte (dpi)

Hochaufloesend.svg

Relative Längenmaße

Relative Längenmaße beziehen sich auf etwas anderes, z. B. auf die Größe der Schriftart des übergeordneten Elements oder auf die Größe des Ansichtsfensters.

Der Vorteil der Verwendung relativer Einheiten besteht darin, dass Sie bei sorgfältiger Planung dafür sorgen können, dass die Größe von Text oder anderen Elementen relativ zu allem anderen auf der Seite skaliert.

Übersicht der relativen Längenmaße in CSS
Einheit Relativ zur Schriftgröße
em Schriftgröße des Eltern-Elements, wenn es sich um typografische Eigenschaften wie font-size handelt, und Schriftgröße des Elements selbst, wenn es sich um andere Eigenschaften wie width handelt.
rem Ein rem (root-em =Wurzel-Em) entspricht der Schriftgröße, die für das Wurzelelement (in HTML das html-Element) festgelegt wurde.
(Evtl. Änderungen der Schriftgröße in Elternelementen können so übersprungen werden.)
ex entspricht jedoch der Größe des Kleinbuchstabens "x". Sofern die verwendete Schriftart eine x-Höhe definiert, wird dieser Wert verwendet. Andernfalls entspricht ein ex genau einem halben em (0.5em).
ch entspricht der Breite der Ziffer "0". Sofern die verwendete Schriftart eine Null-Breite definiert, wird dieser Wert verwendet. Andernfalls wird versucht die durchschnittliche Breite aller Zeichen zu berechnen, sodass dieser Wert verwendet werden kann.
lh entspricht der line-height des Elements
Relativ zur Viewport-Größe
vw entspricht 1% der Viewport-Breite
vh entspricht 1% der Viewport-Höhe
vb entspricht 1% der Viewportabmessung in Block-Richtung (bei horizontaler Schrift: vh; bei vertikaler Schrift: vw)
vi entspricht 1% der Viewportabmessung in Inline-Richtung (bei horizontaler Schrift: vw; bei vertikaler Schrift: vh)
lvh entspricht 1% der Höhe des großen Viewports, d.h. wenn auf Mobilgeräten Adressleiste und Menüleiste nicht angezeigt werden
svh entspricht 1% der Höhe des kleinen Viewports, d.h. wenn auf Mobilgeräten Adressleiste und Menüleiste angezeigt werden und Platz beanspruchen
dvh entspricht 1% der Höhe des dynamischen Viewports
vmin entspricht 1% der Viewport-Minimalabmessung (Breite oder Höhe, je nachdem, welcher Wert der kleinere ist)
vmax entspricht 1% der Viewport-Maximalabmessung (Breite oder Höhe, je nachdem, welcher Wert der größere ist)
Relativ zum Containerelement
cqw entspricht 1% der Container-Breite
cqh entspricht 1% der Container-Höhe
cqb entspricht 1% der Container-Abmessung in Block-Richtung (bei horizontaler Schrift: cqh; bei vertikaler Schrift: cqw)
cqi entspricht 1% der Container-Abmessung in Inline-Richtung (bei horizontaler Schrift: cqw; bei vertikaler Schrift: cqh)
cqmin entspricht 1% der Container-Minimalabmessung (Breite oder Höhe, je nachdem, welcher Wert der kleinere ist)
cqmax entspricht 1% der Container-Maximalabmessung (Breite oder Höhe, je nachdem, welcher Wert der größere ist)

Hauptartikel: CSS/Media Queries/Container Queries#Container-Query-Einheiten

Die Übersicht deutet bereits an, dass die genaue Wirkung relativer Maße sich von Eigenschaft zu Eigenschaft unterscheiden kann. Sofern besondere Regeln bei der Verarbeitung relativer Maße zu beachten sind, wird dies in der Beschreibung der einzelnen Eigenschaften erwähnt.

Und was ist jetzt die richtige Einheit?

Empfehlung:

Zur Verwendung gibt es keine eindeutige Empfehlung, je nach Einsatzzweck bieten sich verschiedene Maßeinheiten an:[6]

  • Für Schriftgrößen bieten sich em oder rem an
    • Gerade die Elemente sub, sup und rt sind Kandidaten für Schriftgrößen in em.
    • Die Eigenschaften padding, margin und auch border-radius beziehen sich oft auf die Schriftgröße, so dass em, rem oder % gegenüber absoluten Werten durchaus sinnvoll sind.
    • Der vertikale Abstand zwischen Textabsätzen (p) wird oft auf die jeweilige Zeilenhöhe gesetzt, um den vertikalen Rhythmus einzuhalten. Hierfür ist em richtig, rem falsch. Noch besser: lh
  • Für Längenangaben %, rem oder em
  • Für media queries em, nicht px.[7][8]

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 Grad (°), Ein Vollwinkel, also eine Kreisumrundung, entspricht 360°. transform: rotate(45deg);
grad 100 grad (in der Mathematik als gon bekannt) entsprechen einer 90°-Drehung, also einem rechten Winkel. Eine Kreisumrundung entspricht somit 400 gon, also 400grad. rotate: 75grad;
rad Ein Radiant entspricht einer Drehung, bei dem der Winkel durch die Länge des entsprechenden Kreisbogens im Einheitskreis angegeben wird. Eine Kreisumrundung entspricht somit 2π rad. rotate: 2.5rad;
turn Ein Vollwinkel entspricht einer Kreisumrundung. rotate: .75turn;
Beachten Sie: 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.

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.


Weblinks

  1. ↑ MDN: CSS values and units
  2. ↑ Wikikpedia: Punkt (Einheit)
  3. ↑ CSSWG: Real Physical Lengths
    Question: A '1in' length usually isn't actually 1 inch. Can we get physical units that are the correct size, so we can create rulers/etc on webpages that actually work?
    Answer: No, currently not.
  4. ↑ The reference pixel is the visual angle of one pixel on a device with a pixel density of 96 DPI and a distance from the reader of an arm’s length.
    csswg.org: CSS Values and Units Module, section 5.2: Absolute Lengths
  5. ↑ smashing magazine: There Is No Such Thing As A CSS Absolute Unit von Elad Shechter, Jul 29, 2021
  6. ↑ W3C: CSS-Tipps Einheiten
  7. ↑ SELF-Forum: Welche Einheit für Schriftgröße / Längenangaben vom 23.05.2015
  8. ↑ #webtypobuch: Retina-Bildschirme und das Pixel als Maßeinheit
Abgerufen von „http://wiki.selfhtml.org/index.php?title=CSS/Wertetypen/Maßangaben&oldid=96262“