Modern Web Browser Compatibility + Baseline Awareness

Goal / 目的

• 新しい Web API / CSS プロパティを差分で導入したときに、Baseline 状態 (Newly available / Widely available / Limited availability) とブラウザサポートを確認する起点を示す。
• progressive enhancement / feature detection / graceful degradation の有無を suggestion で問いかける。
• ブラウザサポート方針が repo に明文化されているなら、その方針との整合を優先する。

Non-goals / 扱わないこと

• 完全な caniuse データの代替（実際のサポート % は MDN / web-features を参照する起点として扱う）。
• polyfill 推奨そのもの（重い polyfill 追加は別レビュー / 別議論）。
• ブラウザサポート対象範囲のチーム合意形成（人間レビューへ）。

False-positive guards / 抑制条件

• repo に「Modern browsers only」「Evergreen browser support」等の明示があるなら、Widely available 級の API は指摘しない。
• transpiler / bundler (Babel / SWC) が target ブラウザを設定している場合、JS 構文系は対象外（CSS / Web API は別問題）。
• 既に @supports / if ('xxx' in window) / try-catch 等の feature detection が含まれている差分は指摘しない。
• progressive enhancement の fallback がコメント・docs で明示されている場合は指摘しない。

Rule / ルール

Baseline 状態の確認

• Newly available (緑、新規): 過去 30 ヶ月未満で全モダンブラウザに到達した機能。利用は OK だが、Safari 旧バージョン / IE 互換要件があれば fallback を確認。
• Widely available (青、安定): 30 ヶ月以上経過し全モダンブラウザで安定。基本的に suggestion なし。
• Limited availability (赤、未到達): 一部ブラウザで未実装 / experimental flag 越し。必ず fallback / feature detection を提案する。

JavaScript / Web API

• Object.hasOwn / Array.prototype.findLast / structuredClone / Promise.any などの比較的新しい API は MDN / Baseline status の確認を促す。
• URL.parse (static) / Set.prototype.intersection / iterator helper (map / filter on iterator) などの Limited availability 級は feature detection を提案する。
• Service Worker / Web Workers / Push API のような環境依存 API は graceful degradation を促す。

CSS

• :has() / @container / subgrid / text-wrap: balance / view-transition-name などの新 CSS は Baseline 確認を促す。
• color-mix() / oklch() / light-dark() / Anchor Positioning などの 2024 級は @supports fallback の検討を提案する。
• Container Queries は Baseline Widely available 寄りだが、初期に書いたコードが古いブラウザ起動を含むかは確認する。

HTML

• <dialog> の Web Platform Native 利用は Baseline Widely available（Safari 15.4+ / Chrome 37+ / Firefox 98+）→ 通常 suggestion なし。
• Popover API (popover attribute) は Baseline Newly available（2024 〜）→ Limited availability エリアでの fallback を確認。
• loading="lazy" / decoding="async" は Widely available。

Feature detection / progressive enhancement の suggestion

• 「if (CSS.supports('@container', '...')) で fallback を切り替える」「@supports (xxx) で modern path を限定する」など、最小差分の fallback 案を 1〜2 行で示す。
• 採用しない判断もあり得るため、suggestion 扱いを明示する。

Evidence / 根拠の取り方

• 差分のコードを引用し、どの API / プロパティが Limited availability エリアにあるかを示す。
• MDN / Baseline / web.dev の該当ページ名を 1 つ挙げる（例: "CSS @container", "Popover API", "Object.hasOwn"）。
• repo のブラウザサポート方針が .river/rules.md / README / package.json の browserslist に明示されている場合はそれを引用する。

Heuristics / 判定の手がかり

• ES2022+ の API を直接呼び出す変更で、feature detection が無い。
• 新しい CSS プロパティを @supports なしで使用している差分。
• Intl.Segmenter / Intl.DurationFormat / Intl.NumberFormat の v2 API など、Limited availability の Intl API。
• navigator.userAgent / userAgentData を見て分岐するロジック（古い UA sniffing パターン）。
• HTML の experimental attribute (commandfor, command, ...) を feature flag なしで使用する差分。

Actions / 改善案

• 「@supports (container-type: inline-size) { … } で Container Queries を modern-path 限定にする」のような最小差分案を 1〜2 行で示す。
• repo の browserslist / Modern browsers 方針を確認する一行を必ず添える。
• 採用しない判断 (Baseline Newly available で fallback 不要) もあり得るため、suggestion 扱いを明示する。

Output / 出力

• Finding: 該当 API / プロパティ名 + Baseline 状態
• Evidence: 差分のコード抜粋 + 該当行
• Suggestion: @supports / feature detection / fallback 案
• Severity: minor 固定
• Confidence: Baseline 状態が公的に確認できれば medium / high、推測ベースの場合は low

評価指標（Evaluation）

• 合格基準: 差分の API 名が明示され、Baseline 状態に言及し、fallback / progressive enhancement の代替案が具体的にある。
• 不合格基準: 「古いブラウザでは動かないかも」のような曖昧表現、polyfill 採用の強要、browserslist 無視。

人間に返す条件（Human Handoff）

• repo のブラウザサポート方針が明文化されていない場合（指摘の前提が定まらない）。
• 提案する fallback が UX や paint pipeline に大きく影響しうる場合。
• Limited availability API への代替案が複数存在し、UX / 性能 / DX のトレードオフ判断が必要な場合。

参考

• Baseline: https://web.dev/baseline/
• MDN: Browser compatibility tables
• web-features / web-platform-dx (Baseline status の機械可読 dataset)
• caniuse.com（補助的に）
• repo の package.json browserslist, .browserslistrc, .river/rules.md