It’s #FrontendFriday – Einheiten in CSS

CSS bietet eine Reihe unterschiedlicher, typografischer Einheiten. Grundsätzlich wird zwischen relativen und absoluten Maßeinheiten unterschieden. Solche Größen bemessen Elemente eines Layouts, Abstände sowie Schriftgrade. Vor allem im Bereich des „Responsive Webdesigns“ ist das grundlegende Verständnis, über die Funktionsweise der CSS-Längenangaben, entscheidend. Der folgende Beitrag konzentriert sich nur auf die in CSS (Cascading Style Sheets) verwendete Einheiten für virtuelle Medien. Buchschriftsätze sind zusätzlich aus dem Betrachtungsfokus ausgenommen.

Relative und absolute Einheiten

Ob eine Längeneinheit absolut oder relativ ist, hängt von ihrer Relation zu einem bestimmten Kontext ab. Es gibt zwei wichtige Kontextarten: das PPI („pixels per inch“) sowie den Viewport. Absolute Einheiten hängen grundsätzlich vom dem PPI- bzw. DPI-Wert ab und sind für Geräte mit standardisierter Auflösung (Viewport), beispielsweise für Drucker, als geeignet zu klassifizieren. Im Bereich des „Responsive Webdesigns“ kommt jedoch das Problem der hardwareseitigen Fragmentierung, also mehreren Viewports, hinzu. Um das Problem in eigenen Worten zu formulieren: „Auf einem Viewport bleibt ein Pixel ein Pixel…“.  Dies Löst der Browser mit abgeschnittenen Content sowie Scrollbalken. Die folgenden Bilder sollen die getroffene Aussage verdeutlichen.

Bild 1: Viewport Breite 100%.

Quelle: https://www.google.com/search?q=pandas+sind+die+coolsten+tiere&rlz=1C1GCEA_enDE796DE796&source=lnms&tbm=isch&sa=X&ved=0ahUKEwi-1r6KoprgAhUOKuwKHdHoB80Q_AUIDygC&biw=1920&bih=1057

Bild 2: Viewport Breite 50%. Content wird abgeschnitten. Horizontaler Scrollbalken kommt hinzu.

 Quelle: https://www.google.com/search?q=pandas+sind+die+coolsten+tiere&rlz=1C1GCEA_enDE796DE796&source=lnms&tbm=isch&sa=X&ved=0ahUKEwi-1r6KoprgAhUOKuwKHdHoB80Q_AUIDygC&biw=1920&bih=1057

Im Browser kommt noch ein zusätzliches Kompensationsproblem hinzu.  Denn durch die Kompensation der Punktedichte des Displays, auf einen festen Wert von 96 DPI (DOTS PER INCH), wird der echte DPI-Wert übergangen und es kommt in der Regel zu Geräten übergreifenden Darstellungsabweichungen.

 

Abstrahiert betrachtet sind DPI und PPI dieselbe Maßeinheit.

 

Zusammenfassend kann festgehalten werden, dass der Einsatz absoluter Längeneinheiten im Bereich des „Responsive Webdesigns“ nicht empfehlenswert ist. Folgend eine Übersicht der absoluten Längeneinheiten.

 

BezeichnungSymbolEntsprechende PixelgrößeKommentar
Picapc1 pc = 16pxFür Druck geeignet.
Punktpt1pt = 1.333pxFür Druck geeignet.
Zollin1 in = 96pxFür Druck geeignet.
Zentimetercm1 cm = 37.795pxFür Druck geeignet.
Millimetermm1 mm = 16pxFür Druck geeignet.

 

Relative Maßeinheiten hängen noch zusätzlich von der Viewport-Größe sowie einem bestimmten Subkontext, welcher beispielsweise eine weitere Relation zu einer Schriftart oder einem Container sein kann, ab. Die Abhängigkeit zur Größe des Viewports löst weitgehend das Problem der hardwareseitigen Fragmentierung. Somit kann an dieser Stelle eine Empfehlung für den Einsatz solcher Einheiten, im Rahmen des responsiven Webdesigns, ausgesprochen werden. Eine Übersicht der wichtigsten relativen Einheiten wird in der folgenden Tabelle dargestellt:

 

BezeichnungSymbolKommentarSubrelation
PixelpxFür Bildschirme und Displays geeignet.Relativ zu der Bildschirmauflösung. Wichtig in diesem Zusammenhang: Es gibt kein festes Größenverhältnis zwischen Geräte- und CSS-Pixel mit hoher Punktdichte.
Prozent%Für Bildschirme und Displays geeignet.Relativ zum drüber liegenden Container oder der Schriftgröße. Jedoch nur wenn Prozent-Dimensionen verwendet werden. Die einzelnen Container stehen in einer Vererbungsrelation zueinander.
EmsemFür Bildschirme und Displays geeignet.Bezieht sich auf die Schriftgröße (font-size) des aktuellen Elements. Falls keine Schriftgröße innerhalb des Elements gesetzt ist, wird auf Schriftgröße des Elternelements zugegriffen. Grob überschlagen kann 1em als 16 Pixel gerechnet werden.
Breite des ViewportsvhFür Bildschirme und Displays geeignet.Relativ zum Viewport. 1 vw = 1% der Breite des Viewports.
Höhe des ViewportsvwFür Bildschirme und Displays geeignet.Relativ zum Viewport. 1 vh = 1% der Höhe des Viewports
m-Höhe des Root-ElementsremFür Bildschirme und Displays geeignet.Relativ zur Schriftart des Wurzelelements. Nicht des Elternelements. Es sei denn das Elternelement ist das Wurzelelement.


Bootstrap

Das OpenSource Framework Bootstrap ist ein Leitfaden, welcher die Komponenten einer Website sowie  die hardwareseitige Fragmentierung abdeckt und die  Entwicklung beschleunigt. Im Kern ist das Framework eine Zusammensetzung von verschiedenen Stylesheets. Das Herzstück von Bootstrap ist das 12-spaltiges Raster. Dabei wird die Rasterbreite entsprechend der Displaygröße via Brakepoints angepasst.  Ein Raster besteht aus Zeilen und Spalten. Tiefer möchte ich an dieser Stelle nicht in Bootstrap einsteigen, jedoch eine Sache kurz hervorheben. Bootstrap benutzt ebenfalls relative Längeneinheiten und kann aus diesem Grund die verschieden Viewports abdecken.

Beweisführung abgeschlossen… (Lächeln)

 

Fazit

Festzuhalten ist, dass absolute Einheiten unter anderem für Druck-Layouts geeignet sind. Im Rahmen des „Responsive Webdesigns“ ist keine Verwendung, aufgrund der nicht Betrachtung der Viewport-Größe, zu empfehlen. Das Pendant stellen relative CSS-Längeneinheiten dar. Innerhalb dieser Maßeinheit kann keine Einschränkung getroffen werden, welche Einheit wo verwendet werden kann. So können zum Beispiel bei der Verwendung von vw Scrollbalken-Probleme auftreten. Mittlerweile gibt es zwar eine Elegante Lösung für die erwähnte Problematik:

 

 

Aber dies lässt schon vermuten, dass bei dem Einsatz relativer Maßeinheiten, Probleme verschiedenster Art und Weise auftreten können.  Deswegen wird hiermit auf „depends on situation“ plädiert.

 

Quellen

https://www.w3.org/Style/Examples/007/units.de.html

https://www.w3schools.com/cssref/css_units.asp

https://wiki.selfhtml.org/wiki/CSS/Wertetypen/Zahlen,_Ma%C3%9Fe_und_Ma%C3%9Feinheiten

Zurück zur Übersicht

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*Pflichtfelder

*