![Tara Agyemang](https://web.dev/images/authors/taraojo.jpg) Tara Agyemang [X](https://twitter.com/tara_ojo) [GitHub](https://github.com/taraojo) [LinkedIn](https://www.linkedin.com/in/taraojo)

<br />


Published: November 11, 2026

<br />

Discussions about AI coding tools almost always focus on speed: How fast an agent can scaffold an app, build a new feature, or migrate a whole codebase.

But when an agent writes the code, two questions come up. Does it use the best of the modern web platform? And how do you keep growing your own technical understanding when you aren't typing every line yourself?

This week, we released [Modern Web Guidance 1.0](https://developer.chrome.com/blog/modern-web-guidance-v1.md.txt), a set of skills that give your coding agents web platform expertise, best practices, and browser compatibility data. It covers over 200 real-world use cases and steers agents toward clean, native HTML and CSS instead of legacy JavaScript workarounds.

Since our early preview at Google I/O, developers have told us they use Modern Web Guidance for more than better code. They also use it to discover and learn modern web features as they work.

## Why AI agents default to yesterday's web

The web platform has evolved quickly. Features that once needed heavy JavaScript or fragile workarounds (like modal focus traps, custom-styled selects, entry and exit animations, or skipping offscreen rendering) work natively in browsers.

But models learn from huge archives of existing code, and ten years of legacy code far outweighs the last twelve months. So unguided agents reach for old habits. Across nearly 1,000 eval runs on our [public eval dashboard](https://goo.gle/mwg-evals), frontier models passed about 60% of our modern web checks on their own, and jumped to around 80--90% when guided by Modern Web Guidance.

When you install [Modern Web Guidance](https://developer.chrome.com/docs/modern-web-guidance/get-started.md.txt), your agent loads concise, expert-written guides right before it writes code. Instead of pulling your codebase back toward 2019-era patterns, it introduces you to modern standards you may not have seen yet.

For example, using Modern Web Guidance with your agent can help you discover connected platform features. Fixing a tooltip or menu bug can introduce you to the [Popover API](https://developer.mozilla.org/docs/Web/API/Popover_API). That can lead you to [CSS Anchor Positioning](https://developer.mozilla.org/docs/Web/CSS/CSS_anchor_positioning) to position elements without JavaScript libraries.

When an agent writes a modern CSS rule or HTML attribute you haven't seen before, you can pause, check how it works, and develop your understanding. Modern Web Guidance 1.0 was designed so that your agent doesn't use those features silently. It explains what it chose and why.

## Use Modern Web Guidance as a learning tool

You can learn from Modern Web Guidance inside your agent, in your terminal, and on the web.

### Browse the docs on Chrome for Developers

You can browse what Modern Web Guidance covers without reading raw Markdown. [Explore all 200+ guides](https://developer.chrome.com/docs/modern-web-guidance/guides.md.txt), covering `accessibility`, `performance`, `security`, `privacy`, `html`, `css`, `css-layout`, `forms`, `passkeys`, `webmcp`, and `built-in-ai`.

Every discipline is written and reviewed by web platform experts, with support from Google Chrome, Microsoft Edge, Firefox, and the broader web community.

### Read the "Modern Web Guidance" section at the end of every response

In 1.0, the skill tells your agent to add a Modern Web Guidance section at the end of every response where it uses a guide.

The agent lists:

1. Which guide IDs it applied, or which topics it checked if no guides were applied.
2. Which APIs, CSS rules, or fallbacks it used and what issues they prevent.
3. A reference to the specific rule from the guide that drove the decision.

Take a common task that AI models tend to get wrong: Animating a modal `<dialog>` or popover in and out of the [top layer](https://developer.mozilla.org/docs/Glossary/Top_layer). In our [evaluation runs](https://goo.gle/mwg-evals) on the [`animate-to-from-top-layer`](https://developer.chrome.com/docs/modern-web-guidance/guides/ui-behaviors/animate-to-from-top-layer.md.txt) and [`dialog`](https://developer.chrome.com/docs/modern-web-guidance/guides/ui-components/dialog.md.txt) guides, five out of six unguided runs failed to use modern CSS entry and exit animation properties, and six out of six unguided runs ignored [`prefers-reduced-motion`](https://developer.mozilla.org/docs/Web/CSS/@media/prefers-reduced-motion).

With Modern Web Guidance installed, your agent uses the [`dialog`](https://developer.chrome.com/docs/modern-web-guidance/guides/ui-components/dialog.md.txt) and [`animate-to-from-top-layer`](https://developer.chrome.com/docs/modern-web-guidance/guides/ui-behaviors/animate-to-from-top-layer.md.txt) guides and explains its choices at the bottom of its reply:

```markdown
### Modern Web Guidance
- **`dialog`**: Opened the native `<dialog>` declaratively using Invoker Commands (`command="show-modal"` and `commandfor`), and prevented background page scrolling using `overscroll-behavior: contain` on `dialog:modal` and `dialog::backdrop` instead of locking `body` scroll.
  > "DON'T lock scrolling with `overflow: hidden` or `position: fixed` on `html` or `body`."
- **`animate-to-from-top-layer`**: Used `@starting-style` for the entry animation and `transition-behavior: allow-discrete` with `display` and `overlay` in the transition list so the browser waits for the exit transition before removing the dialog from the top layer, gated behind `prefers-reduced-motion: no-preference`.
  > "MANDATORY: Respect user preference for reduced motion by selectively applying transitions."
```

From this output, you learn three techniques you can reuse:

- [Invoker Commands](https://developer.mozilla.org/docs/Web/API/Invoker_Commands_API) let a `<button>` open a modal declaratively without a custom JavaScript click listener.
- [`@starting-style`](https://developer.mozilla.org/docs/Web/CSS/@starting-style) and [`transition-behavior: allow-discrete`](https://developer.mozilla.org/docs/Web/CSS/transition-behavior) let you smoothly animate elements entering and leaving `display: none` and the top layer in pure CSS, without `setTimeout` before calling `dialog.close()`.
- Locking scroll with `overflow: hidden` on `<body>` removes the root scrollbar and causes layout shift. Pairing `overscroll-behavior: contain` on `dialog:modal` and `overflow: hidden; overscroll-behavior: contain` on `dialog::backdrop` stops scroll chaining cleanly.

To go further, add instructions to your `AGENTS.md` file that ask your agent to quiz you on the features it used or explain its choices as it works. For example, it can tell you what it planned to write, what it missed, and what it changed because of the guide.

### Learn progressive enhancement and browser support with Baseline

[Baseline](https://web.dev/baseline) tells you at a glance whether a web feature is Limited availability, Newly available (supported across major browsers), or Widely available (interoperable for at least 30 months).

Every guide in Modern Web Guidance embeds Baseline support data alongside a specific fallback strategy. That makes your agent a practical teacher for progressive enhancement.

A good example is custom-styled `<select>` elements. For years, styling a drop-down menu to match a design system meant rebuilding the entire control out of `<div>` elements and JavaScript. In our [evaluation suite](https://goo.gle/mwg-evals), unguided models scored 44% on custom select tasks---versus 92% with Modern Web Guidance---because they built custom `<div>` drop-downs that dropped `<label>` elements, omitted the `name` attribute, broke keyboard navigation, and failed to submit with the form.

With Modern Web Guidance, your agent teaches you how to opt into [customizable `<select>`](https://webstatus.dev/features/customizable-select) using `appearance: base-select`, `::picker(select)`, and `<selectedcontent>`:

```html
<label for="shipping">Shipping preference</label>
<select class="brand-select" id="shipping" name="shipping">
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option value="standard">
    <span aria-hidden="true">🚲</span> Standard shipping
  </option>
  <option value="express" selected>
    <span aria-hidden="true">🏍️</span> Express shipping
  </option>
</select>
```

```css
/* Opt the select button and its top-layer drop-down picker into custom styling */
.brand-select,
.brand-select::picker(select) {
  appearance: base-select;
}
```

The guide also explains *why* this pattern is safe to use as a progressive enhancement: In browsers that don't support `appearance: base-select` yet, the parser ignores the inner `<button>` and `<selectedcontent>` tags, and renders a standard, accessible native `<select>` drop-down without JavaScript.

You can also set your browser support target in `AGENTS.md` or `CLAUDE.md` so the fallbacks your agent applies and explains match your team's exact browser support policy.

### Audit existing code to find gaps

A good way to learn is to look at real code and ask, *"What's missing here, and why does it matter?"* You can use the guides to help answer these questions by auditing existing code. Ask your agent to review a component or a pull request before it changes anything:

**Prompt to try:**

    Use Modern Web Guidance to audit our collapsible FAQ component (ProductFAQ.tsx). Don't edit yet. What native HTML and CSS could replace our accordion JavaScript and keep collapsed answers searchable?

Audits like this highlight platform features that models often overlook:

- **Making collapsed content searchable with find-in-page ([`search-hidden-content`](https://developer.chrome.com/docs/modern-web-guidance/guides/ui-behaviors/search-hidden-content.md.txt)):** Agents often hide collapsed accordion panels with `display: none`, so find-in-page (Ctrl+F or Cmd+F) can't find the text. Auditing `ProductFAQ.tsx` suggests two native fixes: Using `<details>` elements that share a `name` attribute to build an exclusive accordion with searchable text, or using `hidden="until-found"` with a `beforematch` event listener so the browser opens a section when a search matches it.
- **Animating smoothly to `height: auto` in pure CSS ([`animate-to-intrinsic-sizes`](https://developer.chrome.com/docs/modern-web-guidance/guides/css/animate-to-intrinsic-sizes.md.txt)):** Instead of measuring `scrollHeight` in JavaScript or using fragile `max-height: 999px` to animate a panel, set `interpolate-size: allow-keywords` (or use `calc-size()`) so panels can animate from `0` to `height: auto`.

### Explore the catalog from your terminal

You don't need an agent to use Modern Web Guidance. The `modern-web-guidance` CLI is a standalone tool for checking the modern way to build a feature.

You can try it without installing anything globally:

```bash
# Search for guides matching a task you are about to build
npx modern-web-guidance@latest search "animate a dialog modal backdrop"

# List all available guides across disciplines
npx modern-web-guidance@latest list

# Read a specific guide directly in your terminal
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"
```

Guides skip detailed background, so reading one with the `retrieve` command gives you a focused list of modern APIs, edge cases, and fallbacks for that task.

### Follow the release notes

Watching releases on the [Modern Web Guidance GitHub repository](https://github.com/GoogleChrome/modern-web-guidance/releases) shows when a feature reaches Baseline, or when experts update a pattern. Each release lists new and updated guides, so you can skim what changed and then run the update.

## Start learning with Modern Web Guidance

AI coding tools don't mean you're trading away your technical depth for speed. When your agent is grounded in up-to-date web standards and shows its work, every prompt, code review, and refactor becomes a chance to sharpen your own understanding of the web platform.

Ask your agent to install Modern Web Guidance, or run:

```bash
npx modern-web-guidance@latest install
```

If you already installed an earlier preview version, update to 1.0 to get the full catalog of 200+ guides and new features:

```bash
npx modern-web-guidance@latest update
```

Read the [Getting started documentation](https://developer.chrome.com/docs/modern-web-guidance/get-started.md.txt), explore the [public evaluation dashboard](https://goo.gle/mwg-evals), and tell us what you discover by filing feedback on [GitHub](https://github.com/GoogleChrome/modern-web-guidance-src).