DEV Community

The new (and old) CSS units you've never heard about

Massimo Artizzu on June 11, 2018

JavaScript is evolving fast, recently, but it's not like the other web development language companions are set to stone either. CSS is evolving to...

Read full post

⚡️ • Jun 11 '18

Love this lad. Absolute unit.

Massimo Artizzu • Jun 12 '18

In awe at the wit of this comment.

You win this:

Philip Karlsson • Jun 11 '18

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.

Great post!

Massimo Artizzu • Jun 11 '18

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:

IE never supported vmax, and Edge started to support it only recently; a way to emulate it was using calc. E.g. if you wanted 15vmax, you could do calc(15vw + 15vh - 15vmin) - not really handy, though.
IE9 used vm instead of vmin, together with a completely wonky implementation of all these viewport units.

They're great units, unfortunately they lose a lot of value due to inconsistencies among mobile browsers (I'm looking at you, Safari).

Ryan • Jun 12 '18

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 :\