Modern CSS is evolving at an incredible pace. Tasks that previously
required heavy libraries or complex JavaScript scripts are now becoming
native parts of the browser engine. This not only simplifies code but
also makes websites faster by moving animations and calculations to the
compositor thread.
Originally, it was someone's picture on LinkedIn, which I couldn't find afterwards. If you are the author, plz contact me, I will add a link to the original LinkedIn post and mention the author 🙏
1. Scroll-Driven Animations
Detailed Use Case: Beyond a simple progress bar, this is essential
for parallax effects, fading in elements as they enter the viewport, or
shrinking a navigation header as the user scrolls down. By using the
browser's native scroll timeline, we avoid the "scroll lag" often
caused by JS execution during heavy painting operations.
HTML Structure
<div class="progress-container">
<div id="myBar" class="progress-bar"></div>
</div>
<article class="content">
<h1>The Future of CSS</h1>
<p>Scroll down to see the progress bar in action...</p>
</article>
How it was before (JavaScript)
window.addEventListener('scroll', () => {
const winScroll = document.documentElement.scrollTop;
const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
const scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
});
How it is now (CSS)
@keyframes grow-progress {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
.progress-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: #4caf50;
transform-origin: 0 50%;
animation: grow-progress auto linear;
animation-timeline: scroll(root);
}
2. The :has() Selector
Detailed Use Case: This is powerful for complex UI states like
"smart forms" or "interactive grids." For example, you can highlight
an entire form fieldset if it contains an invalid input, or change the
layout of a gallery if it contains more than five images---all without a
single line of state management logic in JS.
HTML Structure
<div class="card-grid">
<div class="card">
<h3>Product A</h3>
<button class="btn">Buy Now</button>
</div>
<div class="card">
<h3>Product B</h3>
<button class="btn">Buy Now</button>
</div>
</div>
How it was before (JavaScript)
const cards = document.querySelectorAll('.card');
cards.forEach(card => {
const btn = card.querySelector('.btn');
btn.addEventListener('mousedown', () => card.classList.add('active'));
btn.addEventListener('mouseup', () => card.classList.remove('active'));
});
How it is now (CSS)
.card {
padding: 20px;
border: 1px solid #ccc;
transition: all 0.3s;
}
/* Style the parent card when the inner button is active */
.card:has(.btn:active) {
border-color: #007bff;
background-color: #f0f7ff;
transform: scale(1.05);
}
3. Container Queries
Detailed Use Case: Essential for building truly modular design
systems. Instead of writing media queries for every page layout (sidebar
vs. full width), the component defines its own responsiveness. A
"Profile Card" can automatically switch from a vertical layout to a
horizontal one based purely on the width of the div it is placed in.
HTML Structure
<main class="layout">
<aside class="sidebar">
<div class="card-wrapper">
<div class="user-card">...</div>
</div>
</aside>
<section class="main-content">
<div class="card-wrapper">
<div class="user-card">...</div>
</div>
</section>
</main>
How it was before (JavaScript)
const observer = new ResizeObserver(entries => {
for (let entry of entries) {
entry.target.classList.toggle('compact', entry.contentRect.width < 350);
}
});
document.querySelectorAll('.card-wrapper').forEach(el => observer.observe(el));
How it is now (CSS)
.card-wrapper {
container-type: inline-size;
}
.user-card {
display: flex;
flex-direction: row; /* Default wide layout */
}
@container (max-width: 350px) {
.user-card {
flex-direction: column; /* Vertical layout when narrow */
text-align: center;
}
}
4. @container scroll-state
Detailed Use Case: The "Holy Grail" for sticky headers and table
of contents. It allows you to style a navigation bar specifically when
it reaches its "stuck" position. For example, adding a shadow or a
blur effect only when the header is floating over the content during
scroll.
HTML Structure
<div class="scroll-container">
<header class="sticky-nav">
<nav>Navigation Menu</nav>
</header>
<main>
<p>Scroll down to see the header change state...</p>
</main>
</div>
How it was before (JavaScript)
const header = document.querySelector('.sticky-nav');
const observer = new IntersectionObserver(
([e]) => e.target.classList.toggle('is-pinned', e.intersectionRatio < 1),
{ threshold: [1] }
);
observer.observe(header);
How it is now (CSS)
.sticky-nav {
position: sticky;
top: 0;
transition: background 0.3s;
}
@container scroll-state(stuck: top) {
.sticky-nav {
background-color: white;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
padding: 10px 20px;
}
}
Conclusion
Moving from JavaScript workarounds to native CSS functions isn't just
about "cleaner code." It's about performance. Using these
features reduces JS bundle size, eliminates unnecessary event listeners,
and ensures smooth UI even on lower-end devices. For a modern developer,
these are essential tools for 2024-2026.