Es gibt neue Einheiten, von denen ich im Level 4 der CSS-Werte-Spezifikation absolut nichts wusste! Die Einheit lh ist „gleich dem berechneten Wert von line-height“ und rlh ist dasselbe nur für das Root-Element (wahrscheinlich das <html>-Element) anstelle des aktuellen Elements.
Wozu könnte das nützlich sein? Šime Vidas hat einen starken Punkt
.inline-icon {
display: inline-block;
width: 1lh;
height: 1lh;
}
Perfekt für Inline-SVG-Icons!
Stimme zu, super nützliche Einheit.
Dies wird bessere Lösungen für den vertikalen Rhythmus bieten.
Es wird den benötigten CSS-Code vereinfachen, um baselinierte Abstände und Polsterungen zu erzielen.
Es wird eine bessere (und einfachere) Möglichkeit bieten, CSS für Punkt-Raster zu schreiben...
Meiner Erfahrung nach ist die line-height-Messung die häufigste Diskrepanz zwischen Sketch-Dateien und Frontend.
Hier ist ein Projekt zu diesem Thema
https://matejlatin.github.io/Gutenberg/
Ich glaube, ich warte seit mindestens einem Jahrzehnt darauf.
Vielleicht wäre es hilfreich, die MDN-Kompatibilitätstabelle zu verlinken – derzeit (Mai 2020) wird sie noch nirgends unterstützt :(
Hier ist der Link: https://developer.mozilla.org/de/docs/Web/CSS/length#Browser_compatibility