As I keep encountering CSS codebases and theme definitions that solely use the traditional viewport units vh and vw, I thought about writing a blog post about the powerful tools we have on our disposal nowadays, that can make our lives easier and our CSS code better.
The good old viewport units
Long story short, for many years we’ve been using vh and vw to define something as percentage of the initial viewport height and width. For example, if we wanted to fill the entire viewport of all devices with green, we could do the following:
.big-fat-green-element {
background: green;
height: 100vh;
width: 100vw;
}
..and this would probably do the trick. But this would only work reliably until for whatever reason, something affected the visible viewport. For instance, most of the modern mobile browsers will hide part or all of the title and address bar once the user starts scrolling the page, also affecting the viewport and making our big fat green element less big.
The modern viewport units
Nowadays and in latest CSS specifications we can safely use the so called Large, Small, and Dynamic Viewport Units.
Large Viewport Units
The large viewport-percentage units (lv*) and default viewport-percentage units (v*) are defined with respect to the large viewport size: the viewport sized assuming any UA interfaces that are dynamically expanded and retracted to be retracted.
Essentially, lvh and lvw give us units that we can use as percentage in relation to the viewport when the browser UI is the smallest and website content is at its largest state. lvh and lvw will actually give us identical behaviour to the traditional vh and vw units.
Example: An example of using the lvh and lvw units would be to define the height and width of an element that should act as full page background.
/* Full-page background using largest available viewport height and width, regardless of other elements or browser UI state. */
.full-page-background {
height: 100lvh;
background: #f51;
position: fixed;
top: 0;
left: 0;
width: 100lvw;
z-index: -1; /* Ensure it stays behind other content */
}
Small Viewport Units
The small viewport-percentage units (sv*) are defined with respect to the small viewport size: the viewport sized assuming any UA interfaces that are dynamically expanded and retracted to be expanded.
In other words, svh and svw give us units that we can use to fill the screen when the browser UI is at its largest state, and the website content is at its smallest state.
Example: A good example of using the svh unit would be to define the height of a fixed bottom bar or a static header.
/* Header with static height, 10% of the smallest available viewport
* e.g. when the browser UI is visible on mobile devices */
.header {
height: 10svh;
background-color: #642;
}
Dynamic Viewport Units
The dynamic viewport-percentage units (dv*) are defined with respect to the dynamic viewport size: the viewport sized with dynamic consideration of any UA interfaces that are dynamically expanded and retracted.
The sizes of the dynamic viewport-percentage units are not stable even while the viewport itself is unchanged. Using these units can cause content to resize e.g. while the user scrolls the page. Depending on usage, this can be disturbing to the user and/or costly in terms of performance.
While the dvh & dvw units may sound ideal, the caveats noted in the definition above and some issues I had when using them in scrolling elements, made me conclude that we should only use them in very specific situations.
Example 1: An example of using dvh would be to define the height of a content element that should adjust as per viewport changes.
/* Main content adjusts dynamically.
* Since we used dvh the element height will align with the actual viewport and adapt to its changes */
.adjustable-content {
background-color: #895;
height: calc(100dvh - 10svh); /* Adjust height considering header */
overflow: auto;
padding: 10px;
}
Example 2: I had this case last week when a bug was reported about a form where by design, scrolling was disabled while the form would occupy the full height and width of the viewport. The bug occurred when a mobile user would focus on an input and the device keyboard would show up. Then the form layout would break. The fix was to use dvh instead of vh for its height definition.
Codepen with Examples
Finally here is a codepen where you can see the modern viewport units in action. Enjoy!
Source link
lol
