Modern CSS Features That Replaced JavaScript

For years, whenever I wanted something interactive on a webpage, my first instinct was:

“Let’s write some JavaScript.”

Need a sticky header? JavaScript.

Need a carousel? JavaScript.

Need theme switching? JavaScript.

Need responsive layouts? More JavaScript.

Then modern CSS quietly evolved.

Today, many of the things I used to solve with JavaScript can be handled with a few lines of CSS.

Here are some CSS features I use almost every day.

1. CSS Functions Changed Everything

The min(), max(), and clamp() functions eliminated a surprising amount of responsive code.

Instead of juggling media queries:

h1 {
  font-size: clamp(2rem, 5vw, 4rem);
}

The text grows with the viewport but never becomes too small or too large.

I use clamp() on almost every project now.

2. Scroll Snap = Smooth Carousels Without JavaScript

Before Scroll Snap, creating horizontal sliders meant writing drag logic or importing a library.

Now:

.slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.card {
  scroll-snap-align: start;
}

Users get a native swipe experience on touch devices with zero JavaScript.

Simple. Fast. Accessible.

3. Container Queries Finally Fixed Component Responsiveness

Media queries respond to screen size.

Container queries respond to the component’s size.

.card-container {
  container-type: inline-size;
}

@container (min-width: 500px) {
  .card {
    display: flex;
  }
}

Now components can adapt wherever they’re placed.

This completely changed how I build reusable UI.

4. () Feels Like a Parent Selector Superpower

For years, CSS couldn’t style a parent based on its children.

Now it can.

.form:has(input:invalid) {
  border-color: red;
}

No DOM manipulation.

Get Aditya Dutta’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

No event listeners.

Just CSS.

5. content-visibility for Instant Performance Wins

One of the most underrated CSS features is content-visibility.

When a page contains lots of sections, cards, or articles, the browser normally renders everything immediately.

With content-visibility, off-screen content can be skipped until it's needed.

.section {
  content-visibility: auto;
  contain-intrinsic-size: 500px;
}

This can significantly improve initial rendering performance, especially on content-heavy pages.

It’s one of those small CSS additions that can make a surprisingly big difference.

6. Aspect Ratio Replaced Resize Calculations

Maintaining image or video proportions used to require hacks.

Now:

.video {
  aspect-ratio: 16 / 9;
}

That’s it.

No wrappers.

No JavaScript.

No padding tricks.

7. Native CSS Nesting Makes Styles Easier to Maintain

I used to rely on preprocessors like Sass just to keep related styles organized.

Now CSS supports nesting natively.

.card {
  padding: 1rem;

  .title {
    font-size: 1.25rem;
  }

  &:hover {
    background: #f5f5f5;
  }
}

The styles stay grouped together and are much easier to read.

Less repetition. Cleaner CSS.

8. Smooth Scrolling Is One Line

What once required JavaScript animation libraries:

html {
  scroll-behavior: smooth;
}

Done.

Final Thoughts

Modern CSS isn’t just about styling anymore.

It’s handling responsiveness, layout logic, animations, scrolling behavior, component state, and even some interactions that previously required JavaScript.

Every year I find myself deleting more JavaScript and writing more CSS.

And honestly, that’s a trade I’ll take every time.