# Progressive enhancement · Tech watch

[Canonical source](<https://sebastien.rigaux.be/en/tech-watch/tags/progressive-enhancement>)

Building a functional baseline enhanced according to available browser capabilities.

## [Modern Web Guidance brings current web practices to coding agents](<https://sebastien.rigaux.be/en/tech-watch/links/modern-web-guidance-brings-current-web-practices-to-coding-agents>)

Modern Web Guidance gives coding agents expert guidance on browser APIs, CSS, performance, and accessibility, steering them toward native solutions instead of legacy patterns. The repository brings together 232 features and 186 use cases as skills installable in multiple agents.

Its CLI searches locally for a guide and adds it to the agent’s context. The guidance incorporates Baseline compatibility data, targeted fallbacks, and automated evaluation; the project is marked as a preview release.

2026-11-01 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/modern-web-guidance-brings-current-web-practices-to-coding-agents.md>) · [Original resource](<https://github.com/GoogleChrome/modern-web-guidance>)

## [React: preserve progressive enhancement with Server Actions](<https://sebastien.rigaux.be/en/tech-watch/links/react-preserve-progressive-enhancement-with-server-actions>)

React combines `<form action>`, `useActionState`, and `useOptimistic` to handle pending feedback and optimistic updates while keeping form submission available before JavaScript runs. The article shows how this continuity can enhance the interface after hydration without giving up the browser’s native form behavior.

The key is to keep the server action directly in `action`: inserting a client function breaks submission without JavaScript. For optimistic updates, `useHydrated()` lets the form choose between the server action and its client-enhanced version.

2026-11-01 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/react-preserve-progressive-enhancement-with-server-actions.md>) · [Original resource](<https://ebey.dev/blog/3myyseusgd22h>)

## [Interop 2027: ten CSS proposals, from accessibility to animation](<https://sebastien.rigaux.be/en/tech-watch/links/interop-2027-ten-css-proposals-from-accessibility-to-animation>)

Josh W. Comeau reviews ten proposals being considered for Interop 2027: CSS functions, custom border shapes, anchor- and scroll-related queries, reading order, intrinsic-size animations, and grid decorations. Several address practical problems: `reading-flow` could align keyboard navigation with a responsive layout, while grid decorations could draw separators without adding empty DOM cells.

The proposals are at different stages of maturity. As of October 2026, several are available in Chromium but not yet in Firefox or Safari; `inherit()` is implemented in no browser. The article shows where progressive enhancement is feasible, with safeguards such as `@supports` for height transitions.

2026-10-27 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/interop-2027-ten-css-proposals-from-accessibility-to-animation.md>) · [Original resource](<https://www.joshwcomeau.com/css/interop-2027/>)

## [CSS \`random()\`: Add playful variation without breaking layout](<https://sebastien.rigaux.be/en/tech-watch/links/css-random-add-playful-variation-without-breaking-layout>)

The CSS `random()` function adds visual variation in the browser, without JavaScript or Sass loops. Brecht De Ruyte demonstrates it with subtly tilted letters, cards animated on scroll, and shadows that respond to card rotation. A caching key can keep multiple properties in sync, while `sibling-index()` calculates the structure of a fanned-out card stack.

These effects are best suited to decorative elements: the article advises against randomizing grids, body text, or interactive targets. With browser support still rolling out, it recommends a stable baseline enhanced through `@supports`, and stresses respecting `prefers-reduced-motion` and screen-reader access.

2026-10-23 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/css-random-add-playful-variation-without-breaking-layout.md>) · [Original resource](<https://www.smashingmagazine.com/2026/10/embracing-playful-imperfection-css-random-function/>)

## [Conform: validate forms using HTML fundamentals](<https://sebastien.rigaux.be/en/tech-watch/links/conform-validate-forms-using-html-fundamentals>)

Conform combines typed validation, FormData and progressive enhancement. Its useForm hook exposes form state while leaving markup and submission flow under developer control.

2025-02-24 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/conform-validate-forms-using-html-fundamentals.md>) · [Original resource](<https://conform.guide/>)