CSS/Wertetypen/Maßangaben

Aus SELFHTML-Wiki
< CSS‎ | Wertetypen(Weitergeleitet von CSS-Pixel)
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]

Maße werden definiert, indem direkt nach einer Zahl, ohne jede Trennung, eine Maßeinheit notiert wird. Bei der Zahl Null 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[Bearbeiten]

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

  • den physischen Einheiten Zoll, Pica, Punkt, Zentimeter und Millimeter.
  • sowie der relativen Einheit Pixel

Absolute Längenmaße[Bearbeiten]

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/40cm
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

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.
    • Ein Projektor hat eine feste Auflösung von x*y px, die Darstellungsgröße ergibt sich aus dem Abstand zur Leinwand.

Die Basiseinheit Pixel[Bearbeiten]

Die Basiseinheit für alle Längenmaße ist der CSS-Pixel[4]. Er wird definiert als gerade noch zu sehender Punkt, der in Armlänge vom Betrachter entfernt ist.

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)

Relative Längenmaße[Bearbeiten]

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 Beschreibung
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
vw entspricht 1% der Viewport-Breite
vh entspricht 1% der Viewport-Höhe
vmin entspricht 1% der Viewport-Minimalabmessung,
(Breite oder der Höhe), je nachdem, welcher Wert der kleinere ist.
vmax entspricht 1% der Viewport-Maximalabmessung,
(Breite oder der Höhe), je nachdem, welcher Wert der größere ist.

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

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 (br) wird oft auf die jeweilige Zeilenhöhe gesetzt, um den vertikalen Rhythmus einzuhalten. Hierfür ist em richtig, rem falsch.

Winkelmaße[Bearbeiten]

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.

Übersicht der Winkelmaße in CSS
Einheit Beschreibung Beispiel
deg Grad (°), Ein Vollwinkel, also eine Kreisumrundung, entspricht 360°. transform: rotate(45deg);
grad 100 Gon entsprechen einer 90°-Drehung, also einem rechten Winkel. Eine Kreisumrundung entspricht somit 400 Gon, also 400grad. transform: 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. transform: rotate(2.5rad);
turn Ein Vollwinkel entspricht einer Kreisumrundung. transform: rotate(.75turn);

Zeitmaße[Bearbeiten]

Zeitmaße werden genutzt um Verzögerungen zu definieren. Zeitmaße können nur positiv sein.

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

Weblinks[Bearbeiten]

  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=87322#Die_Basiseinheit_Pixel“