“svh in CSS: The Basics You Should Know”

svh in CSS: The Basics You Should Know

The svh unit in CSS represents “small viewport height”. It’s part of the viewport-relative length units, a powerful set of tools for creating truly responsive designs that adapt to the user’s browser environment. While seemingly simple, svh (and its related units lvh and dvh) address a crucial problem in web development, especially on mobile devices: the dynamic nature of the browser UI. This article will break down svh, explaining its purpose, how it differs from other viewport units, and when (and when not) to use it.

The Problem with vh (Viewport Height)

Before svh and its companions, developers primarily used vh (viewport height) for sizing elements relative to the visible browser window. 100vh represents 100% of the viewport height, 50vh represents 50%, and so on. This works beautifully… until you consider mobile browsers.

On mobile devices, the browser’s address bar and navigation controls (toolbars) often appear and disappear as the user scrolls. These dynamic UI elements change the actual visible viewport height. 100vh, in these scenarios, typically represents the viewport height without the browser UI present. This leads to the infamous “100vh problem”: elements sized with 100vh often extend beneath the browser’s bottom toolbar, making the bottom portion of the element inaccessible. The content is there, but you can’t scroll to it because the browser thinks it’s already fully visible.

Enter svh, lvh, and dvh

To solve this, CSS introduced three new viewport height units:

• svh (Small Viewport Height): This represents the smallest possible viewport height, assuming the browser’s dynamic UI elements (address bar, toolbars) are fully visible. Using 100svh guarantees that your content will always be visible, even when the address bar and toolbars are present. It’s the safest option for ensuring content doesn’t get hidden.

• lvh (Large Viewport Height): This represents the largest possible viewport height, assuming the browser’s dynamic UI elements are fully hidden. 100lvh is essentially equivalent to the traditional 100vh in most cases.

• dvh (Dynamic Viewport Height): This represents the current viewport height, dynamically updating as the browser’s UI elements appear and disappear. Using 100dvh means your element will resize as the user scrolls and the toolbars retract or expand.

Key Differences and When to Use Each

Here’s a table summarizing the differences and best use cases:

| Unit | Represents | Use Case |
|———|————————————————————–|——————————————————————————–|
| vh | Viewport height (usually without UI) | Desktop designs where the viewport size is generally stable. |
| svh | Smallest viewport height (UI visible) | Ensuring content is always visible, especially footers and bottom-aligned UI. |
| lvh | Largest viewport height (UI hidden) | Situations where you want the full viewport height, but vh behavior is okay. |
| dvh | Dynamic viewport height (UI changes) | Full-screen sections that should resize fluidly with the changing viewport. |
| svw | Smallest viewport width (UI visible) | similar to svh, except uses width |
| lvw | Largest viewport width (UI hidden) | similar to lvh, except uses width |
| dvw | Dynamic viewport width (UI changes) | similar to dvh, except uses width |

Example:

Let’s say you want a footer to always be visible at the bottom of the screen, even when the browser’s address bar is showing. Using svh is the perfect solution:

css
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 10svh; /* Adjust the height as needed */
background-color: #333;
color: white;
}

This footer will have a height of 10% of the smallest viewport height, ensuring it remains visible above the bottom toolbar. If you used 10vh instead, the footer might be partially or completely hidden.

For a full-screen hero section that should adapt to the changing viewport size, dvh would be appropriate:

css
.hero {
width: 100%;
height: 100dvh;
background-image: url('hero-image.jpg');
background-size: cover;
}

This hero section will dynamically resize as the user scrolls and the browser UI changes.

Browser Support

svh, lvh, and dvh are relatively new additions to CSS, but they have excellent browser support across all modern browsers (Chrome, Firefox, Safari, Edge). You can check the current support status on caniuse.com.

Important Considerations:

• Overuse: Don’t use svh, lvh, or dvh for everything. Use them strategically where the dynamic viewport height is a genuine concern. For most layout elements, traditional units like vh, em, rem, or percentages are still perfectly suitable.
• Testing: Thoroughly test your designs on various mobile devices and browsers to ensure the intended behavior. Browser developer tools are invaluable for simulating different viewport sizes and UI states.
• Logical Viewport Units: There also exist svi, lvi, dvi and svb, lvb, dvb which represent inline and block sizes respectively, instead of width and height.
• Fallback for older browsers: Use @supports to provide a fallback for browsers that do not support the new units.

“`css
.element {
height: 100vh; / Fallback for older browsers /
}

@supports (height: 100svh) {
.element {
height: 100svh; / Use svh if supported /
}
}

“`

Conclusion

svh (and its companions lvh and dvh) are essential tools for building truly responsive websites that gracefully handle the dynamic nature of mobile browser UI. Understanding their differences and appropriate use cases allows you to create layouts that are consistently visible and user-friendly, regardless of the browser’s toolbar state. By strategically using svh to ensure critical content remains accessible, you can significantly improve the mobile user experience.