作例集

作例集：ブラウザ標準だけで動くもの

作成の手がかりになるガイドから、ブラウザ標準だけで動く作例を集めました。どれもこのページの中で実際に動きます。コードは各解説ページにもあります。

1. ガイド検索の感触（CLIの簡易再現）

出典：CLIと意味検索の解説。実際のCLIは意味検索とキーワード検索の併用です。下はキーワード一致だけの簡易版です。

npx modern-web-guidance@latest search "animate a dialog modal backdrop"
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"

2. 自動で伸びるテキストエリア（field-sizing）

出典：モダナイズの解説。入力のたびにJavaScriptで高さを測る旧来の書き方を、CSSに置き換えたものです。

textarea { field-sizing: content; min-block-size: 3lh; max-block-size: 15lh; }

3. 宣言的なポップオーバー（popover）

出典：モダナイズの解説。開閉のリスナーを書かず、属性だけで動きます。

<button popovertarget="menu">Open Menu</button>
<div id="menu" popover>Menu Content</div>

4. ダイアログと、未対応ブラウザへの肩代わり（closedby）

出典：Baselineのフォールバックの解説。型3「軽い自前のJavaScript」の実物です。

5. 検索できるFAQ（details の name 共有）

出典：MetaMaskの事例。閉じた中身がDOMに残るため、ページ内検索にヒットします。

6. 見出しの行のバランス（text-wrap: balance）

出典：Baselineのフォールバックの解説。フォールバックのコードが要らない型1の例です。未対応のブラウザでは無視されるだけです。

.balanced { text-wrap: balance; }

7. テーマの切り替え（color-scheme と light-dark()）

出典：Baselineのフォールバックの解説とAIが間違えやすい10のことの6番です。

.swatch { background: light-dark(#e8f0fe, #3c4043); }

8. 場所の予約でレイアウトのずれを防ぐ（aspect-ratio）

出典：WeTVの事例。CLS 0.39の原因だった、プレーヤーの高さの予約なしを直した書き方です。

.player { inline-size: 100%; block-size: auto; aspect-ratio: 16/9; }