71 lines
3.0 KiB
HTML
71 lines
3.0 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Baseline Demo</title>
|
|
<link rel="stylesheet" href="../shared.css" />
|
|
</head>
|
|
<body>
|
|
<main class="shell">
|
|
<aside class="rail">
|
|
<p class="eyebrow">Web Platform</p>
|
|
<h1>Baseline</h1>
|
|
<p class="lead">演示如何把“能不能用某个 Web API”变成特性状态、运行检测和 fallback 策略。</p>
|
|
<nav class="nav" aria-label="Demo navigation">
|
|
<a href="../index.html"><span class="num">0</span><span>返回总览</span></a>
|
|
<a href="../webmcp/index.html"><span class="num">1</span><span>WebMCP</span></a>
|
|
<a href="../prompt-api/index.html"><span class="num">2</span><span>Prompt API</span></a>
|
|
<a href="../devtools-agents/index.html"><span class="num">3</span><span>DevTools Agents</span></a>
|
|
<a href="../modern-web-guidance/index.html"><span class="num">4</span><span>Modern Web Guidance</span></a>
|
|
<a class="active" href="./index.html"><span class="num">5</span><span>Baseline</span></a>
|
|
<a href="../view-transitions/index.html"><span class="num">6</span><span>View Transitions</span></a>
|
|
</nav>
|
|
<div class="note">本地矩阵用于现场讲述；生产判断仍应回到官方 Baseline 数据和项目目标浏览器。</div>
|
|
</aside>
|
|
|
|
<section class="stage">
|
|
<div class="hero">
|
|
<section class="statement">
|
|
<p class="eyebrow">Can I ship it?</p>
|
|
<h2>从“Chrome 支持了”升级到“目标用户能稳定用”。</h2>
|
|
<p>
|
|
Baseline 的价值不是替代 feature detection，而是把团队讨论从版本号转成特性成熟度和采用策略。
|
|
</p>
|
|
</section>
|
|
<aside class="metrics">
|
|
<div class="metric"><strong id="ready-count">0</strong><span>当前环境可直接运行的能力</span></div>
|
|
<div class="metric"><strong id="enhanced-count">0</strong><span>适合渐进增强的能力</span></div>
|
|
<div class="metric"><strong id="blocked-count">0</strong><span>需要 fallback 或实验开关</span></div>
|
|
</aside>
|
|
</div>
|
|
|
|
<section class="two-col">
|
|
<div class="panel">
|
|
<p class="eyebrow">Feature matrix</p>
|
|
<h2>本地特性检测</h2>
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>能力</th>
|
|
<th>运行检测</th>
|
|
<th>采用建议</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="feature-table"></tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<aside class="console">
|
|
<p class="eyebrow">Decision log</p>
|
|
<h2>判断依据</h2>
|
|
<pre id="log">正在检测...</pre>
|
|
</aside>
|
|
</section>
|
|
</section>
|
|
</main>
|
|
|
|
<script type="module" src="./baseline.js"></script>
|
|
</body>
|
|
</html>
|