LabHub

Blog

The Web Platform in 2025 — Complete Guide: Container Queries, :has(), CSS Nesting, Subgrid, Popover API, Anchor Positioning, WebGPU, WASI, Speculation Rules, and Baseline 2024-2025 — Season 6 Ep 5

2026-04-15 · 12 min read · #web-platform#container-queries#has-selector#css-nesting#css-subgrid#popover-api#anchor-positioning#webgpu#webassembly#wasi#speculation-rules#baseline#web-components

한국어English日本語中文

Prologue · When the Platform Grows, the Framework Gets Lighter

Between 2014 and 2020, the reason we needed React, Vue, and Angular was that browsers fell so far short. Components, state management, animation, routing, layout, interaction — all of it had to be solved in JS.

2024-2025 is different. The browser does most of it.

We still use Next.js and React, but "whatever the platform can carry, give to the platform" is the principle of 2025. This post is the map for that.

Chapter 1 · Baseline — The New Language of Compatibility

What Is Baseline?

A labeling system for browser feature compatibility, created by the Web DX Community Group in 2023-2024. It answers the question, "Is this feature safe to use right now?"

Three Levels

Baseline Newly available

Baseline Widely available

Limited availability

Using It in Practice

Why It Matters

Chapter 2 · Container Queries — The Responsive Revolution

The Traditional Problem

The media query @media is measured against the whole viewport. But when the same card component sits in a sidebar sometimes and in the main column at other times, its size differs. Even at the same viewport.

The Fix: @container

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

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

Now the card layout is decided by the card grid's own width.

Units

Support in 2025

Usage Patterns

(1) Self-responsive components

(2) Style Queries (2024, Chrome/Edge)

(3) Viewport plus container together

Chapter 3 · :has() — The Arrival of the Parent Selector

Why It Is a Revolution

CSS has always been a selector that flowed only downward. Styling a parent based on its children required JS. :has() removes that limit.

Examples

(1) Styling a parent by whether a child exists

.card:has(img) { padding-top: 0; }
.form:has(input:invalid) { border: 1px solid red; }

(2) Styling everything by the state of a child

body:has(dialog[open]) { overflow: hidden; }

(3) Sibling relationships

label:has(+ input:focus) { color: blue; }

Support

Real-World Impact

Chapter 4 · Native CSS Nesting

Until Now

Native Nesting in 2023-2024

.card {
  padding: 1rem;

  & .title {
    font-size: 1.5rem;
  }

  &:hover {
    background: #f0f0f0;

    & .title { color: #333; }
  }

  @media (min-width: 768px) {
    padding: 2rem;
  }
}

Watch Out

Support

What It Means

Chapter 5 · CSS Subgrid

The Limits of Traditional Grid

Subgrid Solves It

.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.child {
  display: grid;
  grid-template-columns: subgrid; /* inherit the parent grid */
}

Now the child grid snaps to the parent grid's tracks.

Use Cases

Support

Chapter 6 · Popover API and the Dialog Element

Problems With Traditional Modals

<dialog> (HTML5)

The Popover API (2024-2025)

<button popovertarget="menu">Menu</button>
<div id="menu" popover>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>

Support

Practical Impact

Chapter 7 · CSS Anchor Positioning

The Problem: Floating UI

Placing a tooltip, dropdown, or popover exactly relative to a given element is complicated.

The Fix: CSS Anchor Positioning (2024-)

<button id="btn">Click</button>
<div popover style="position-anchor: --btn;">
  Tooltip
</div>

#btn { anchor-name: --btn; }

[popover] {
  position: absolute;
  top: anchor(--btn bottom);
  left: anchor(--btn left);
}

Support (April 2025)

Impact

Chapter 8 · Web Components — Where They Stand in 2025

The Three Basics

Maturing Through 2024-2025

(1) Declarative Shadow DOM

(2) Form-associated Custom Elements

(3) The CSS :state() pseudo-class

Framework Integration

An Honest Assessment

Strengths

Limits

Where They Fit

Chapter 9 · Where WebGPU Stands

The Limits of WebGL

WebGPU (2023-)

Major Uses in 2024-2025

(1) Running AI/ML in the browser

(2) High-performance graphics

(3) Data visualization

Support

Limits

Chapter 10 · File System Access API and Other Local Capabilities

File System Access API

Major New APIs in 2024-2025

(1) An upgraded Clipboard API

(2) Web Share API

(3) Wake Lock API

(4) Screen Capture and WebCodecs

(5) Compression Streams

(6) Web Locks

Limits

Chapter 11 · WebAssembly and WASI in 2025

Where WASM Is Now

WASI (WebAssembly System Interface)

The standard for running WASM outside the browser and on the server.

Real-World Uses

(1) Serverless edge

(2) Plugin systems

(3) Heavy computation inside the browser

Adoption in Korea

Chapter 12 · Speculation Rules API

The Goal

Example

<script type="speculationrules">
{
  "prerender": [
    { "source": "list",
      "urls": ["/next-page", "/likely-next"] }
  ],
  "prefetch": [
    { "source": "document",
      "where": { "href_matches": "/articles/*" } }
  ]
}
</script>

Modes

Status in 2024-2025

Real-World Use

Watch Out

Chapter 13 · In Practice · The "Platform First" Checklist

Check this before reaching for a framework or library when you build a new component or feature.

Checklist Items

Order of Judgment

  1. Does the web platform have this built in?
  2. Is it Baseline Widely supported?
  3. If not, can a lightweight library replace it?
  4. If you still need it, then a framework component

Chapter 14 · Next Up — Season 6 Ep 6: "Performance and Core Web Vitals 2025"

Using web platform features well is using performance well. Ep 6 covers Core Web Vitals and performance overall.

"Performance is not a feature. It is the condition of every feature."

See you in the next post.

Epilogue · A 12-Point Checklist

  1. Do you decide feature usage on the Baseline Widely standard?
  2. When you need responsiveness, do you consider Container Queries first?
  3. Do you use :has() for parent-based styling?
  4. Is your CSS managed with Nesting rather than a build tool?
  5. Do you use Subgrid for complex layouts?
  6. Do you build modals and popovers with native APIs?
  7. Do you position tooltips and dropdowns with Anchor Positioning?
  8. Do you use Web Components for shared libraries?
  9. Are you exploring the opportunities in WebGPU (AI, visualization)?
  10. When you need local capabilities (files, system), does a Platform API come first?
  11. Have you evaluated prefetch and prerender via Speculation Rules?
  12. Do you apply the "platform first" checklist to every new component?

"A good engineer knows what the platform can do. A great engineer knows when to hand work to the platform and when to build it."

— Season 6 Ep 5, Fin.

Read the original: https://www.youngju.dev/blog/culture/2026-04-15-web-platform-2025-complete-guide-container-queries-has-selector-nesting-subgrid-popover-anchor-positioning-webgpu-wasi-speculation-rules-baseline-deep-dive-guide-2025.en

Comments

No comments yet.

Sign in to leave a comment