DEV Community

Cover image for New Features Added to the Web Platform in May 2026
Homayoun Mohammadi
Homayoun Mohammadi

Posted on

New Features Added to the Web Platform in May 2026

#news #webdev #web #frontend

The web platform keeps evolving every month, and May 2026 introduced several surprisingly useful improvements across modern browsers.

New releases from:

  • Chrome 148
  • Firefox 151
  • Safari 26.5

brought better CSS capabilities, improved performance APIs, and new browser features that can make web apps feel more modern and efficient.

Here are some of the most interesting updates developers should know about.

1. The :open CSS pseudo-class is finally fully supported

One of the most practical CSS improvements this month is the :open pseudo-class becoming Baseline supported across major browsers.

This lets developers style elements based on whether they are open or closed.

Examples:

  • <details>
  • <dialog>
  • date pickers
  • color pickers
  • <select> dropdowns

Before this, developers often used attributes like:

details[open]
Enter fullscreen mode Exit fullscreen mode

Now we can simply use:

:open
Enter fullscreen mode Exit fullscreen mode

which is cleaner, easier to read, and more semantic.

This may look like a small change, but it improves maintainability in larger UI systems.

2. Container queries just became much easier to use

Container queries continue getting better.

Previously, developers had to define both:

  • a container name
  • and a container type

just to query a container.

Now browsers support name-only container queries.

Example:

#container {
  container-name: --sidebar;
}

@container --sidebar {
  .content {
    padding: 2rem;
  }
}
Enter fullscreen mode Exit fullscreen mode

This removes extra setup and makes responsive component-based design much simpler.

For frontend developers working with design systems, this is a very welcome improvement.

3. CSS style queries are now supported everywhere

Firefox 151 added support for style queries using custom properties.

This means developers can now apply styles depending on CSS variables defined on parent containers.

Example:

@container style(--theme: dark) {
  .card {
    background: #1a1a1a;
    color: white;
  }
}
Enter fullscreen mode Exit fullscreen mode

This opens the door for much smarter theming systems and reusable UI components.

Instead of relying heavily on JavaScript, many dynamic styling behaviors can now be handled directly in CSS.

4. Native lazy loading for video and audio

Chrome 148 introduced lazy loading support for:

  • <video>
  • <audio>

using:

loading="lazy"
Enter fullscreen mode Exit fullscreen mode

This works similarly to lazy loading images.

Media files will only load when they are close to entering the viewport.

Benefits:

  • faster page loads
  • reduced bandwidth usage
  • better performance on mobile devices

For content-heavy websites, this can make a noticeable difference.

5. Firefox now supports the Document Picture-in-Picture API

This is one of the most interesting additions this month.

Unlike traditional Picture-in-Picture that only works for videos, the Document Picture-in-Picture API allows developers to open an always-on-top floating window containing custom HTML content.

Possible use cases:

  • floating music players
  • meeting controls
  • timers
  • stock trackers
  • productivity widgets

This creates opportunities for much richer multitasking experiences on the web.

6. The Web Serial API is expanding

Firefox 151 added support for the Web Serial API on desktop, while Chrome 148 added Android support.

This API allows websites to communicate with hardware devices like:

  • microcontrollers
  • Arduino boards
  • 3D printers
  • embedded systems

The web platform continues moving beyond traditional websites and becoming more capable as an application platform.

Beta Features Worth Watching

Some exciting features also appeared in beta browser releases.

Chrome 149 Beta

Includes:

  • CSS gap decorations
  • improved shape-outside
  • Promise-based smooth scrolling APIs
  • better BFCache support for WebSockets

Firefox 152 Beta

Includes:

  • full support for field-sizing
  • improved Notifications API
  • better animation APIs

These features are not fully stable yet, but they show where modern frontend development is heading.

Final Thoughts

What makes these updates interesting is not just the number of new features.

It’s how much the web platform is improving developer experience.

Many things that previously required:

  • JavaScript workarounds
  • heavy frameworks
  • custom hacks

can now be done directly with modern CSS and native browser APIs.

The web keeps becoming more powerful, more performant, and more capable every month.

Top comments (0)