Ein Leitfaden zu CSS-Einheiten — Teil 1: Schau dir diese absoluten Einheiten an!

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

Sprechen wir über Längeneinheiten im Allgemeinen. Irgendwann in der Vergangenheit, wahrscheinlich vor Hunderttausenden von Jahren, brauchte einer unserer Vorfahren eine Möglichkeit, die Größe von etwas zu beschreiben — vielleicht wie groß das Mammut war, das sie gerade gesehen hatten. Also verwendete unser Vorfahr, was zur Hand — oder am Fuß — war. Archaische Maßeinheiten waren oft Ausdrücke des eigenen Körpers: Füße, Ellen, Schritte (oft im Duodezimalsystem oder in 12er-Schritten, z.B. 12 Zoll == 1 Fuß). Das verdammte Mammut war 8 Ellen hoch! Das ist nicht sehr präzise, klar — aber der Unterschied zwischen deiner Ellenlänge und meiner ist hier nicht besonders wichtig... hast du die Größe dieses Biests gesehen!?

In jenen Tagen war der menschliche Kontakt meist auf unmittelbare Nachbarn beschränkt, aber im Laufe der Geschichte wurde die Welt immer komplizierter und globalisierter. Daher mussten Einheiten (nicht nur Entfernung, sondern auch Masse, Volumen, Zeit usw.) exakt und eindeutig sein. Wann immer die Welt durch die Weiterentwicklung der Technologie komplexer wurde, mussten neue Maßeinheiten mit höherer Präzision definiert und standardisiert werden. Es erwies sich auch als sehr vorteilhaft, wenn diese Einheiten proportioniert (idealerweise im Dezimalsystem) sind und, wo immer möglich, voneinander abhängen, sodass Umrechnungen und Berechnungen einfacher sind. So entstand das metrische System.

Disclaimer: Das imperiale Einheitensystem ist unpraktisch und seltsam. Dieser Artikel setzt Vertrautheit mit dem metrischen System voraus.

Einige der metrischen und imperialen Einheiten sind auch in CSS eingebaut:

Es gibt:

• in → Zoll oder 25,4 Millimeter
• pc → typografische Pica, 1/6 Zoll oder ~4,23 Millimeter
• pt → typografischer Punkt, 1/12 einer Pica oder 1/72 eines Zolls oder ~0,353 Millimeter
• cm → Zentimeter, 1/100 eines Meters
• mm → Millimeter, 1/10 eines Zentimeters
• Q → Viertelmillimeter (ich weiß, bevor ich für diesen Artikel recherchiert habe, hatte ich auch noch nie davon gehört).

Jeder hat ein Verständnis davon, was ein Zentimeter in der realen Welt ist, und die meisten Frontend-Entwickler denken, sie haben eine Vorstellung davon, was 100px für einen Browser bedeutet. Es lohnt sich aber, die Beziehungen zwischen diesen Einheiten zu kennen, um besser zu verstehen, warum einige für bestimmte Anwendungsfälle besser geeignet sind als andere.

Meistens meinen wir "auf dem Bildschirm", wenn wir über CSS-Verhalten sprechen. Aber du kannst (und solltest manchmal) auch CSS für den Druck als Zielmedium schreiben. Dann kommen Einheiten wie cm, in, mm oder pt ins Spiel. Dann, und nur dann, werden CSS-Längen in absolute Einheiten umgesetzt. 1in in CSS wird nur dann wirklich 1 Zoll sein, wenn es auf Papier gedruckt wird. Bei der Anzeige auf dem Bildschirm greifen Browser auf 96px zurück (die Geschichte dieses Werts ist interessant, aber zu umfangreich für diesen Artikel)), und die physische Größe davon wird stark variieren (wenn du ein Lineal an deinen Bildschirm hältst, dazu später mehr).

Die meisten Artikel über CSS-Einheiten behandeln px auch als absolute Einheit, technisch gesehen ist es meiner Meinung nach eine Art Hybrid.

"Aber!" höre ich dich schreien, "ist die Bildschirmauflösung nicht der Punkt, an dem Pixel und Zoll aufeinandertreffen!?" — — und damit meinst du dpi/ppi (dots per inch oder pixels per inch). Diese Art von Gespräch kommt sehr oft vor, wenn du mit Designern arbeitest, die klassisch in Grafikdesign ausgebildet wurden:

"In welcher Auflösung soll ich die Designs erstellen? dpi-mäßig?".

Die kurze Antwort ist: Es spielt keine Rolle. Das Web hat keine Auflösung.

"Okay? Also... 72 dpi?"

Wenn es dich glücklich macht. Die CSS-Spezifikation verwendet 96... baber Auflösung ohne Dimensionen bedeutet nichts. Gestalte deine Sachen auf einer 320px breiten Leinwand — Mobile First! Dann progressiv größer.

"Aber welche dpi soll ich..."

Wenn du jemanden fragst, wie weit es von Paris nach Prag ist, sollte die Antwort eine konkrete Antwort sein (etwa 1000 Kilometer). "72 dpi" zu sagen, ist wie zu sagen "es sind 130 Kilometer pro Stunde".

"... WAS?""

Ich versuche dir nur zu sagen: Deine Grafiksoftware lässt dich Breite, Höhe (Dimensionen, die wirklich wichtig sind) und auch Auflösung angeben. Aber im Web — auf Bildschirmen generell — spielt die Auflösung keine Rolle. Ein 1500px breites Bild wird immer so breit sein, egal was die dpi-Metadaten sagen. Wenn ich eine deiner Dateien in Photoshop öffne und sie "72 dpi" anzeigt, ist die einzige Schlussfolgerung daraus "dies wurde wahrscheinlich für den Bildschirm gestaltet".

"Warum ist der Standardwert dann 72?"

Weil Apple bei der Einführung des Macintosh 1984 den internen CRT-Monitor so konzipiert hat, dass genau 72 physische Pixel 72 typografischen Punkten oder 1 Zoll entsprechen, sodass Text auf dem Bildschirm und auf Ausdrucken in der tatsächlichen physischen Größe übereinstimmte.

"Was mache ich jetzt?"

Hör auf, dir Sorgen über dpi für Bildschirmdesign zu machen, verwende ruhig 72, aber: Sei dir bewusst, wie Dimensionen das responsive Design beeinflussen und wie deine Designs an verschiedene Bildschirmgrößen anpassbar sein müssen. Im Zweifelsfall immer eine Notiz hinterlassen, wie ein Element dimensioniert/konstruiert ist. Vermeide Größenangaben, die nicht durch ein Raster oder ein übergeordnetes Element vorgegeben sind. Verwende kein Photoshop für UI-Design.

"Danke, Sensei."

Auf dem zuvor erwähnten Macintosh von 1984 würde 1px n einem (hypothetischen) Browser einem physischen Pixel des CRT-Monitors entsprechen.

Heutzutage verwenden unsere Displays eine viel höhere Pixeldichte, sodass 1px mit 2 oder mehr physischen Pixeln dargestellt wird — dies wird als HiDPI (oder Retina für Apple-Nutzer) bezeichnet. Display-Hersteller verwenden alle unterschiedliche Dichten und Größen, wie könnten wir also wirklich definieren, worauf sich 1px heute bezieht? Die W3C's CSS-Spezifikation löst dieses Problem auf eine sehr coole und ungewöhnliche Weise:

(wenn dich das weiter interessiert, empfehle ich diesen Artikel)

Auf deinem Bildschirm gerade jetzt ist dies ein 96px mal 96px großes Quadrat:

Nimm ruhig ein Lineal und miss jetzt die physische Größe dieses Quadrats! Es wird wahrscheinlich anders sein als auf meinem 4K-Display:

Es ergibt etwas weniger als 2 Zentimeter. Ich habe einen anderen Bildschirm direkt daneben, den Retina-Bildschirm meines MacBooks, schauen wir mal:

Etwa 1,7 Zentimeter, nicht einmal annähernd wie der andere und in beiden Fällen nicht einmal in der Nähe von 1 Zoll!

Ich würde behaupten, dass das px zu einer semi-relativen Einheit macht. Relativ zur Größe und Pixeldichte deines Displays. Aber CSS-technisch gesprochen ist px die einzige "absolute" Einheit, die beim Layout auf Bildschirmen wirklich jemals verwendet wird. Deshalb betrachte ich es als Hybrid.

Wir haben nun einige Einblicke gewonnen, warum Größe nicht nur wichtig ist – in der Webentwicklung neigt sie auch dazu, relativ zu sein. Dies war als Einstieg für den Rest dieser Serie gedacht, in der wir lernen werden, wie CSS-Einheiten zusammenarbeiten und wann welche zu verwenden ist. Zum Einstieg schauen wir uns schriftrelative Einheiten im nächsten Teil an.

Header photo by Charles Deluvio on Unsplash

Warte! Es gibt noch mehr! Als kleines Postskriptum hier mein Lieblingsstück alltäglicher Ingenieurskunst, über das du nie nachdenkst: der ISO 216 internationale Standard für Papierformate, am bekanntesten für A4. Falls du jemals der letzte Überlebende der Apokalypse wirst und die Zivilisation wieder aufbauen musst, merke dir diese zwei Schlüsselfakten darüber, wie A4 konstruiert ist, und du wirst zurechtkommen:

• Wenn du ein Blatt Papier einer beliebigen Größe A(n) (z.B. A4) nimmst und es der Höhe nach in zwei Hälften schneidest, erhältst du zwei identische Blätter der nächstkleineren Größe A(n+1) (z.B. A4 → A5). Das funktioniert wegen des Seitenverhältnisses von 1:√2 oder ungefähr 1:1,41421356. Dies macht es auch einfach, Dokumente auf andere A-Größen zu skalieren... verblüffend!

• A0 is defined as a sheet of paper with the aforementioned aspect ratio and a Gesamtfläche von 1m². Jede Größe An hat also eine Fläche von 1/2ⁿ m² (zum Beispiel hat A4 1/16m²). Dies hilft auch bei Gewichtsberechnungen: 40 Blatt A4-Papier mit einem Papiergewicht von 80g/m² wiegen somit: 40 × 1/16m² × 80g/m² = 200g. KINDERLEICHT!

Das hat nichts mit CSS zu tun, aber ich liebe es und erwähne es so oft ich kann!