There’s some new units I was totally unaware of from the Level 4 spec for CSS values! The lh unit is “equal to the computed value of line-height” and rlh is the same only of the root element (probably the <html> element) rather than the current element.
Why would that be useful? Šime Vidas’ has a strong point:
.inline-icon {
display: inline-block;
width: 1lh;
height: 1lh;
}
Perfect for inline SVG icons!
Agree, super useful unit.
This will provide better solutions for vertical rhythm.
It will simplify the CSS needed to achieve baselined margins and paddings.
It will provide a better (and easier) way to write CSS for point grids…
In my experience, the line-height measurement is the most common mismatch between sketch files and front-end.
here’s a project on that subject:
https://matejlatin.github.io/Gutenberg/
Feel like I’ve been waiting for this for at least a decade.
Maybe it would be helpful to link the MDN Compatibility table – currently (May 2020), it’s not supported anywhere yet :(
Here’s the link: https://developer.mozilla.org/de/docs/Web/CSS/length#Browser_compatibility