Stop using vh unit in CSS
Hello! Today, I'd like to discuss a common issue in front-end development related to the vh unit.
The problem with the vh unit arises because all browsers have a top menu that is initially visible when you load a page, such as the address bar. This menu slides up when you start scrolling the page.
The issue is that 100vh is sometimes calculated only on the visible part of the viewport. So, when the browser bar slides up, 100vh increases in terms of pixels.
To address this issue, developers often turn to alternative units such as dvh, lvh, and svh. These units provide a more consistent and reliable way to manage viewport height in the presence of browser toolbars. Let's delve into each of these solutions:
Dvh (Dynamic Viewport height)
The dvh unit accurately represents the current height of the viewport, excluding the user agent's interface. In contrast to the vh unit, dvh adjusts dynamically as the viewport height changes, providing a more reliable measurement.
Unlike vh, which considers only the visible portion of the viewport, dvh takes into account the vertical space occupied by the user agent's interface. As an example, when scrolling down a mobile page, the dvh value adapts to the changing position of elements like the URL bar, ensuring precise and up-to-date calculations based on the entire viewport height, including any alterations caused by user interface elements.
Svh (Small Viewport height)
The svw unit signifies the smallest visible viewport width available to the user. Notably, the value of this unit remains static; it does not alter even if there are changes in the current viewport's width.
Lvh (Large Viewport height)
The lvw unit represents the largest visible viewport width accessible to the user. Similar to the svw unit, the value of lvw remains constant and does not undergo changes, even if there are adjustments in the current viewport's width.
In conclusion, mastering viewport units is pivotal for crafting responsive and adaptable designs in front-end development. The challenges posed by the standard vh unit find effective solutions in the form of dynamic alternatives like dvh, which dynamically adjusts to the complete viewport height, and layout-focused units like lvh. Additionally, the consideration of safe areas with svh ensures that essential content remains visible across diverse devices.
As you navigate the ever-evolving landscape of web development, experimenting with these units and understanding their nuances will empower you to create more user-friendly and consistent experiences. Whether you opt for the dynamic responsiveness of dvh, the layout stability of lvh, or the safety assurances of svh, incorporating these units into your toolkit enhances your ability to deliver seamless designs across various browsers and devices.
Stay curious, stay adaptive, and keep pushing the boundaries of what's possible in the realm of front-end development. Happy coding!