Größeneinheiten

The CSS Podcast – 008: Größeneinheiten

Das Web ist ein responsives Medium, aber manchmal möchten Sie die Abmessungen steuern, um die Gesamtqualität der Benutzeroberfläche zu verbessern. Ein gutes Beispiel hierfür ist die Begrenzung der Zeilenlänge, um die Lesbarkeit zu verbessern. Wie würden Sie das in einem flexiblen Medium wie dem Web tun?

In diesem Fall können Sie eine ch-Einheit verwenden, die der Breite eines „0“-Zeichens in der gerenderten Schrift bei der berechneten Größe entspricht. Mit dieser Einheit können Sie die Textbreite mit einer Einheit begrenzen, die auf die Textgröße ausgerichtet ist. Dadurch erhalten Sie eine vorhersehbare Steuerung, unabhängig von der Textgröße. Die Einheit ch ist eine von wenigen Einheiten, die für bestimmte Kontexte wie dieses Beispiel hilfreich sind.

iWork Numbers

Zahlen werden verwendet, um opacity, line-height und sogar die Farbkanalwerte in rgb zu definieren. Zahlen sind ohne Einheit angegebene Ganzzahlen (1, 2, 3, 100) und Dezimalzahlen (0,1, 0,2, 0,3).

Zahlen haben je nach Kontext eine bestimmte Bedeutung. Wenn Sie beispielsweise line-height definieren, steht eine Zahl für ein Verhältnis, wenn Sie sie ohne unterstützende Einheit definieren:

p {
  font-size: 24px;
  line-height: 1.5;
}

In diesem Beispiel entspricht 1.5 150 % der berechneten Schriftgröße in Pixeln des Elements p. Wenn also die p einen font-size von 24px hat, wird die Zeilenhöhe als 36px berechnet.

Zahlen können auch an folgenden Stellen verwendet werden:

• Beim Festlegen von Werten für Filter: filter: sepia(0.5) wendet einen 50%-Sepiafilter auf das Element an.
• Beim Festlegen der Deckkraft: opacity: 0.5 wendet eine 50%-Deckkraft an.
• In Farbkanälen: rgb(50, 50, 50), wobei für die Werte 0 bis 255 ein Farbwert akzeptabel ist. Farblehre ansehen
• So transformierst du ein Element: transform: scale(1.2) skaliert das Element auf 120 % seiner ursprünglichen Größe.

Prozentsätze

Wenn Sie einen Prozentsatz in CSS verwenden, müssen Sie wissen, wie der Prozentsatz berechnet wird. width wird beispielsweise als Prozentsatz der verfügbaren Breite im übergeordneten Element berechnet.

div {
  width: 300px;
  height: 100px;
}

div p {
  width: 50%; 
}

Im obigen Beispiel ist die Breite von div p 150px, vorausgesetzt, dass im Layout die Standardeinstellung box-sizing: content-box verwendet wird.

Wenn Sie margin oder padding als Prozentsatz festlegen, entspricht der Wert unabhängig von der Richtung einem Teil der Breite des übergeordneten Elements.

div {
  width: 300px;
  height: 100px;
}

div p {
  margin-top: 50%; /* calculated: 150px */
  padding-left: 50%; /* calculated: 150px */
}

Im obigen Snippet werden margin-top und padding-left als 150px berechnet.

div {
  width: 300px;
  height: 100px;
}

div p {
  width: 50%; /* calculated: 150px */
  transform: translateX(10%); /* calculated: 15px */
}

Wenn Sie einen transform-Wert als Prozentsatz festlegen, basiert er auf dem Element mit dem Transformationssatz. In diesem Beispiel hat p den translateX-Wert 10% und den width-Wert 50%. Berechnen Sie zuerst die Breite: 150px, da sie 50% der Breite des übergeordneten Elements entspricht. Dann nehmen Sie 10% von 150px, was 15px ergibt.

Abmessungen und Längen

Wenn Sie einer Zahl eine Maßeinheit zuweisen, wird sie zu einer Dimension. 1rem ist beispielsweise eine Dimension. In diesem Zusammenhang wird die Einheit, die mit einer Zahl verknüpft ist, in Spezifikationen als Dimensionstoken bezeichnet. Längen sind Dimensionen, die sich auf Entfernungen beziehen. Sie können entweder absolut oder relativ sein.

Absolute Längen

Alle absoluten Längen werden anhand derselben Basis aufgelöst, sodass sie überall in Ihrem CSS vorhersehbar sind. Wenn Sie beispielsweise cm verwenden, um die Größe Ihres Elements festzulegen und dann zu drucken, sollte es beim Vergleich mit einem Lineal korrekt sein.

div {
  width: 10cm;
  height: 5cm;
  background: black;
}

Wenn Sie diese Seite ausdrucken, wird das div als schwarzes Rechteck mit einer Größe von 10 × 5 cm gedruckt. CSS wird nicht nur für digitale Inhalte verwendet, sondern auch für die Gestaltung gedruckter Inhalte. Absolute Längen können beim Design für den Druck sehr nützlich sein.

Relative Längen

Die relative Länge wird gegenüber einem Basiswert berechnet, ähnlich wie ein Prozentsatz. Der Unterschied zwischen diesen und Prozentsätzen besteht darin, dass Sie die Größe der Elemente kontextbezogen bestimmen können. Das bedeutet, dass CSS-Einheiten wie ch haben, die die Textgröße als Grundlage verwenden, und vw, die auf der Breite des Darstellungsbereichs (d. h. Ihrem Browserfenster) basiert. Relative Längen sind aufgrund ihrer Responsiven-Natur besonders im Web nützlich.

Schriftgrößenbezogene Einheiten

CSS bietet hilfreiche Einheiten, die sich auf die Größe der Elemente der gerenderten Typografie beziehen, z. B. die Größe des Texts selbst (em-Einheiten) oder die Breite der Schriftzeichen (ch-Einheiten).

Vom Darstellungsbereich abhängige Einheiten

Sie können die Abmessungen des Darstellungsbereichs (Browserfensters) als relativen Bezugspunkt verwenden. Diese Elemente teilen den verfügbaren Viewport-Bereich auf.

div {
  width: 10vw;
}

p {
  max-width: 60ch;
}

In diesem Beispiel beträgt div 10% der Breite des Darstellungsbereichs, da 1vw 1% der Breite des Darstellungsbereichs entspricht. Das p-Element hat als max-width den Wert 60ch. Das bedeutet, dass die Breite von 60 „0“-Zeichen in der berechneten Schriftart und ‐größe nicht überschritten werden darf.

Sonstige Einheiten

Es gibt noch einige andere Einheiten, die für bestimmte Arten von Werten festgelegt wurden.

Winkeleinheiten

Im Farbmodul haben wir uns Winkeleinheiten angeschaut, die für die Definition von Gradwerten hilfreich sind, z. B. den Farbton in hsl. Sie sind auch nützlich, um Elemente innerhalb von Transformationsfunktionen zu drehen.

div {
  width: 150px;
  height: 150px;
  transform: rotate(60deg);
}

Mit der Winkeleinheit deg können Sie eine div um 90° um ihre Mittelachse drehen.

div {
  background-image: url('a-low-resolution-image.jpg');
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  div {
    background-image: url('a-high-resolution-image.jpg');
  }
}

Auflösungseinheiten

Im vorherigen Beispiel ist der Wert von min-resolution 192dpi. Die Einheit dpi steht für Punkte pro Zoll. Ein nützlicher Kontext dafür ist das Erkennen von Bildschirmen mit sehr hoher Auflösung, wie Retina-Displays in einer Medienabfrage, und die Bereitstellung eines Bildes mit höherer Auflösung.

Wissenstest

Testen Sie Ihr Wissen über Sizing

Ressourcen

• CSS-Spezifikationswerte und ‑Einheiten – Level 4
• Größe und Einheiten in MDN
• Alles über Ems
• Erklärung zu Prozentsätzen