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.

From the discussion

The discussion questions the practical value of tracking granular browser API updates, arguing the knowledge is too fragmented to retain and will simply be offloaded to AI or search engines. A competing strain declares front-end development itself obsolete, pointing to the silence around the once-common 'front-end is dead' meme as proof the field has actually expired, with a blunt call to pivot to AI instead.

— Granular, scattered API knowledge is unlikely to be remembered and will be delegated to AI tools or search when needed.

— Front-end development is effectively dead, evidenced by the disappearance of the 'front-end is dead' discourse itself.

— Developers should abandon front-end entirely and transition to AI.

Featured comments

gyt95

Learning front-end fundamentals is fine, but a lot of the knowledge points in the article are small and scattered. When you actually need to use them, you probably won't remember them (maybe you'll forget them the week after the article is written). You'll either ask AI or search for them.

青椒肉丝盖浇饭

Front-end is already dead. Look, nobody even says 'front-end is dead' anymore. Why? Because it's really dead, so nobody mentions it...

朝暮_

Stop learning front-end, switch to AI.

See top comments, translated →

Source: juejin.cn ↗ Google Translate ↗ Backup ↗