Entwicklung & Design

CSS-Maßeinheiten: Über das Pixel hinaus

Seite 3 / 3

X-Height (ex)

Ähnlich wie bei ems bezeichnet X-Height die Höhe des Buchstaben X in der aktuellen Schriftart. Dieser Wert ist ebenfalls im Font selbst definiert, aber er wird momentan von den Browsern nur geschätzt, und zwar auf die Hälfte eines em.

Für X-Height gelten die gleichen Regeln wir für em. Bitte lest im vorherigen Absatz über die entsprechenden Ausnahmen.

Viewport-Breite (vw) und Viewport-Höhe (vh)

Solltet ihr jemals versucht haben, Elemente zu verwenden, deren Größe relativ zum Viewport stehen, dann habt ihr bisher praktisch nur zwei Möglichkeiten gehabt: Entweder Elemente als direkte Kindelemente an den <body>-Tag hängen und dann Größen mit Prozentangaben setzen. Oder bei allen Elementen Prozentangaben verwenden und dann rückwärtsrechnen, um die jeweilige Reduzierung zu berücksichtigen.

Um Größen relativ zum Viewport zu bekommen, könnt ihr nun die Viewport-Breite (vw) und die Viewport-Höhe (vh) verwenden, und zwar mit jedem beliebigen Element, egal wie tief in der Hierarchie es sich befindet. Die Einheit wird immer einen Prozentwert zum aktuellen Viewport bezeichnen. Um beispielsweise eine Box zu erstellen, die halb so breit und halb so hoch ist wie der Viewport, verwendet ihr einfach:

#mydiv { width: 50vw; height: 50vh; }

Im Gegensatz zu Prozentangaben verändert sich der Messkontext für den Viewport nie. Ihr könnt diese Einheit daher überall verwenden, ohne Angst haben zu müssen, dass sich seine Größe durch eine vererbte Größe verändern könnte.

Kleinere Viewport-Dimension (vmin)

Diese Einheit verhält sich genau wie die Viewport-Breite und die Viewport-Höhe, aber mit einer Spezialität: Sie bezieht sich immer auf den Wert der kleiner ist: Viewport-Breite oder Viewport-Höhe. Um die Wirkweise zu demonstrieren, nehmt ihr einen einfachen div und verwendet die Einheit Viewport-Dimension (vmin) in seinen Größenangeben.

#mydiv { width: 100vmin; height: 100vmin; }

Wenn Sie sowohl Breite als auch Höhe auf diese Weise setzen, erhalten Sie ein Quadrat, das exakt in den Viewport passt, jedoch niemals seinen Inhalt abgeschnitten darstellen muss, was quasi das größtmögliche Quadrat erstellt, das in den Viewport paßt.

Breite von 0 (ch)

Dies ist eine weitere Einheit, die für Typografie gedacht ist. Sie misst jedoch nicht die Höhe, sondern die Breite des Schriftzeichens 0 (Ziffer Null). Wenn der aktuell verwendete Schriftsatz dieses Zeichen nicht enthält, nimmt die Einheit als Wert die durchschnittliche Breite aller Zeichen. Die Spezifikation ist derzeit ein bisschen unklar darüber, wie der Wert gemessen werden soll. Zum Beispiel empfiehlt sie als Standardwert den Wert von 0.5 em zu nehmen, wenn es das Zeichen 0 nicht im Font gibt.

Die Einheit ch ist sehr hilfreich, um horizontale typografische Raster zu definieren, da das Vielfache dieser Einheit in etwa der Breite einer Zeichenkette der selben Anzahl von Buchstaben entspricht. Hier ist ein Beispiel für eine Spalte, in die ungefähr 40 Zeichen pro Zeile passen:

#mycolumn { width: 40ch }

m-Höhe des Wurzelelements (rem)

Manchmal ist es nützlich, sich von einer beliebig tiefen Stelle in der Hierarchie aus auf die ursprüngliche Schriftgröße zu beziehen und Schriftgrößen relativ zum Wurzelelement zu setzen. Um diesen Verwendungszweck zu zeigen, könnt ihr die Einheit rem benutzen, die sich immer auf den Wert für font-size im <body>-Element bezieht:

#mydiv { font-size: 2rem; }

Der Text in diesem Element wird immer zweimal so groß sein, wie der Text direkt im <body>-Element, egal wo in der DOM-Baumstruktur ihr das Element platziert.

Zur Kompatibilität

CSS3 geht es nicht anderes als anderen brandneuen Techniken: Obwohl Webbrowser nach und nach die Funktionalitäten und Merkmale von CSS3 implementieren, sind manche der im Artikel beschriebenen Einheiten zugunsten der implementierten Features bisher auf Eis gelegt worden. Der Browser, der momentan die meisten besprochenen Längeneinheiten unterstützt, ist Google Chrome, der seit dem Change Set im März 2012 die Einheiten vw, vh und vmin kennt.

Der Internet Explorer hat seine Unterstützung auch beträchtlich verbessert, seit der Internet Explorer 9 und höhere Versionen die Einheiten vw, vh und rem unterstützen, wie hier gezeigt. Auch Gecko unterstützt seit der Version 1.9.2 die Einheit rem.

Ich befürchte, dass ihr diese Einheiten nicht verwendet und dann bei einzelnen, nicht unterstützten Einheiten zurückschalten könnt. Denn das Verhalten dieser Einheiten lässt es nicht zu, sie mithilfe anderer Einheiten und ohne JavaScript zu emulieren. Trotzdem erlauben euch responsives Webdesign und progressive Verbesserung, dass ihr euch auf sinnvolle Voreinstellungen und Alternativen verlassen könnt, sollten diese Einheiten nicht verfügbar sein. Notiert euch einfach, wie im folgenden Beispiel, die alternative Größe im CSS-Code zuerst und erst danach die eventuell nicht-unterstützte Einheit:

#mycolumn {
  width: 320px;
  width: 40ch;
 }

In diesem Fall verwendet der Browser, statt der Einheiten die er nicht versteht, einfach den vorher angegebenen Wert. Nachdem einige der frühen Implementierungen dieser Einheiten bei verschiedenen Browsern zu unterschiedlichem Verhalten führen, solltet ihr diese ausgiebig testen. So findet ihr heraus, wo ihr Rückfallfunktionen oder Workarounds einsetzen müsst.

Über den Autor

Klemen Slavic ist ein Front-End-Engineer bei Celtra Inc., wo er an Celtras Selbstbedienungs-Werbe-Web-Anwendung und mobilen Apps arbeitet. Er besitzt ein MCT- und ein MCPD-Web-Zertifikat und ist auch ein ACE in Photoshop. Er befürwortet offene Webtechniken.

Klemen begann 1996 zu programmieren, als er Fraktalrenderer in Logo und BASIC für die Windows-Umgebung mit Visual Basic 6 geschrieben hat, bis er sich schließlich dem Web zuwendete. Er hat sich in HTML, CSS und JavaScript verliebt, was zurzeit der Mittelpunkt seiner professionellen Arbeit und auch seines Hobbys ist.

In seiner Freizeit bleibt er gerne auf dem Laufenden, was verschiedene neue Webtechniken, Closed- oder Open-Source, betrifft oder er vergnügt sich an medial reichhaltigen Projekten und Vorführungen. Um sich einen Überblick über seine Arbeiten zu verschaffen, könnt ihr euch seine about.me-Seite ansehen.

Hier findet ihr Klemen:

Blog: animalija.sopca.com
Twitter: @krofdrakula
Delicious: krof.drakula

Weiterführende Links

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

4 Kommentare
DerFreeman
DerFreeman

Sehr schön erklärt. Danke!

Antworten
Pascal Welsch

Schade, dass es in CSS3 nicht eine einheit wie DIP (Density Independent Pixel) bei Android gibt. bei 160dpi ist das genau 1dp = 1px. bei 320dpi dann 2px …

mit cm in em… kann man ja leider nicht arbeiten.

hier mal noch ein guter artikel dazu. http://alistapart.com/article/a-pixel-identity-crisis

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung