Im Rahmen eines Artikels für web & mobile Developer, der am 9. April 2015 erscheint, habe ich mich etwas näher mit den Einheiten in CSS3 beschäftigt und bin auf ein paar interessante Dinge gestoßen …
1. Mehr als deg
Neben der bekannten Einheit deg für Drehungen existiert auch rad, grad und turn. turn ist etwa praktisch, wenn man definieren möchte, dass sich ein Element mehrmals um sich selbst dreht. Dann muss man nicht X * 360deg berechnen , sondern schreibt einfach Xturn, also beispielsweise:
transform: rotate(1turn);
2. ch: nicht nur Länderkürzel, sondern auch Einheit
ch ist eine weniger bekannte Einheit, die die Breite der 0 (Ziffer Null) in der gewählten Schrift bezeichnet.
3. em bei Media Queries
Bei Media Queries beziehen sich em nicht auf den Wert von body, sondern auf die im Browser aktuell eingestellte Standardschriftgröße. Wenn man etwas definiert wie:
@media screen and (min-width: 30em) {
body { background: red;}
}
Dann ändert sich nichts am Zeitpunkt des Breakpoints, wenn ich einen absurd hohen Wert für body festlege.
body { font-size: 100px; }
@media screen and (min-width: 30em) {
body { background: red;}
}
4. Unterschiedliche Browserunterstützung für Viewport-Einheiten
Während die Browserunterstützung für die Viewport-Einheiten vh und vw recht gut ist, ist sie noch recht durchwachsen für vmin und vmax, auf einen Einsatz der letzteren würde ich heute eher noch verzichten.
5. Höhe von 100% mit vh
Wenn man ein Element genauso hoch werden soll wie das Browserfenster, so funktioniert die Angabe von .beispiel { height: 100%} nicht, da man zusätzlich einen Bezugspunkt für die Höhe setzen muss – etwa, indem man body und html ebenfalls auf 100% Höhe setzt. Das ist bei height: 100vh nicht notwendig, wir brauchen keinen Bezugspunkt und trotzdem füllt das Element die gesamte Höhe des Viewports aus.
6. 0 ist doch nicht gleich 0
Bei 0 kann man im Allgemeinen in CSS die Einheit weglassen, da 0% = 0px = 0em etc. Allerdings gibt es eine Ausnahme: Bei der Definition einer Animation muss man wirklich 0% für den Anfangszustand schreiben, 0 alleine reicht nicht.
@keyframes einblenden {
0% { opacity: 0; }
100% { opacity: 1; }
}
Das Folgende ist hingegen nicht korrekt:
@keyframes einblenden {
0 { opacity: 0; }
100% { opacity: 1; }
}
7. calc() – Leerzeichen an der richtigen Stelle
calc() ist praktisch, um Werte zu berechnen, etwa eine Breite von 50% + 2em. Allerdings muss man dabei auf die richtige Syntax achten. Vor Plus und Minus muss ein Leerzeichen stehen:
Das Folgende geht:
calc(200px + 10%)
Nicht korrekt hingegen ist:
calc(200px +10%)
Bei Division und Multiplikation spielt es hingegen keine Rolle, ob man das Leerzeichen schreibt oder nicht.
Mehr dazu sowie genaue Erläuterungen der Funktionsweise der Einheiten rem, vw und Co. gibt’s in meinem Artikel für die Zeitschrift web & mobile Developer in der Ausgabe 5.