CSS · 1 min read · April 28, 2026
10 modern CSS tricks to know in 2026
1. Fluid typography with clamp()
font-size: clamp(1rem, 0.5rem + 2vw, 2.5rem);
A size that adapts to the screen with no media query. Our clamp generator computes the ideal value for you.
2. The parent selector :has()
.card:has(img) { padding-top: 0; }
Finally a “parent selector”: style an element based on what it contains.
3. Container queries
@container (min-width: 400px) { .card { display: flex; } }
Adapt a component to its container’s size, not just the screen.
4. aspect-ratio
.video { aspect-ratio: 16 / 9; }
5. gap for Flexbox
.row { display: flex; gap: 1rem; }
No more hacked margins between items.
6. inset
position: absolute; inset: 0;
7. accent-color
input[type="checkbox"] { accent-color: #2563eb; }
8. min() / max()
width: min(100%, 1200px);
9. Native dark mode
@media (prefers-color-scheme: dark) { :root { --bg: #0f172a; } }
10. Respect prefers-reduced-motion
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}
Put them into practice
Explore our CSS generators to apply these techniques effortlessly, from Flexbox to Grid.