Leitfaden zu CSS-Einheiten Teil 4: Winkel, Zeit und mehr

Hinweis: Dieser Artikel wurde unter Zuhilfenahme von KI aus dem Englischen übersetzt. Hier geht's zum Originaltext.

Hast du den ersten, zweiten oder dritten Teil dieser Serie verpasst? Sie behandelten ausschließlich das, was die CSS-Spezifikation als "Längen" bezeichnet — Beschreibungen von Dimensionen. Oder anders ausgedrückt: alle Werte, die zu Eigenschaften wie padding, margin, width, height, font-size usw. passen würden.

Es gibt jedoch einige Einheiten in CSS, die keine Dimensionen beschreiben:

Etwas, das ich erst bei der Recherche für diese Artikelreihe gelernt habe: Es gibt mehr als einen Weg, Winkel in CSS zu beschreiben!

• deg: gute, alte Grad — 1/360stel eines Kreises — das ist die Einheit, die ich mein ganzes Leben lang verwendet habe
• rad: Radiant, ich erinnere mich ein bisschen daran aus der Schulzeit... Es beschreibt einen Winkel als Bruchteil von 2π und ist eine nützliche Einheit, wenn du wirklich mathematisch mit deinen Transformationen umgehst. Da CSS π nicht als Konstante hat, kannst du für rad nur die Dezimalschreibweise verwenden, was zu vielen Dezimalstellen führt (oder du bastelst mit calc() und einer Variable var(--pi) etwas zusammen). Ich wusste, dass es existiert, aber ich habe es bis jetzt nie gebraucht.
• grad: das ist eine seltsame Einheit — sie entspricht 1/400stel eines Kreises. Die Idee dahinter ist, dass ein rechter Winkel in 100 Teile unterteilt werden kann. Ich verstehe, dass das praktisch sein könnte, aber ich hatte bis heute noch nie davon gehört.
• turn: repräsentiert einen Winkel in Anzahl der Umdrehungen, also wenn du etwas zweimal drehen möchtest, würdest du transform: turn(2); verwenden. Jetzt, wo ich es kenne, kann ich mir vorstellen, es zu nutzen!

Hier geht's schnell: Es gibt Sekunden — s — und dann gibt es Millisekunden: ms. Diese brauchst du, um deine Animationen und Übergänge zu timen.

Wenn man all das bedenkt, worüber wir in dieser Serie gesprochen haben, bin ich nicht der Einzige, der es seltsam findet, dass die Spezifikation hier aufgehört hat? Warum nicht mins, hours oder sogar days?

Ja! Wenn du Teil 1 dieser Serie gelesen hast, habe ich dir gesagt, du sollst dir keine Gedanken über dpi (dots per inch) in deinen Designs machen und behauptet:

Nun, ich habe dich ein bisschen angelogen. Der CSS-Standard geht von einer Basisdichte von 96dpi für Webbrowser aus, und es gibt sogar einen Aspekt von CSS, bei dem dies verwendet wird: responsive Bilder und Media Queries.

Idealerweise würde deine Website mit srcset verschiedene Bilder für verschiedene Geräte bereitstellen, um Bandbreite zu sparen. Wenn du es noch nie benutzt hast, lerne alles darüber bei CSS-Tricks! Im Wesentlichen bietest du dem Browser mehrere Bilder/Größen an, und er wählt das aus, das am besten zur aktuellen Viewport- und Display-Dichte passt, ohne dass du in CSS irgendwelche Zauberkunststücke vollbringen musst.

Zusätzlich kannst du aber auch die Anzeigedichte/Auflösung in CSS abfragen. Das ist nur nötig, wenn du Bilder responsiv machen willst und aus irgendeinem Grund absolut kein <img srcset="…"> verwenden kannst, sondern ein CSS-Hintergrundbild verwenden musst. Die Art und Weise, wie du das machst, ist die Abfrage von min-resolution in dpi:

Alternativ könntest du auch dpcm (dots per centimeter) verwenden, aber obwohl ich technisch gesehen zustimme, dass metrisch immer die bessere Option ist, ist die Browser-Unterstützung schlecht und dies ist einer der Bereiche, in denen sich das metrische System nie wirklich durchgesetzt hat. Es gibt noch eine weitere Einheit, die du hier verwenden kannst: dppx — dots per px. Als Einheit finde ich sie am wenigsten verwirrend und die Werte sind auch weniger "magisch": 2dppx bedeutet 2 tatsächliche, physische Pixel pro 1px Rendering, also HiDPI/Retina. Leider ist die Browser-Unterstützung immer noch schlecht, daher sind wir vorerst bei dpi geblieben. 192dpi (2 × 96dpi) ist der HiDPI/Retina-Wert, wahrscheinlich der einzige, den du brauchst.

Ein weiterer Vorbehalt ist die Browser-Unterstützung für die min-resolution-Abfrage selbst, weshalb du — Stand Anfang 2021 — diesen Fallback für Safari hinzufügen musst:

In Zukunft wird sich min-resolution durchsetzen, aber bis dahin brauchen wir den Fallback.

Ein weiterer Anwendungsfall für eine solche Media Query wären Rahmen mit halber Pixelbreite. border-width: 0.5px würde auf Nicht-Retina-Bildschirmen etwas verschwommen aussehen. Mit dieser Media Query könntest du für niedrigere Dichten auf 1px zurückfallen! Wenn dein Designer wirklich, wirklich auf solch dünnen Rahmen besteht, tu dir selbst den Gefallen und packe es in eine per Media Query abgefragte CSS-Variable:

Sieh dir das in Aktion in diesem Pen an.

Es gibt zwei bemerkenswerte Fälle in CSS, in denen das Weglassen von Einheiten spezifische Implikationen hat. Der erste ist, wenn du eine Länge von 0 setzt. Da es keinen Unterschied macht, ob etwas 0px oder 0rem ist, kannst du die Einheit weglassen. Also ist width: 0 die einzige gültige Verwendung einer einheitenlosen Zahl als Breite.

Der wichtigere Fall ist die line-height-Eigenschaft: Du solltest immer einheitenlose Zeilenhöhen verwenden, damit sie sich korrekt an verschiedene Schriftgrößen anpasst. Sieh dir diesen Pen als Beispiel an:

Der Inhalt dieser Boxen ist doppelt so groß, die Zeilenhöhe ist also als das Doppelte der Schriftgröße definiert. Jede Box verwendet eine andere Einheit, aber schau, was passiert, wenn du einen weiteren Absatz hinzufügst, der eine kleinere Schriftgröße verwendet: In den ersten drei Boxen wird die Zeilenhöhe des kleineren Absatzes als absoluter Wert vom Container geerbt und ist daher zu groß! Nur die Box, die einheitenlose Zeilenhöhe verwendet, sieht korrekt aus, weil nur einheitenlose Werte wirklich schriftgrößenrelativ sind.

Puh, ich denke, das ist das Ende der Serie! Wir haben uns alle häufig verwendeten (und auch einige nicht so häufig verwendeten) Einheiten in CSS angesehen, wie sie derzeit sind. CSS entwickelt sich ständig weiter und in ein paar Jahren könnten wir diese Artikelserie mit weiteren Teilen ergänzen. Schau dir nur die Vorschläge an, die Entwickler für neue CSS-Funktionen haben! Einige Leute (mich eingeschlossen) haben starke Meinungen zu CSS-Einheiten, aber es gibt nicht immer eine eindeutig richtige Wahl. Die Optionen zu verstehen und eine teamweite Entscheidung zu treffen, ist manchmal das Beste, was du tun kannst.

Header-Foto von Daniele Franchi auf Unsplash