Pixel und andere CSS-Einheiten verstehen

Von Pixeln und anderen CSS-Einheiten

von Vincent Hardy, Sylvain Galineau

Zusammenfassung

Dieser Artikel beleuchtet das Verhältnis von CSS-Pixeln und anderen Einheiten sowie den Unterschied zwischen CSS-Pixeln und Gerätepixeln.

Einführung

Eine immer größer werdende Anzahl von CSS-Einheiten hat Entwicklern viel Flexibilität gegeben, z.B. ermöglicht die Einheit 'rem' (root 'em'), die Schriftgröße des HTML-Wurzelelementes zu nutzen, um innerhalb des HTML-Dokumentes Größen festzulegen. (Siehe CSS Values and Units specification.) Sie helfen Entwicklern dabei, Inhalte unabhängig von der Display-Größe und Auflösung zu gestalten.

Unabhängigkeit vom Display: das sich anpassende Layout

Moderne Inhalte müssen Zukunftssicher sein. Sie müssen auf den verschiedensten Projektionsumgebungen dargestellt werden können wie z.B. auf Smarphones, Tablets, großen Monitoren, ja sogar auf Fernsehbildschirmen, denn es gibt all diese Medien in verschiendenen Größen, Darstellungsverhältnissen, mit verschiedensten Pixeldichten und für vielerlei Betrachtungsabstände konzipiert. Dem Entwickler stehen viele Hilfsmittel zur Verfügung, die dabei helfen, die Benutzerfreundlichkeit der Inhalte zu optimieren. Dazu gehört beispielsweise dem Benutzer sinnloses Scrolling zu ersparen.

Media Queries und Viewport-Einstellungen

Ein solches Hilfsmittel sind z.B. Media Queries. Die meisten Entwickler sind mittlerweile mit dem Einsatz von Media Queries vertraut. Sie erlauben die Zuweisung von CSS-Pixeln in Abhängigkeit von Faktoren wie Größe oder Darstellungsverhältnisse. So können verschiedene Stylesheets für verschiedene Geräte definiert werden oder die Media Queries können ein primäres Stylesheet verfeinern und anpassen. Den Display-Viewport zu verstehen und einzurichten ist besonders wichtig im Hinblick auf mobile Geräte, da deine Inhalte so dem Display deines Benutzers angepasst werden.

Prozentuale Einheiten

Prozentuale Angaben können seit CSS1 gemacht werden und ermöglichen die Festlegung von Größen in Abhängigkeit zum beinhaltenden Element. Zum Beispiel können wir den Dokumentenbody folgendermaßen definieren:



	body{
	     width: 80%;
	     max-width: 900px;
	     margin-left: auto;
	     margin-right: auto;
}


So hat das Body-Element höchstens 900px und es nimmt sonst 80% der Breite des Viewports ein.

Einheit Beschreibung Fallbeispiel
em 1 em ist der zur Laufzeit berechnete Wert der Schriftgröße des Elementes, das damit definiert wird. Z.B. kann die Schriftgröße der Kopfelemente <h1> auf 3em gesetzt werden und das Body-Element auf 1em, um sicherzugehen, dass unter allen Display-Bedingungen Überschriftentext 3 mal so groß ist wie der des Body-Elementes. Hier muss angemerkt werden, dass die angegebene Em-Größe sich auf das Elternelement bezieht. Somit ist ein Span-Element, das sich innerhalb eines H1-Elementes befindet, 6 mal so groß wie das Body-Element, wenn es mit font-size: 2em definiert ist.
ex 1ex ist die X-Höhe des gegenwärtigen Schriftsatzes. Die X-Höhe ist in der Regel gleichzusetzen mit der Höhe des kleinen 'x' (nicht immer, z.B. falls kein 'x' im Schriftsatz existiert). Wird in der Praxis selten benutzt. Kann benutzt werden, um Inline-Bilder an die X-Höhe des gegenwärtigen Schriftsatzes anzupassen zwecks harmonischer Darstellung.
ch 1 ch ist die Laufweite der Glyphe ‘0’ (zero) des gegenwärtigen Schriftsatzes; ‘ch’ steht für "character". Kann genutzt werden, um Monospace-Text oder Brailleschrift zu stylen.
rem 1rem ist der zur Laufzeit berechnete Wert der Eigenschaft 'font-size' in Bezug auf das Wurzelelement des Dokumentes.

Diese Einheit ist oft leichter zu nutzen als die Em-Einheit, weil sie nicht durch Vererbung beeinflusst wird wie die Em-Einheit.

Bei einer gegebenen Schriftgröße von 20px des Wurzelelementes, würde die Zuweisung von 0.5em Schriftgröße auf Li-Elemente eine Auswirkung von 10px auf der ersten Ebene haben, auf der 2. Ebene hätte ein Listenelement schon 5px Schriftgröße. Würde man aber die Schriftgrößs 5rem setzen, so wäre das Resultat eine Schriftgröße von 10px bei Listenelementen, egal auf welcher Ebene sie sich befinden.
vw 1vw ist 1% der Breite des Viewports; ‘vw’ steht für viewport width (Viewportbreite). Nützlich, um Boxen zu stylen, die sich an verschiedene Viewportbreiten anpassen.
vh 1vh ist 1% der Höhe des Viewports; ‘vh’ steht für viewport height (Viewporthöhe). Nützlich, um Boxen zu stylen, die sich an verschiedene Viewporthöhen anpassen. Es kann z.B. benutzt werden, um die maximale Höhe enes Bildes festzulegen, so dass es nich aus dem Viewportbereich herausragt.
vmin Entspricht dem Kleineren von ‘vw’ oder ‘vh’ Siehe vh/vw
vmax Entspricht dem Größeren von ‘vw’ oder ‘vh’ See vh/vw

Doch was ist mit canvas und voller Pixel-Kontrolle?

Bisher haben wir uns mit dem Stylen von Dokumenten mittels CSS beschäftigt. Einige Situationen aber erfordern volle Kontrolle des Programmierers über jeden gemalten Pixel, z.B. in einem Videospiel. Sowohl der Canvas 2D Kontext als auch SVG (Scalable Vector Graphics) können dies leisten - sowie WebGL. Es ist aber auch möglich, absolut positionierte Elemente zu benutzen, um eine bessere Performance unter bestimmten Bedingungen wie gaming zu erlangen. [Edit: Der Link ist von 2013 und immer noch gültig, ich musste aber, weil ein Wordpress-Plugin von tricedesigns anscheinend faxen macht, zweimal auf den Link klicken, für Leute geeignet, die sich mit Gaming beschäftigen wollen. Vielen Leuten ist gar nicht klar, dass in einem Browser sehr viel drin steckt. Er ist quasi ein richtiges Betriebssystem. Wer beginnen möchte, sich mit der Spieleentwicklung zu beschäftigen, sollte sich mit diesen Ressourcen beschäftigen. Anhand von Beispielen lernt es sich sowieso am besten, so dass diese Ressource sehr wertvoll ist. Nebenbei bemerkt lässt sich viel Geld sparen. Alle Anfängerinformationen, wie das funktioniert, stehen im Internet, z.B. auf w3schools.] Obwohl Entwickler nicht einfach ihr eigenes Layout implementieren sollten, gibt es Situationen, in denen dies eine bessere Option darstellt, als sich der Entwicklung von nativen Umgebungen zu verschreiben.

Rendern unabhängig von der Auflösung

Lassen Sie uns zu den Basics zurückkehren: Was bedeutet es, unabhängig von der Auflösung zu sein? Und warum ist das so wichtig?

Definition von Unabhängigkeit in Bezug auf Auflösung

Sobald Inhalte in ein Ausgabemedium gemalt werden wie Drucker oder Bildschirm, wandelt eine Software die Beschreibung dessen, was gemalt werden soll, in tatsächliche Pixel um, z.B. wird zuerst ein Text in geometrische Grundlinien umgewandelt, wobei diesen Linien ein Schriftsatz zugrunde liegt. Diese Grundlinien werden 'rasterisiert', bzw. in Pixel umgewandelt. Der gleiche Prozess findet auch statt bei einfachen Formen, z.B. wenn ein Dreieck an eine bestimmte Position gemalt werden soll (X-/Y-Koordinate) und dies mit einer festgelegten Größe (Breite/Höhe).

Zum Rendern von Elementen ist es für deren Unabhängigkeit von der Auflösung notwendig, dass Objekte so beschrieben werden können, dass sie unabhängig sind von den exakten Eigenschaften eines Mediums. Ziel ist es, bestimmen zu können, was gemalt werden soll, wobei die zugrundeliegende Software zur Laufzeit erledigt, wie dieses Malen genau vonstatten geht.

Das ist besonders wichtig, gerade weil sich moderne Geräte hinsichtlich Größe und Pixeldichte sehr stark unterscheiden. Auf einem Bildschirm mit 96 dppi (dppi = device pixel per inch, engl. Gerätepixel pro inch) wäre ein Millimeter ca. 4 Gerätepixel lang, so dass ein Rechteck mit der Position x=10mm und y=20mm die Position hätte: x = 40 Gerätepixel und y = 80 Gerätepixel. Auf einem Display mit 300 dppi jedoch wäre ein Millimeter ungefähr 12 Gerätepixel lang, und das Rechteck sollte dann die Position haben x = 120 Gerätepixel und y = 240 Gerätepixel. Auf jeden Fall, und das ist das Entscheidende daran, würde das Rechteck an derselben Stelle auf dem Bildschirm erscheinen, also immer ungefähr (wegen dem Runden) 10mm auf der X-Achse und 20mm auf der Y-Achse.

Skalierbare Inhalte

Um von der Auflösung unabhängig zu sein, muss ein System in der Lage sein, sich den Render-Bedingungen anzupassen. Postscript und PDF sind Beispiele für Technologien, die auf dem Konzept von Einheiten basieren, die auf Wusch skaliert werden können, um die zur Verfügung stehende Display-Auflösung optimal auszufüllen. Beide Technologien nutzen die Einheit 'point' und definieren sie als 1/72 eines Inches.

SVG (engl. für scalable vector graphics) macht das gleiche und hat ein Konzept von 'user unit' (engl. Benutzer-Einheit) von der alle anderen Einheiten am Ende abgeleitet sind; CSS definiert CSS-Pixel, die Einheit, auf die alle anderen hinauslaufen und eine SVG-Userunit ist das gleiche wie ein CSS-Pixel.

In all diesen Fällen wird schließlich die Position von Objekten und allen anderen Abmessungen auf eine einzelne Einheit dargestellt, die dann mit einer bestimmten Anzahl an Gerätepixeln verknüpft wird. So kann alles wie gewünscht skaliert werden, z.B. wenn der Benutzer in die Seite hineinzoomt.

Bevor wir tiefer in diese Materie der CSS-Pixel eindringen, möchten wir anmerken, dass skalierbare Formate wie SVG eine sehr effektive Methode sind, Unabhängigkeit von der Geräteauflösung oder 'responsiveness' zu gewährleisten.

Kurzinfo:
Iconfonts sind eine weitere in die Mode gekommene Praxis, siehe z.B. http://css-tricks.com/html-for-icon-font-usage/ oder http://nimbupani.com/markup-free-icon-fonts-with-unicode-range.html. Außerdem gibt es sehr schlaue OpenType-Hacks wie Chartwell oder Symbolset. Diese sind Bestandteil des heutigen skalierbaren Repertoires.

Von CSS-Pixeln, physischen Einheiten und Skalierbarkeit

Obwohl die CSS Values and Units specification alle CSS-Einheiten in einem einzigen Dokument definiert, erfordert es vielleicht etwas Arbeit, sich eine Vorstellung davon zu machen, wie CSS ihre Einheiten mit realen Maßeinheiten oder physischen Einheiten verbindet.

Alles was die Specification sagt, kann letztendlich zusammengefasst werden als:
96px = 1in

Einfache Mathematik bestimmt die zwei möglichen Verhaltensweisen, die die Specification erlaubt:

border: 1px solid blue;

So würde dessen Rand 3,123 Gerätepixel breit sein. Abhängig vom 'rasterizer' - dem Teil der Software, die einfache Formen in Pixel übersetzt -, könnte man damit erreichen, dass 3 Pixel blau ausgefüllt sind und der 4. teilweise, um durch anti-aliasing mit dem Hintergrund zu verschmelzen.

Bis vor einigen Jahren wurde ein CSS-Pixel normalerweise mit einem einzigen Bildschirmpixel gleichgesetzt. Die Konsequenz davon war, dass ein CSS-Inch nicht immer einem realen physischen Inch entsprach. War die reale Auflösung eines Laptops 120dppi, so wurde ein 96 Pixel großer Inch deshalb am Ende als 96/100 = 0,8 Inch abgebildet!

Mit der Entwicklung hin zu immer höheren Piseldichten, haben wir Geräte mit 2 Gerätepixeln pro CSS-Pixel (das Apple Retina, beispielsweise) oder Geräte mit Pixelverhältnissen, die durch Bruchzahlen darstellbar sind (siehe diesen MDN Beitrag). Sobald Bruchzahlen ins Spiel kommen, führt das möglicherweise zu zusätzlichem anti-aliasing beim Rendern, so wie bei hochauflösendem Rendern.

Einfaches Beispiel (example.html)

code

Beweis dafür, dass 96px 1 in sind
Bild 1: Rendern in Opera Version:56.0.3051.116 (bitte klicken, um auf eigenem Gerät zu rendern)
Datei: example.html als Text

Sobald wir versuchen, das Dokument auf verschiedenen Geräten zu rendern, werden wir feststellen:

So… ein Pixel ist also kein Pixel und ein Inch kein Inch?

Na, ja, es ist ungefähr so, aber nicht so schlimm, wie es aussieht. Hier ist der Grund:

Fazit

Was sollen wir nun als Webentwickler beachten, damit unsere Inhalte schön auf verschiedensten Geräten gerendert werden mit verschiedenen Displaygrößen, Formfaktoren und Pixeldichten? Das kann man mitnehmen:

  1. Benutze media queries, um das gewünschte Layout zu generieren, abhängig von den Renderbedingungen (z.B., kleiner Gerätebildschirm, Tablet, Desktop-PC mit großem Bildschirm).
  2. Nutze die Einstellungsmöglichkeiten des Viewports für mobile Geräte im Meta-Tag.
  3. Benutze CSS-Einheiten und CSS-Layout, um deine Inhalte in den gewünschten Fluss zu bringen und für die gewünschte Größe. [Edit: In dem vorgetragenen Sinne sind es relative Einheiten ähnlich wie die Einheit „%”, vermeide also reale metrische Einheiten wie cm oder in.] Verhelfe den neuesten Einheiten (indem du sie benutzt) zum Durchbruch wie ‘rem’, ‘vh’ und ‘vw’ (prüfe ihren Implementationsstatus) oder ältere, aber immer noch sinnvolle Einheiten wie Prozent, ‘em’ oder ‘pt’.
  4. Verstehe, dass CSS-Pixel eine Referenz darstellen auf einen abstrakten Referenzpixel und dass die Schlüsselregel, die es zu beachten gilt, ist, dass 96 CSS-Pixel immer die gleiche Länge haben wie 1 CSS-Inch.
  5. Benutze SVG (oder icon fonts, beschränkter aber besser unterstützt) so oft du kannst (abhängig von der Art deiner Bilder und/oder deinem Ziel-Browser/deinen Zielbrowsern), um Inhalte zu generieren, die auf natürliche Weise hochskaliert werden können hin zu höheren Pixeldichten oder Größen.

Siehe auch

Description: Dieser Artikel ist eine Übersetzung von understanding-css-units auf WebPlatform.org. Für angehende Webentwickler, Anfänger oder auch fortgeschrittene Entwickler sind die zur Verfügung gestellten Informationen und Ressourcen von erheblicher Wichtigkeit, weshalb ich mir die Arbeit gemacht habe und diesen Text aus dem Englischen übersetzt habe. Auch für mich persönlich ist es wichtig diese Ressource(n) immer zur Hand zu haben. Der beste Weg ist die Veröffentlichung auf meiner eigenen Seite.

Übersetzt von: Karsten Fink
Keywords: CSS-Pixel, Referenzpixel, ein Pixel ist kein Pixel, Gerätepixel, dppi, Auflösung, Gerätepixel, SVG, Canvas 2d, WebGL, point
Geschrieben:
Sprache: de (Deutsch)
Lizenz: Content available under CC-BY, except where otherwise noted.

Primitivecode ist Grammatik pur. Aber Programmieren kommt auch nicht zu kurz, denn die Seite mache ich allein. Informationen zum Datenschutz findest du hier.