10 CSS Features That Replace JavaScript — No Libraries, No Build Step
Introduction
CSS can now do things that used to need JavaScript libraries, build tools, or hundreds of lines of manual DOM code. Most of these features shipped in the last 2-3 years — but a lot of developers haven’t caught up yet.
I built 10 interactive demos to show what’s possible. Every one runs in a live code editor — edit the code and see results instantly. No signup, no install, no “create an account to continue.”
I built BigDevSoon, including the code editor these demos run in. The CSS is real and works in any modern browser — every demo is editable so you can verify for yourself.
1. Scroll Progress Bar — No JavaScript
A reading progress bar that tracks scroll position using animation-timeline: scroll(). No event listeners, no requestAnimationFrame.
What it replaces: A scroll event listener, requestAnimationFrame, manual percentage calculation, and DOM manipulation. Now it’s 6 lines of CSS.
Browser support: Chrome 115+ (Jul 2023), Edge 115+, Safari 18+ (Sep 2024). Firefox: behind flag.
2. Scroll Reveal Animations — No JavaScript
Cards fade in and slide up as they enter the viewport. The animation is triggered by the element’s position using animation-timeline: view().
What it replaces: AOS.js (14KB), GSAP ScrollTrigger, or a custom IntersectionObserver setup with callback functions and CSS class toggling. Zero bytes of JavaScript now.
Browser support: Chrome 115+ (Jul 2023), Edge 115+, Safari 18+ (Sep 2024). Firefox: behind flag.
3. Anchor-Positioned Popovers — No JavaScript
Popovers that position themselves relative to their trigger button using CSS anchor-name and anchor() functions. They even animate in with @starting-style.
What it replaces: Popper.js (8KB), Floating UI, or manual getBoundingClientRect() calculations — 200+ lines of JavaScript condensed into 4 lines of CSS.
Browser support: Chrome 125+ (May 2024), Edge 125+, Safari 18+ (Sep 2024). Firefox: behind flag.
4. Form Validation Styles with :has()
The form border, label colors, and submit button state all react to input validity in real time. The :has() parent selector checks the state of child inputs and styles the entire form accordingly.
What it replaces: input event listeners on every field, validity state checking, and classList.add/remove to toggle visual states. Now the CSS handles it declaratively.
Browser support: Chrome 105+ (Aug 2022), Safari 15.4+ (Mar 2022), Firefox 121+ (Dec 2023). Fully cross-browser.
5. Container Queries — Component-Level Responsive
The same card component switches from vertical to horizontal layout based on its container width — not the viewport. This is true component-level responsive design.
What it replaces: Media queries could only check the viewport width. For component-level responsiveness, you needed ResizeObserver in JavaScript. Container queries solve this natively.
Browser support: Chrome 105+ (Aug 2022), Safari 16+ (Sep 2022), Firefox 110+ (Feb 2023). Fully cross-browser.
6. Animated Accordion — No JavaScript
Smooth open/close animations on native <details> elements using interpolate-size: allow-keywords. The browser can now animate between height: 0 and height: auto.
What it replaces: Measuring scrollHeight with JavaScript, then animating to a pixel value with requestAnimationFrame. Or reaching for Headless UI, Radix Accordion, or React Collapse.
Browser support: Chrome 129+ (Sep 2024), Edge 129+. Safari and Firefox: not yet supported. Progressive enhancement — the accordion still works, just without animation.
7. Native CSS Nesting — Drop Your Preprocessor
Write Sass-like nested rules directly in CSS. The & selector works exactly like you’d expect — child selectors, pseudo-classes, modifier classes, all nested inside one block.
What it replaces: Sass/SCSS preprocessor, a build step, and node-sass or dart-sass as a dependency. If you only used Sass for nesting, you can now delete the dependency entirely.
Browser support: Chrome 112+ (Apr 2023), Safari 16.5+ (May 2023), Firefox 117+ (Aug 2023). Fully cross-browser.
8. Dynamic Color Palette with color-mix()
Derive an entire color system from a single base color. color-mix() mixes colors in the perceptually uniform OKLCH space — lighter, darker, and transparent variants all from one --brand variable.
What it replaces: Sass color functions (lighten(), darken(), mix()), JavaScript color manipulation libraries, or manually hardcoding every shade in your design tokens.
Browser support: Chrome 111+ (Mar 2023), Safari 16.2+ (Dec 2022), Firefox 113+ (May 2023). Fully cross-browser.
9. View Transitions — State Morphing
Toggle between grid and list layout with a smooth morph animation. JavaScript only toggles a class — the animation is entirely CSS via view-transition-name and ::view-transition-group.
What it replaces: FLIP animation technique (First, Last, Invert, Play), React Transition Group, Framer Motion, or any JavaScript that calculates element positions before and after a state change.
Browser support: Chrome 111+ (Mar 2023), Safari 18+ (Sep 2024), Firefox 144+ (Oct 2025). Cross-browser since late 2025.
10. Entry Animations from display: none
Animate elements into view from display: none using @starting-style. Dialogs fade and scale in, toggle cards slide up — all with CSS transitions, no JavaScript timing hacks.
What it replaces: The classic setTimeout(0) or “double requestAnimationFrame” hack — set display: block, wait a frame, then add the animation class. @starting-style makes this native.
Browser support: Chrome 117+ (Sep 2023), Safari 17.5+ (May 2024), Firefox 129+ (Aug 2024). Fully cross-browser.
Try the Editor
Every demo in this article runs in BigDevSoon’s free code editor. It supports HTML, CSS, JavaScript, React, Vue, TypeScript, SCSS, and npm packages — all in the browser. No signup required.
If you found this useful, I’d love to know which demo surprised you the most.
Practice what you just learned in our browser editor with AI assistance.
Try Demo Editor
Creator of BigDevSoon
Full-stack developer and educator passionate about helping developers build real-world skills through hands-on projects. Creator of BigDevSoon, a vibe coding platform with 21 projects, 100 coding challenges, 40+ practice problems, and Merlin AI.
