Es gibt keine absolute CSS-Einheit

Wenn wir anfangen, CSS zu lernen, stellen wir fest, dass CSS-Maßeinheiten als relativ oder absolut kategorisiert werden. Absolute Einheiten basieren auf physikalischen Einheiten wie Pixel, Zentimeter und Zoll. Aber im Laufe der Jahre haben alle absoluten Einheiten in CSS ihre Verbindung zur physischen Welt verloren und sind zu einer anderen Art von relativen Einheiten geworden, zumindest aus der Perspektive des Webs.

Es ist wichtig zu beachten, dass es immer noch erhebliche Unterschiede zwischen relativen und absoluten Einheiten gibt . Die Größe von relativen CSS-Einheiten entspricht anderen Stildefinitionen, die von übergeordneten Elementen definiert werden, oder wird von der Größe eines übergeordneten Containers beeinflusst. Was die absoluten Einheiten betrifft, werden wir eintauchen und sehen, wie sie von anderen Dingen wie dem Bildschirm und dem Betriebssystem des Geräts beeinflusst werden.

Zu den relativen Einheiten gehören Einheiten wie % , em , rem , Ansichtsfenstereinheiten ( vw und vh ) und mehr. Die gebräuchlichste absolute Einheit ist das Pixel ( px ). Außerdem haben wir die Einheit Zentimeter ( cm ) und die Einheit Zoll ( in ).

Lassen Sie uns nun untersuchen, warum absolute CSS-Einheiten nicht so absolut sind.

CSS-Pixel

Pixel sind seit den Anfängen des Webs die gebräuchlichste CSS-Einheit. In der alten Welt der Desktop-Bildschirme, bevor es Smartphones gab, entsprachen die Pixel des Bildschirms immer den CSS-Pixeln.

Im Jahr 2007 war beispielsweise die häufigste Desktop-Auflösung 1024 × 768 Pixel. Damals gaben wir unseren Webseiten normalerweise eine feste Breite von 1000 Pixeln, um die gesamte Seite auszufüllen, und die übrig gebliebenen Pixel wurden für die Scrollbar des Browsers gespeichert.

Smartphone-Bildschirme

Smartphones brachten eine weitere stille Entwicklung und begannen die Ära der Bildschirme mit hoher Dichte. Wenn wir ein iPhone 12 Pro betrachten, dessen Bildschirm 1170 Pixel breit ist, würden wir alle 3 Pixel auf dem Gerät als 1 Pixel im CSS zählen.

Wenn wir die Größe auf Mobilgeräten festlegen, messen wir nach CSS-Pixeln, nicht nach Gerätepixeln. Um zusammenzufassen:

• CSS-Pixel sind logische Pixel .
• Gerätepixel sind echte physische Pixel .

Okay, aber was ist mit Desktop-Geräten? Arbeiten sie immer noch mit der gleichen alten Pixelberechnung? Lass uns darüber reden.

Desktop-Bildschirme im Jahr 2021

High-Density-Bildschirme kamen einige Jahre später zu Laptops. Die MacBooks von 2014 erhielten die ersten „Retina“-Bildschirme (Retina ist gleichbedeutend mit hoher Dichte).

Heutzutage haben die meisten Laptops einen Bildschirm mit hoher Dichte.

Betrachten wir MacBooks :

• Das 13,3-Zoll-MacBook Pro hat einen Bildschirm, der 2560 Pixel breit ist, sich aber wie 1440 Pixel verhält. Das bedeutet, dass sich alle 1.778 physikalischen Pixel wie 1 logischer Pixel verhalten.
• Das 16-Zoll MacBook Pro hat einen Bildschirm, der 3072 Pixel breit ist, sich aber wie 1792 Pixel verhält. Das bedeutet, dass sich alle 1.714 physikalischen Pixel wie 1 logischer Pixel verhalten.

Unter den PC-Laptops habe ich zwei 15,6-Zoll-Bildschirme getestet, einen mit Full-HD-Auflösung und den anderen mit 4K-Auflösung. Die Ergebnisse waren interessant:

• Der 15,6-Zoll-Full-HD-Bildschirm ist 1920 Pixel breit, verhält sich aber wie 1536 Pixel. Das bedeutet, dass sich alle 1.25 physikalischen Pixel wie 1 logischer Pixel verhalten.
• Der 15,6-Zoll-4K-Bildschirm ist 3840 Pixel breit, verhält sich aber wieder wie 1536 Pixel. Das bedeutet, dass alle 2.5 physikalischen Pixel wie 1 logischer Pixel wirken.

Wie Sie sehen können, ist die Verbindung zwischen den realen physischen Pixeln (dh dem Gerät) und den CSS-Pixeln (dh den logischen Pixeln) fast verschwunden.

Bildschirme sind im Laufe der Jahre dichter geworden

Wenn Sie in der Vergangenheit genau auf einen Bildschirm schauten, konnten Sie tatsächlich seine Pixel sehen. Als sich die Technologie der Bildschirme verbesserte, begannen die Hersteller, Bildschirme mit höherer Dichte zu entwickeln.

Empfohlene Lektüre : Was bedeutet eigentlich ein faltbares Netz?

Warum berechnen wir logische Pixel anders?

Im Laufe der Jahre, als die Bildschirme dichter wurden, konnten wir nicht mehr Inhalte auf die gleiche Bildschirmgröße passen, nur weil der Bildschirm mehr Pixel hat.

Denken Sie einen Moment darüber nach. Betrachten Sie das Samsung Galaxy S21 Ultra . Seine schmalere Dimension beträgt 1440 physische Pixel. Wir könnten es problemlos in einen normalen Desktop-Bildschirm einbauen. Aber wenn wir das täten, wäre der Text so klein, dass er nicht mehr lesbar wäre. Aus diesem Grund trennen wir physische Pixel von logischen Pixeln.

Größen in CSS (dh Breite und Höhe) werden dann gemäß den logischen CSS-Pixeln berechnet. Natürlich können wir physische Pixel verwenden, um Inhalte mit hoher Dichte wie Bilder und Videos wie folgt zu laden :

 <img src="image-size-1200px.jpg" width="300" >

OK, CSS-Pixel sind nicht gleich den physischen Pixeln eines Geräts. Aber wir haben Zentimeter und Zoll. Das sind physische Einheiten, die mit der physischen Welt verbunden sind, richtig? Schauen wir sie uns an.

CSS Zoll und CSS Zentimeter

Wo immer wir physikalische Einheiten wie Zoll und Zentimeter verwenden, wissen wir, dass dies absolute Einheiten sind.

Ich dachte, wenn CSS-Pixel nicht gleich Gerätepixel sind, wäre es vielleicht eine gute Idee, physikalische Einheiten wie Zoll und Zentimeter im Web zu verwenden. Das sind absolute Einheiten, richtig?

Zur Sicherheit habe ich es getestet. Ich habe eine Box mit einer Breite und Höhe von 1 Zentimeter erstellt und ihr eine rote Hintergrundfarbe gegeben. Ich schnappte mir ein echtes Maßband und bekam eine Überraschung:

Ein CSS-Zentimeter ist nicht gleich einem physischen Zentimeter.

Hier teste ich eine CSS-Zentimetereinheit mit einem Maßband auf einem 13-Zoll-MacBook von Mitte 2019:

Das Ergebnis ist dasselbe für CSS Zoll:

Ein CSS-Zoll entspricht nicht einem physischen Zoll.

Dasselbe gilt für Einheiten in Pica ( pc ) und Millimeter ( mm ). Diese entsprechen einem Teil von entweder einem CSS-Zoll oder einem CSS-Zentimeter, die beide nicht mit einem echten Zoll oder einem echten Zentimeter verbunden sind.

Warum CSS Zoll und Zentimeter keine echten Zoll und Zentimeter sind

Seit den 1980er Jahren hat der PC-Markt festgelegt, dass ein CSS-Zoll 96 Pixel entspricht. Diese Pixelberechnung war direkt mit dem DPI/PPI-Standard (Pixel pro Zoll) des damaligen Windows-Betriebssystems von Microsoft für Monitore verbunden, von denen der gebräuchlichste einen Standard von 96 DPI hatte.

Das bedeutete, dass 1 CSS-Zoll immer 96 CSS-Pixeln entsprechen würde.

Wie bei CSS-Zentimetern wird jeder Zentimeter direkt aus Zoll berechnet, was bedeutet, dass 1 Zoll 2.54 Zentimeter entspricht. Das bedeutet, dass jeder 1 CSS-Zentimeter immer 37.7952756 CSS-Pixeln entspricht.

Mit anderen Worten: 1cm = 37.7952756px (96px / 2.54) .

Siehe den Stift [CSS Real Dimensions!](https://codepen.io/smashingmag/pen/BaRJvWj) von Elad Shechter.

Diese Entscheidung, die zu Beginn der PC-Industrie eine gute Idee zu sein schien (die eine Art Standard hatte), stellte sich als schlechte Entscheidung heraus, die CSS Zoll und Zentimeter überflüssig und nutzlos machen würde (zumindest aus der Sicht von das Netz).

Beachten Sie, dass Apple in den 1980er Jahren einen anderen Standard von 72 DPI für Bildschirme hatte.

Bildschirmpixel werden dichter

Wie ich bereits erwähnte, wurde die DPI von Bildschirmen im Laufe der Jahre dichter, und wir sahen Bildschirme mit 120 bis 160 DPI. Und weil 1 CSS-Zoll immer 96 CSS-Pixeln entspricht, bedeutet das jetzt, dass ein CSS-Zoll nicht gleich einem echten physischen Zoll ist.

Da ein CSS-Zoll und ein CSS-Zentimeter direkt aus CSS-Pixeln konvertiert werden und Bildschirme im Laufe der Jahre mehr DPIs erhalten haben, sind wir an einem Punkt angelangt, an dem diese Einheiten nicht das darstellen, was sie auf Bildschirmen darstellen sollen .

CSS-Punkteinheit

Die Punkteinheit ( pt ) ist eine der weniger bekannten Einheiten von CSS. Wie Wikipedia sagt:

„In der Typografie ist der Punkt die kleinste Maßeinheit. Es wird zum Messen der Schriftgröße, des Zeilenabstands und anderer Elemente auf einer gedruckten Seite verwendet.“

Die Wikipedia-Seite zeigt ein Lineal mit der Punktskala unten und der Zollskala oben:

Bevor wir darauf eingehen, warum diese Einheit nicht wirklich eine absolute Einheit für das Web ist, gehen wir auf die grundlegenden Einheiten von Bildschirmen und Druckern ein.

PPI und DPI

Wir haben DPI bereits erwähnt, und Sie haben diese Begriffe vielleicht schon einmal gehört, aber wenn Sie nie verstanden haben, worum es genau geht, finden Sie hier eine kurze Einführung:

• PPI
  Bildschirme bestehen aus vielen kleinen Lichtpunkten, den sogenannten Pixeln. Um die Pixeldichte zu messen, zählen wir die Anzahl der Pixel, die auf 1 Zoll passen, Pixel pro Zoll (PPI) genannt.
• DPI
  Drucker drucken Farbpunkte. Um die Dichte der Druckerpunkte darzustellen, zählen wir die Anzahl der Punkte, die auf 1 Zoll Papier passen, die als Punkte pro Zoll (DPI) bezeichnet werden.

Kurz gesagt, dies sind zwei Möglichkeiten, die Dichte visueller Informationen zu messen, die wir in 1 Zoll unterbringen können.

• PPI : Pixel pro Zoll (für Bildschirme)
• DPI : Punkte pro Zoll (für Drucker)

Es ist wichtig zu erwähnen, dass die Anzahl der CSS-Pixel und -Punkte in 1 Zoll sowohl für die Breite als auch für die Höhe gilt. Das bedeutet, dass auf einem Bildschirm mit 96 PPI eine Box mit einer Höhe und Breite von 1 Zoll eine Gesamtgröße von 9216 Pixel ( 96 × 96 px = 9216 px) hat.

Hier ist eine visuelle Demonstration von 1 Zoll mit einem Bildschirm von 10 PPI:

Hier sind einige Beispiele für echte Berechnungen von CSS PPI:

„DPI“ für Bildschirme

Hersteller von Mobil- und Desktop-Geräten ziehen es vor, ihre Bildschirmmessungen in DPI und nicht in PPI auszudrücken. Aber lassen Sie sich davon nicht verwirren: Es ist immer PPI für Bildschirme und DPI für Drucker .

DPI/PPI-Standards

Um all diese Punkte und Pixel darzustellen, haben wir die Punkteinheit ( pt ).

Die Punkteinheit von CSS leitet sich jedoch von der Standarddrucker-DPI ab, die wiederum in den 1980er Jahren festgelegt wurde und 72 DPI entspricht. Das bedeutet, dass 1 Zoll CSS immer 72 Punkte entspricht.

• 1 Zoll = 72 Punkte
• 1 Punkt = 1/72 ^von 1 Zoll

Pixel für das Web, Punkte für Drucker

Für das Web hat die DPI-Einheit keine Bedeutung. Die Web-DPI wird nach einem anderen Standard definiert ( 96 DPI), über den wir bereits gesprochen haben, als wir einen CSS-Zoll und einen CSS-Zentimeter berechnet haben. Aus diesem Grund gibt es keinen Grund, die Punkteinheit im Internet zu verwenden.

Hinweis : 1 Punkt ist nicht gleich (CSS) Pixel.

• 1 Punkt = 1.333 Pixel
• 72 Punkte = 1 Zoll
• 72 Punkte = 96 Pixel

Drucker

In diesem Artikel wollte ich vor allem zeigen, warum es im Web keine absoluten Einheiten gibt. Aber was ist mit der Verwendung für Drucker? Gibt es einen Grund, CSS Zoll oder Zentimeter oder Punkteinheiten für Drucker zu verwenden?

Mein Drucktest

Ich habe einen kleinen Test durchgeführt, um zu überprüfen, ob der DPI-Standard der 1980er Jahre auf Druckern korrekt funktioniert. Ich habe zwei Boxen erstellt: eine mit einer Breite und Höhe von 72 Punkten und die zweite mit einer Breite und Höhe von 1 Zoll.

Ich habe diese beiden Boxen auf einem Laserdrucker gedruckt, den ich in meinem Büro habe. Hier ist mein Codepen zum Testen von Punkten und Zoll für Drucker:

Ergebnis

Ich habe diese Demo auf einem Laserdrucker gedruckt. Zu meiner Überraschung erhalte ich genau 1 Zoll, wenn ich 72 Punkte (oder 1 Zoll) verwende. Das bedeutet, dass es für Drucker vielleicht immer noch einen guten Grund gibt, CSS-Einheiten wie Punkte, Zoll und Zentimeter zu verwenden.

Drucker können mehr DPIs drucken, aber wenn wir mit 100% Zoom auf dem Drucker arbeiten, entsprechen 72 Punkte (oder 1 Zoll) CSS einem echten physischen Zoll.

Zur Erinnerung : In diesem Artikel geht es eher um die Verbindung absoluter Einheiten mit dem Internet als mit Druckern. Natürlich können sich die Ergebnisse auf verschiedenen Druckertypen ändern.

Empfohlene Lektüre : Verwenden von HSL-Farben in CSS

Der Versuch, genaue Größen im Internet zu erstellen

Wenn wir uns das 16-Zoll-MacBook Pro ansehen, das ein Verhältnis von 1.714 physischen Pixeln zu je 1 CSS-Pixel hat, können wir die Größen im Web nicht genau vorhersagen.

Wenn wir versuchen, das tatsächliche Pixelverhältnis des Geräts auf dem 16-Zoll-MacBook Pro mit JavaScripts window.devicePixelRatio zu erraten, wird ein falsches Verhältnis von 2 statt 1.714 zurückgegeben. (Und dies ohne Berücksichtigung des Zoom-Zustands des Webbrowsers und des Betriebssystems.)

Warum wir echte absolute CSS-Einheiten brauchen

Wenn wir eine feste Größe für ein Seitenleistenelement definieren möchten, würden wir CSS-Pixel verwenden. Aber wenn Sie darüber nachdenken, haben CSS-Pixel heutzutage keine Bedeutung mehr. Wie wir oben gesehen haben, beschreiben CSS-Pixel auf den meisten Smartphones und Desktops keine Gerätepixel mehr.

Ausgehend davon glaube ich, dass wir echte physikalische Einheiten für CSS brauchen (wie eine echte Zentimeter- oder Zolleinheit), weil CSS-Pixel im Web keine wirkliche Bedeutung mehr haben.

Es ist erwähnenswert, dass Firefox eine tatsächliche physikalische Millimetereinheit ( mozmm ​​) implementiert hatte, sie aber in Version 59 entfernte. Ich weiß nicht, warum sie sie entfernt haben. Vielleicht liegt es daran, dass bereits so viele Dinge von CSS-Pixeln abhängen, wie z. B. responsive Bilder und die Einheiten em und rem . Wenn wir versuchen würden, eine neue physikalische Messung hinzuzufügen, würde dies vielleicht mehr Probleme verursachen als lösen.

Es scheint, dass sich Web-Leute so daran gewöhnt haben, in Pixeln zu denken, dass wir, obwohl die CSS-Pixeleinheit ihre Verbindung zu Gerätepixeln verloren hat, die Einheit weiterhin verwenden werden.

Und falls Sie immer noch denken, dass CSS-Pixel eine ausgezeichnete Maßeinheit sind, versuchen Sie einem neuen Webentwickler zu erklären, was diese Einheit tatsächlich misst.

Im Moment haben wir keine wirkliche Möglichkeit, physische Größen in CSS zu beschreiben.

Das CSS-Pixel ist also die schlechteste absolute Einheit – abgesehen von allen anderen.

Zusammenfassen

Am Anfang dieses Artikels habe ich gesagt, dass die absoluten CSS-Einheiten zu einer neuen Art von relativen Einheiten geworden sind. Wir begannen mit CSS-Pixeln und sahen den Unterschied zwischen CSS-Pixeln und Gerätepixeln.

Dann haben wir festgestellt, dass CSS-Zoll und CSS-Zentimeter direkt aus CSS-Pixeln konvertiert werden und nicht mit echten Zoll und Zentimetern verbunden sind. Am Ende sprachen wir über die Punkteinheit und noch einmal darüber, dass diese Einheit keine absolute Bedeutung für das Web hat.

Letzte Worte

Das ist alles. Ich hoffe, Ihnen hat dieser Artikel gefallen und Sie haben aus meinen Erfahrungen gelernt. Wenn dir dieser Beitrag gefällt, würde ich mich freuen, davon zu hören und ihn zu teilen.

Verweise

• „CSS-Länge erklärt“, Tim Chien, Robert Nyman, Mozilla Hacks
• „Punkte pro Zoll“, Wikipedia
• „Punkt (Typografie)“, Wikipedia
• „CSS-Werte und -Einheiten“, W3C