Frontend

26 Weeks of Front-End: New CSS, JS, and HTML APIs That Shipped in H1 2026

By 张鑫旭 · Jul 24, 2026

Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Browser vendors shipped a wave of new primitives in early 2026 that replace JavaScript-heavy workarounds with declarative HTML and CSS. Knowing which ones are ready and which are Chrome-only or broken in practice saves teams from adopting features that look good in a spec but fail in production.

Summary

Over the first half of 2026, one front-end developer tracked a new browser capability every week. The log covers CSS additions like `text-decoration-inset`, `text-box`, `corner-shape`, `caret-shape`, `border-shape`, and the `contrast-color()` function. JavaScript entries include `Promise.try()`, `Promise.withResolvers()`, `moveBefore`, the sticky regex `y` flag, `WeakRef`, `JSON.rawJSON`, and the `focusVisible` option on `focus()`. HTML gains such as the `interestfor` attribute for hover-triggered popovers, the `closedBy` attribute on `<dialog>`, and the `command`/`commandfor` pairing with `ToggleEvent` also appear.

Each entry is a short, practical report: what the API does, a code snippet, a compatibility note, and a link to a longer article with a live demo. Several items push back on initial assumptions. The `text-box` property, for instance, failed to solve inline vertical alignment in practice, and `WeakRef` comes with a strong caution against casual use despite its memory-optimization appeal.

The series ends by linking to a companion piece arguing that foundational knowledge still matters even when AI writes most of the code, because understanding the platform determines whether the output is correct.

Takeaways

— `CSSStyleSheet()` with `adoptedStyleSheets` allows programmatic, fine-grained CSS rule insertion and deletion without string parsing.

— `moveBefore` moves a DOM node without destroying and recreating it, preserving animation, iframe, and interaction state; it also skips `disconnectedCallback`/`connectedCallback` when `connectedMoveCallback` is defined.

— `Promise.try()` catches errors from both sync and async functions in one call, covering gaps that `try...catch` leaves around `setTimeout` and internal Promise rejections.

— `Promise.withResolvers()` returns a Promise along with its `resolve` and `reject` functions in a single destructured object, decoupling creation from control.

— The sticky regex flag `y` anchors each match exactly at `lastIndex`, making it suitable for tokenizing structured text without manual position tracking.

— `JSON.rawJSON` preserves large integers beyond 2^53 during serialization and allows precise control over the output format of JSON strings.

— `interestfor` enables native hover-triggered popovers on any element, with `:interest-source` and `:interest-target` pseudo-classes for styling active states.

— `<dialog closedby="any">` lets a modal close on backdrop click without JavaScript; Chrome and Firefox support it, and a polyfill exists.

— `contrast-color()` returns white or black based on WCAG contrast against a given background, supported across all major browsers.

— `border-shape` accepts a `shape()` function to draw arbitrary border geometries, but only Chrome supports it; `clip-path` with `drop-shadow()` approximates it elsewhere.

— `color-scheme` plus `light-dark()` enables per-application dark mode without relying on the system-level `prefers-color-scheme` media query.

— `text-box` trims half-leading above and below text but does not solve vertical alignment of inline elements in practice.

— `caret-shape` controls the text cursor's shape and blink behavior; `focus({ focusVisible: true/false })` controls whether the focus ring appears on programmatic focus.

— `text-align: match-parent` resolves the computed `left` or `right` value when a parent uses logical values like `end`, which depend on `direction`.

— WebTransport addresses WebSocket limitations—head-of-line blocking, single-stream, and network-switch disconnects—for real-time gaming and live streaming.

Conclusions

Several CSS properties that sound like they solve classic pain points—`text-box` for vertical centering, `prefers-color-scheme` for dark mode—turn out to be insufficient or misaligned with real application needs once tested.

The `moveBefore` API is a quiet but significant shift for Web Components: it acknowledges that DOM move semantics matter for stateful components and introduces a new lifecycle hook to match.

`WeakRef` is officially discouraged for general use because garbage-collection timing is non-deterministic; the spec provides it for caches and other niche cases where stale data is acceptable.

`JSON.rawJSON` solves a real problem—large-ID precision loss—that has forced teams into string-based workarounds for years, yet it remains largely unknown.

The `interestfor` + `command`/`commandfor` pattern signals a broader HTML trend: interactivity that previously required JavaScript is moving into declarative attributes, reducing framework dependency for common UI patterns.

Concepts & terms

CSSStyleSheet

A constructor that creates a standalone CSS stylesheet object in JavaScript, allowing rule-level manipulation via methods like `replaceSync()` and insertion through `document.adoptedStyleSheets`.

moveBefore

A DOM API that moves an existing node to a new parent before a reference child without removing and reinserting it, preserving state such as animations, iframe content, and event listeners.

Promise.withResolvers()

An ES2024 static method that returns an object containing a new Promise and its `resolve`/`reject` functions, eliminating the pattern of declaring variables outside a Promise constructor.

Sticky regex flag (y)

A regex flag that requires a match to start exactly at `lastIndex`; unlike the global flag, it does not scan forward, making it useful for incremental parsing of structured input.

JSON.rawJSON

A method that creates a special object which, when passed to `JSON.stringify`, is inserted as a raw JSON literal, preserving large integers and allowing precise control over serialized structure.

interestfor

An HTML attribute that associates a trigger element with a target element for hover-initiated popover or disclosure interactions, paired with `:interest-source` and `:interest-target` CSS pseudo-classes.

closedBy

An attribute on the `<dialog>` element that controls which user actions close the dialog; a value of `any` allows closing by clicking the backdrop overlay.

contrast-color()

A CSS function that accepts a background color and automatically returns either white or black as the foreground color, based on which provides sufficient WCAG contrast.

border-shape

A CSS property that accepts a `shape()` function to define an arbitrary border geometry, enabling non-rectangular borders with proper box-shadow and background clipping.

light-dark()

A CSS function that takes two color or image values and returns the first in light mode and the second in dark mode, based on the `color-scheme` property rather than a media query.

WeakRef

A JavaScript object that holds a weak reference to another object, allowing it to be garbage-collected; the reference can be dereferenced with `.deref()`, which may return `undefined` if collection occurred.

WebTransport

A web API built on HTTP/3 and QUIC that provides bidirectional, multiplexed communication with no head-of-line blocking, designed as a lower-latency successor to WebSocket for real-time applications.

Source: juejin.cn ↗ Google Translate ↗ Backup ↗