Day 38: vh, svh, lvh, and dvh
It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.
Using the viewport unit
vh in desktop browsers is usually straight-forward,
100vh matches the height of the viewport. On mobile that's different because the viewport height changes depending on whether or not certain user interface elements are visible,
100vh doesn't always match the height of the viewport.
On mobile we have the small viewport and the large viewport. According to the spec, the small viewport is
the viewport sized assuming any UA [User Agent/Browser] interfaces [for example the address bar] that are dynamically expanded and retracted to be expanded.
The large viewport is
the viewport sized assuming any UA interfaces that are dynamically expanded and retracted to be retracted.
The problem with
100vh on mobile is that it doesn’t respect whether user interface elements are expanded or not. It usually always matches the large viewport. CSS introduces new viewport units to address that issue.
You can use
svh for the small viewport and
lvh for the large viewport.
/* See result in the first screenshot */
/* See result in the second screenshot */
That's great, but depending on if and how the user interacts with the page, they might sometimes see the large viewport and sometimes the small viewport. Setting the height to either unit probably isn't what you want because the height changes dynamically. Instead, you want to use the third new unit
dvh, which dynamically either matches
See on CodePen
- It's viewports all the way down | HTTP 203
- 188.8.131.52. The Large, Small, and Dynamic Viewport Sizes
- Large, Small, and Dynamic viewport units (caniuse)
Do you want to learn even more awesome CSS?
I'm running a workshop with my friends at Smashing Magazine in which I introduce you to the most useful modern features in CSS and show how you can implement them today in your code base to improve scalability, maintainability, and productivity.
Learn more about the workshop!
Overview: 100 Days Of More Or Less Modern CSS