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%.
Bild 2: Viewport Breite 50%. Content wird abgeschnitten. Horizontaler Scrollbalken kommt hinzu.
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.
| Bezeichnung | Symbol | Entsprechende Pixelgröße | Kommentar |
|---|---|---|---|
| Pica | pc | 1 pc = 16px | Für Druck geeignet. |
| Punkt | pt | 1pt = 1.333px | Für Druck geeignet. |
| Zoll | in | 1 in = 96px | Für Druck geeignet. |
| Zentimeter | cm | 1 cm = 37.795px | Für Druck geeignet. |
| Millimeter | mm | 1 mm = 16px | Fü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:
| Bezeichnung | Symbol | Kommentar | Subrelation |
|---|---|---|---|
| Pixel | px | Fü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. |
| Ems | em | Fü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 Viewports | vh | Für Bildschirme und Displays geeignet. | Relativ zum Viewport. 1 vw = 1% der Breite des Viewports. |
| Höhe des Viewports | vw | Für Bildschirme und Displays geeignet. | Relativ zum Viewport. 1 vh = 1% der Höhe des Viewports |
| m-Höhe des Root-Elements | rem | Fü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… 
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:
html {
margin-left: calc(100vw – 100%);
}
|
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
