CSS: Benutzerdefinierte Einheiten

Was ist eine benutzerdefinierte Einheit in CSS?

Das von Stadtkreation entwickelte Konzept der benutzerdefinierten Einheiten in CSS basiert darauf, dass der Entwickler eine Einheit mit Hilfe einer CSS-Variablen definiert, zum Beispiel, dass eine CSS-Variable namens --f gleich 1vw (1% der Breite des Viewports) ist. Eine solche Definition im Dokumentstamm sieht wie folgt aus:

:root {
  --f: 1vw;
}

Was ist der Vorteil?

Nun, warum sollte ich das tun? Wenn ich etwas mit width: 2vw; brauche, kann ich es immer einfach so deklarieren, anstatt width: calc(2 * var(--f)); zu schreiben.

Ja, das stimmt! Nur diese eine Definition der benutzerdefinierten Variablen zu haben, hat zunächst keine Vorteile. Aber was ist, wenn wir sie für größere Bildschirme zusätzlich so deklarieren?

@media (min-width: 1200px) {
  :root {
    --f: calc(1200px / 100);
  }
}

Und so für kleinere Bildschirme?

@media (max-width: 767px) {
  :root {
    --f: calc(767px / 100);
  }
}

In beiden Fällen wurde das Ergebnis nicht direkt eingegeben, sondern die Pixelbreite des Breakpoints durch 100 geteilt, um zu zeigen, dass es sich von der Einheit vw ableitet, die 1% der Bildschirmbreite entspricht.

Anwendung für relativ skalierende Website-Inhalte mit festen Breakpoints

Für Designer ist es oft wichtig, die Kontrolle über die relativen Größenverhältnisse der gestalteten Elemente zueinander zu haben, einschließlich der Textgrößen und Zeilenlaufweiten. Eine feste Schriftgröße im Verhältnis zu einer von der Viewport-Breite abhängigen Inhaltsbreite führt beispielsweise zu wechselnden Zeilenumbrüchen und damit zu einem variierenden Verhältnis zwischen Inhaltsbreite und Schriftgröße.

Eine Schriftgröße relativ zur Viewport-Größe (z.B. Viewport-Breite) bewirkt dagegen ein Wachsen und Schrumpfen des Textes relativ zur Viewport-Breite und damit feste Zeilenumbrüche. Das bedeutet aber auch, dass der Text auf großen Bildschirmen sehr groß und auf kleinen mobilen Geräten unlesbar wird.

Wenn wir es aber wie in den obigen Beispielen verwenden, wird verhindert, dass das Layout ab bestimmten Breakpoints in Bezug auf die Viewport-Breite wächst bzw. schrumpft.

Diese Website wurde unter Verwendung von benutzerdefinierten Einheiten entwickelt und ist damit ein gutes Testbeispiel zur Veranschaulichung.

Natürlich ist es komplizierter, überall im Code var(--f) statt 1vw oder calc(2 * var(--f)) statt 2vw zu schreiben. Aber auf der anderen Seite gibt uns das eine einfache Kontrolle über unser relativ skalierendes Design. Was ist, wenn der Designer die maximale Layoutbreite von 1200px auf 1280px ändern möchte? Wir müssen nur zwei Zahlen im Code ändern und das war’s!

Es muss auch nicht dabei bleiben, nur jeweils eine Definition für Maximalgröße und Minimalgröße in Bezug zum Viewport zu haben. Wir können so viele Breakpoints für feste Viewport-Breiten oder bestimmte Breitebereiche definieren, wie wir wollen, oder sie sogar für ein Layout verwenden, das viele feste, vordefinierte Größen ohne relativen Bezug zur Viewportbreite hat.

Die Zukunft benutzerdefinierter Einheiten in CSS

Wäre es nicht schön, wenn eine CSS-Variable --f als Einheit verwendet werden könnte, einfach so: width: 2f? Natürlich müssen die Standardeinheiten Vorrang haben, wenn ein Entwickler eine Einheit mit demselben Namen definiert. Aber die Arbeit mit relativ skalierenden Layouts wäre viel einfacher. Und das ist nicht der einzige Vorteil. Stellen wir uns vor, ein Designer entwickelt ein Screendesign, bei dem alles auf der Einheit 18px basiert. Wir könnten einfach unsere benutzerdefinierte Variable als --f: 18px setzen und diese mit den vom Designer für das jeweilige Element definierten Faktoren multiplizieren oder dividieren. Das macht es viel einfacher, das Verhältnis der Elementgrößen in einem vordefinierten Designsystem zu verstehen.

Warum also nicht in einer zukünftigen CSS-Version benutzerdefinierte Einheiten einführen?