CSS has a reputation for being deceptively simple. You think you've got a layout nailed, and then you open it on a different device and everything looks broken. After years of developers running into the same issues over and over again, a set of "defensive" CSS techniques has emerged. Here are four that I think every developer should have locked in for 2026.
1. Dynamic Viewport Units
What are they?
Viewport units like vh and vw let you size elements relative to the browser window. 100vh means "the full height of the viewport." Sounds simple enough, right?
The pain point
On mobile browsers, the viewport height changes depending on whether the address bar is visible or not. For example, when you first load a page in Google Chrome, the address bar is fully visible, making the viewport shorter. As you scroll down, the address bar shrinks or disappears, making the viewport taller. The problem is that 100vh is calculated once based on the larger viewport, so elements sized with it end up taller than the actual visible area when the page loads. This causes content to get clipped or scroll in unexpected ways.
The fix
Use dynamic viewport units instead. The dvh unit updates in real time as the browser UI changes.
.hero {
height: 100dvh;
}
There are also svh (small viewport height, always the smallest possible viewport) and lvh (large viewport height, always the largest). For most use cases, dvh is what you want. Browser support is solid across modern browsers in 2026, so there is no real reason to keep reaching for vh for full-height layouts.
2. Hover Media Query
What is it?
The hover media query lets you check whether the user's primary input device is capable of hovering over elements. In practice, this means detecting whether someone is on a mouse-driven device or a touchscreen.
The pain point
When you write a hover style like this:
.button:hover {
background-color: blue;
}
It works great on desktop. But on mobile, touch events can trigger hover states too. This leads to buttons and links getting "stuck" in a hover state after being tapped, which looks broken and confuses users. A lot of developers just remove hover styles entirely to avoid the problem, which is a bad trade-off for desktop users.
The fix
Wrap your hover styles in a media query so they only apply on devices that actually support hovering:
@media (hover: hover) {
.button:hover {
background-color: blue;
}
}
This way, desktop users get the nice interactive feedback they expect, and mobile users never see a stuck hover state. It is a small change that makes a big difference in how polished your UI feels across devices.
3. Overflow Wrap
What is it?
overflow-wrap is a CSS property that controls whether the browser is allowed to break a word mid-character to prevent it from overflowing its container.
The pain point
You design a card component that looks perfect with your placeholder text. Then a real user submits content with a long URL, a technical term, or just a really long word with no spaces. Suddenly that text blows right out of its container and overlaps other elements or gets clipped. This is especially common in comment sections, blog posts, user profiles, and any place where you are displaying content you did not write yourself.
The fix
Add this to your base styles or to any element that will display dynamic text:
p, h1, h2, h3, h4, h5, h6, li, a {
overflow-wrap: break-word;
}
This tells the browser that if a word absolutely cannot fit on a line without overflowing, it is allowed to break it. You can also use word-break: break-word but overflow-wrap is the more precise and modern approach. It only kicks in when necessary, so your normal text still looks clean.
4. Flex Wrap
What is it?
Flexbox is one of the most used layout tools in CSS. By default, flex items try to fit onto a single line, shrinking as needed to stay there.
The pain point
That default behavior is the problem. When the container gets too narrow, flex items do not wrap onto a new line, they just keep shrinking or overflow entirely. This is a really common source of broken layouts on smaller screens. A navigation bar that looks fine on desktop becomes a squished mess on mobile. A row of cards collapses into barely-readable slivers instead of stacking nicely.
The fix
Add flex-wrap: wrap to your flex containers:
.card-row {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
Now when there is not enough space, items wrap to the next line instead of overflowing or shrinking indefinitely. Pair this with a min-width on your flex children and you have a simple, responsive layout without needing a single media query.
.card {
flex: 1 1 300px;
}
This tells each card to grow and shrink as needed but never go below 300px wide. When the container is too narrow for two 300px cards, they wrap automatically.
Wrapping Up
None of these are complicated changes. They are small, defensive habits that prevent a whole category of layout bugs before they happen. If you are not already using dvh, wrapping hover styles, protecting your text with overflow-wrap, and adding flex-wrap to your flex containers, start now. Your future self will thank you the next time you open your site on a phone and everything actually looks right.