Love this lad. Absolute unit.
In awe at the wit of this comment.
You win this:
I've used vh/vw a bit, and the new fr unit (which is useful when working with CSS Grid).
I've also come across the new (I assume that they're new) units vmin and vmax, which works pretty much the same as vh and vw. But represents the bigger/smaller side of the viewport instead of the height and width.
It'd be quite interesting to see a use case for all of these units.
vmin and vmax are actually as old as vw and vh, both on Level 3. Not many use cases, but there are some! They're especially useful for responsive layouts and font sizing.
Some trivia about them:
calc(15vw + 15vh - 15vmin)
They're great units, unfortunately they lose a lot of value due to inconsistencies among mobile browsers (I'm looking at you, Safari).
I used to like vh/vw. Until I discovered that Safari scaled them with zoom. So if you are zoomed at 85%, 100vw becomes 85% of the width of the page which is now equal to 72.2% of its original size.
I don't know who thought that made any sense and it seems to be the only browser that behaves that way :\
Oh, I see.
It's a shame that it's not implemented consistently, which often seems to be the case with CSS.
All these typography units and still no way to control the baseline position...
Ah, tell me about it 😄
It should be coming, though. Alas, not very soon.
How does the min-aspect-ratio works?
In the example, 16/10 or wider?
16/10 is, after all, equal to 1.6 🙂
I feel really dumb right now.
lh units can be simulated when using a scalar line height (like line-height: 1.2) with:
calc(1em * 1.2)
Likewise rlh with rem.
This is awesome I had no idea!
Awesome article, thank you for sharing the knowledge.
We're a place where coders share, stay up-to-date and grow their careers.
We strive for transparency and don't collect excess data.