20 new CSS Viewport units are here. Including 'svh', 'lvh', 'dvh',

As a frontend developer, I have been pained so many times by trying to support mobile when the design has a full height. Hours and hours have been wasted trying to take into account the fact that when you scroll on your mobile device. The device will start to remove or show toolbars that mess up the design.

Recently while listening to my favorite developer podcast Syntax. I learned that there are finally some new units coming our way that are almost fully supported by all browsers. You can listen to that podcast by clicking below.

New Viewport Units — Syntax Podcast 473

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

In response I was going to do some research into them and write up a long post about each of the new units but I found this amazing blog post linked below that you should go and read instead.

Incoming: 20 new CSS viewport units: svh, lvh, dvh, svw, lvw, dvw, ...

Explanation of current viewport units and all 20 incoming new viewport-relative CSS units: svh, lvh, dvh, svw, lvw, dvw, and many more.

Terluin WebdesignThijs Terluin

I really can not wait to start using these in production and cant wait to see what crazy and inventive ways people will use them.