Introduction.
In the ever-evolving world of web design, CSS units play an important role in creating responsive and visually appealing websites. Recently, new CSS units, LVH, SVH, and DVH, were introduced to address some of the challenges faced by developers. This article delves into these new units and provides a comprehensive understanding of their application and benefits.
Understanding the Basics
Before we get into the new units, let’s briefly review what a viewport unit is: in CSS, a viewport is the user-visible area of a web page, depending on the device used. In responsive design, the units VH (viewport height) and VW (viewport width) are often used, where 1vh equals 1% of the viewport height and 1vw equals 1% of the viewport width.
However, the traditional units of VH and VW have limitations, especially with respect to mobile browsers. The height of the viewport on mobile devices can vary depending on the visibility of user interface (UI) elements, leading to layout inconsistencies. This is where the new units of LVH, SVH, and DVH come in.
Large Viewport Height (LVH)
The LVH unit represents the large viewport height. It assumes that user interface (UI) elements that can be dynamically expanded and contracted are retracted. In other words, LVH is based on the largest viewport height available, providing a larger canvas for web content.
Small Viewport Height (SVH)
SVH, on the other hand, represents the small viewport height. It assumes that UI elements will be extended and the available viewport height will be smaller; using SVH ensures that content is not hidden by UI elements when they are displayed.
Dynamic Viewport Height (DVH)
The DVH unit is perhaps the most versatile of the three; it automatically adjusts based on the current state of the UI element; when the UI element is extended, the dynamic viewport equals the size of the small viewport (SVH). Conversely, when the UI element is retracted, the dynamic viewport equals the size of the Large Viewport (LVH). This dynamic adjustment allows for a more fluid and responsive design.
Practical Applications
The choice between LVH, SVH, or DVH depends on the specific needs of the web design. If you want to ensure that content is not hidden by UI elements, you may want to choose SVH. If you want to maximize the available viewport height, LVH is the right choice; for designs that need to dynamically adapt to UI changes, DVH would be the ideal choice.
Conclusion.
The introduction of the LVH, SVH, and DVH units to CSS is a major step forward for responsive web design. These new units give developers more control over how the design responds to changes in the viewport, resulting in a more consistent and user-friendly layout. As with any new tool, it will take time for developers to fully explore and understand its potential, but the future is certainly promising.