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 Breite von Text mit einer Einheit begrenzen, die für die Textgröße vorgesehen ist. Das ermöglicht eine vorhersehbare Steuerung unabhängig von der Größe des Texts. 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 Maß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). Hier sind die Werte 0–255 zulässig, um einen Farbwert festzulegen. 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 vorherigen Beispiel beträgt die Breite von div p 150px, vorausgesetzt, dass im Layout die Standardschrift 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 vorherigen Beispiel ergibt sich sowohl für margin-top als auch für padding-left der Wert 150px.

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 der festgelegten Transformation. 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. Aufgrund von Unterschieden bei der Pixelgröße werden physische Einheiten wie cm und in auf Bildschirmen nicht zuverlässig in diesen Größen angezeigt. Für Druckstilblätter eignen sich physische Einheiten am besten, da sie dort zuverlässiger sind.

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. Denken Sie daran, dass CSS nicht nur für digitale Inhalte, sondern auch für die Formatierung von Druckinhalten verwendet wird. Absolute Längen können beim Design für den Druck sehr nützlich sein.

Relative Längen

Eine relative Länge wird ähnlich wie ein Prozentsatz anhand eines Basiswerts berechnet. Der Unterschied zwischen diesen und Prozentsätzen besteht darin, dass Sie Größen basierend auf einer relevanten Basisgröße definieren können, z. B. der Standardschriftgröße oder den Fensterabmessungen. Das bedeutet, dass CSS Einheiten wie ch hat, die die Maßeinheiten der Schriftgröße als Grundlage verwenden, und vw, die auf der Breite des Darstellungsbereichs (Ihres Browserfensters) basieren. 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 Ansichtsbereich auf.

div {
  width: 10vw;
}

p {
  max-width: 60ch;
}

In diesem Beispiel entspricht div 10% der Breite des Darstellungsbereichs, da 1vw 1% der Breite des Darstellungsbereichs beträgt. Das Element p hat ein max-width von 60ch, was bedeutet, dass es in der berechneten Schriftart und Größe eine Breite von 60 Nullzeichen nicht überschreiten darf.

Alternative Viewport-relative Einheiten

Der Wert von Viewport-relativen Einheiten bleibt gleich, solange sich die Größe des Darstellungsbereichs nicht ändert. In mobilen Browsern werden jedoch häufig UI-Elemente angezeigt oder ausgeblendet, um auf kleinen Bildschirmen möglichst viele Inhalte anzuzeigen, ohne die berechnete Größe des Darstellungsbereichs zu ändern. Sie können Alternativen zu den viewport-relativen Einheiten verwenden, um diese Änderungen am sichtbaren Bereich zu berücksichtigen.

Containerbezogene Einheiten

Sie können die Abmessungen des Containers eines Elements als relative Basis verwenden. Diese Einheiten teilen den verfügbaren Containerplatz auf. Sie eignen sich für Containerabfragen, um Schriftgrößen basierend auf dem verfügbaren Platz festzulegen.

Sonstige Einheiten

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

Winkeleinheiten

Im Farbmodul haben wir uns Winkeleinheiten angesehen, die hilfreich sind, um Gradwerte zu definieren, z. B. den Farbton in hsl. Sie eignen sich auch zum Drehen von Elementen innerhalb von Transformationsfunktionen.

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 hierfür ist das Erkennen von Bildschirmen mit sehr hoher Auflösung, z. B. Retina-Displays in einer Medienabfrage, und das Bereitstellen eines Bildes mit höherer Auflösung.

Wissen testen

Testen Sie Ihr Wissen über Größen

Ressourcen

• CSS-Spezifikationswerte und ‑Einheiten – Level 4
• Größe und Einheiten auf der MDN
• All About Ems
• Erläuterung zu Prozentsätzen