DEV Community

Pratham Srivastava
Pratham Srivastava

Posted on

🌟 Latest CSS Features in 2024-2025: What's New and Exciting?

#webdev #css #programming

CSS is evolving faster than ever, and browser vendors are catching up quickly. If you're a frontend developer, staying updated on the latest CSS features can dramatically improve your workflow, reduce JavaScript overhead, and enable cleaner, more maintainable code.

This post covers the most recent and upcoming CSS features supported by modern browsers in 2024 and beyond.

1. :has() - The Parent Selector ✅

Status: Supported in all major browsers (Chrome, Firefox, Safari, Edge)

article:has(h2) {
  border-left: 4px solid #3b82f6;
}
Enter fullscreen mode Exit fullscreen mode

This long-awaited parent selector allows styling a parent based on its child. Think of it as bringing reactive logic directly into CSS!

Use cases:

  • Add styles to a card if it contains an image
  • Highlight forms that contain invalid fields
  • Conditionally show elements

2. @scope - Scoped Styling (Experimental) 🚀

Status: Supported in Chrome and Safari (behind flags in others)

@scope (.card) {
  h2 {
    color: teal;
  }
}
Enter fullscreen mode Exit fullscreen mode

@scope allows you to scope a set of styles to a part of the DOM. Think of it like :is() + :where() but localized and smarter.

Use cases:

  • Write modular, reusable components without style leakage
  • Eliminate need for heavy BEM naming

3. CSS Nesting ✅

Status: Supported in Chrome, Safari, Firefox, and Edge

.card {
  color: black;

  &:hover {
    color: blue;
  }
}
Enter fullscreen mode Exit fullscreen mode

Now you can write cleaner, more readable styles without using a preprocessor like Sass.

Benefits:

  • Cleaner scoping
  • Easier maintenance
  • Better structure for components

4. color-mix() and relative-color() 🚀

Status: Supported in Chrome and Safari (partial support in Firefox)

color: color-mix(in srgb, red 50%, white);
Enter fullscreen mode Exit fullscreen mode

Mix colors directly in CSS!

--primary: #3b82f6;
--light: relative-color(--primary lightness + 30%);
Enter fullscreen mode Exit fullscreen mode

Define derived colors based on another.

5. Container Queries ✅

Status: Supported in all major browsers

@container (min-width: 500px) {
  .card {
    flex-direction: row;
  }
}
Enter fullscreen mode Exit fullscreen mode

CSS can now respond to element size, not just the viewport. This is a game-changer for component-based design.

Use cases:

  • Adaptive cards
  • Responsive sidebars
  • Grid layouts that adapt inside other containers

6. View Transitions API (CSS + JS) 🚀

Status: Supported in Chromium browsers (Safari & Firefox partial)

::view-transition-old(root),
::view-transition-new(root) {
  animation: fade 0.4s;
}
Enter fullscreen mode Exit fullscreen mode

Paired with JavaScript's startViewTransition(), you can now add seamless page transitions natively.

7. Anchor Positioning 🌌

Status: Partially supported (behind flags in some browsers)

.my-tooltip {
  position: anchor;
  anchor-name: --target;
  top: anchor(top);
  left: anchor(center);
}
Enter fullscreen mode Exit fullscreen mode

CSS-based positioning that dynamically adapts to the layout and scroll state. Think tooltips, popovers, dropdowns — without JS hacks.

8. accent-color ✅

Status: Fully supported

input[type="checkbox"] {
  accent-color: #3b82f6;
}
Enter fullscreen mode Exit fullscreen mode

Customize checkboxes, radio buttons, and range sliders without heavy styling or JavaScript.

9. :nth-child(An+B of S) Advanced Selectors ✅

Status: Supported in most modern browsers

li:nth-child(2n of .highlight) {
  background: yellow;
}
Enter fullscreen mode Exit fullscreen mode

Filter based on subset of siblings — great for selective styling without adding classes manually.

10. Logical Properties ✅ 

padding-inline: 1rem;
padding-block: 2rem;
Enter fullscreen mode Exit fullscreen mode

Instead of padding-left/padding-right, use logical properties for better support in right-to-left (RTL) layouts and accessibility.

Summary Table

Feature Support Status Description
:has() ✅ Full Parent selector
@scope 🚧 Experimental Scoped styles
Nesting ✅ Full Sass-like nesting in native CSS
color-mix() ✅ Partial Mix colors in CSS
Container Queries ✅ Full Style based on container size
View Transitions API ✅ Chromium Native page transition animations
Anchor Positioning 🚧 Partial Position based on DOM anchors
accent-color ✅ Full Custom form control colors
nth-child of S ✅ Most Browsers More powerful structural pseudo-class
Logical Properties ✅ Full Direction-aware spacing & layout

Final Thoughts

These CSS features are reducing our reliance on JavaScript and giving us new superpowers as frontend developers. If you haven’t yet experimented with container queries, view transitions, or :has(), now is the time to do it!

Stay modern, write less code, and build cleaner UI!

Top comments (0)