css-first

CSS 优先

在提出 JavaScript 方案之前，先尝试用语义化 HTML 和 CSS 解决界面需求。若现代标准 CSS 符合用户的目标浏览器要求，优先采用；支持不完整时，通过渐进增强保留核心体验。

工作流

1. 明确视觉或交互意图，并检查项目所用框架、目标浏览器、书写模式和现有约定。
2. 在 css-demos/INDEX.md 中查找匹配的模式。
3. 当支持情况或时效性很重要时，使用 references/live-mdn-fetch.md 获取最新的 Baseline 记录。将已提交到仓库的标签视为带日期的快照，而非永久事实。
4. 按语义契合度、无障碍性、互操作性和维护成本对方案排序。优先使用逻辑属性和原生 CSS 功能。
5. 如果所选功能属于 Limited Availability，或没有 WebStatus 记录，请提供可用的回退方案，并在可行时使用 @supports 控制增强功能。
6. 如果环境支持真实浏览器，请验证语法和行为。

Baseline 术语

严格按照 Web Platform Status 的含义使用标签。不要将全球使用率百分比转换成 Baseline 标签。

API 状态	标签	含义
widely	🟢 广泛可用	在核心浏览器集合中实现互操作已至少 30 个月
newly	🔵 新近可用	在核心浏览器集合中实现互操作尚未满 30 个月
limited	🟡 可用性有限	尚不属于 Baseline，因为核心浏览器的覆盖不完整
缺失	🟣 实验性／未知	没有可用的 WebStatus 记录；请检查规范和浏览器版本发布信息

浏览器版本百分比可以作为有用的补充数据，但绝不能用于确定 Baseline 类别。

规则

仅阅读任务所需的参考资料：

• references/rules/css-only-enforcement.md — 判断何时 CSS 已足够，何时确实需要 JavaScript。
• references/rules/logical-properties-first.md — 优先使用适配书写模式的属性。
• references/rules/modern-css-features.md — 选择现代功能，包括 Chrome 148–152 新增的功能。
• references/rules/semantic-intent-analysis.md — 将需求映射到合适的 CSS 基元。
• references/rules/framework-awareness.md — 根据代码库调整示例。
• references/rules/browser-support-consideration.md — 准确说明 Baseline 和支持情况。
• references/rules/progressive-enhancement.md — 在可用的核心功能之上叠加可选功能。
• references/rules/browser-verification.md — 验证面向浏览器的行为。

Chrome 最新新增功能

演示目录涵盖从 Chrome 148 到 Chrome 152 已发布或已宣布的、面向开发者的 CSS 功能，包括仅使用名称和逗号分隔的容器查询、at-rule() 和 named-feature() 支持测试、可动画的 zoom、圆角 polygon()、text-fit、background-clip: border-area、CSS image() 值、图像类型的 light-dark()、flex-wrap: balance、overscroll-behavior: chain、打印用 page-margin-safety、SVG path-length、ruby-overhang、媒体状态伪类、alpha()、window-drag，以及已安装应用的系统强调色。

请结合功能演示页标题和实时 WebStatus 条目进行判断：仅仅因为 Chrome 已发布某项功能，并不意味着该功能属于 Baseline。

维护快照

在此技能目录中，运行：

python3 scripts/update_baseline.py --check
python3 scripts/update_baseline.py --write

--check 会报告差异，但不会更改文件。--write 会根据官方 WebStatus API 刷新映射的演示文件头，以及 css-demos/INDEX.md 中对应的条目。没有 WebStatus 记录的特性需手动维护，并且必须引用其发布说明或规范。

快速参考

用途	首选 CSS	演示
组件响应式布局	容器查询	css-demos/container/size-queries.css
感知父级的样式	:has()	css-demos/layout/has-selector.css
均衡换行的弹性行	flex-wrap: balance	css-demos/layout/flex-wrap-balance.css
入场动画	@starting-style	css-demos/animation/starting-style.css
滚动效果	滚动驱动动画	css-demos/animation/scroll-driven.css
原生工具提示定位	锚点定位	css-demos/positioning/anchor-positioning.css
响应式标题适配	text-fit	css-demos/visual/text-fit.css
感知主题的图像	light-dark() / image()	css-demos/visual/css-image-values.css
媒体播放状态	:playing、:paused 及相关伪类	css-demos/interaction/media-state-pseudos.css
已安装应用的拖动区域	window-drag	css-demos/interaction/window-drag.css
减少动态效果	prefers-reduced-motion	css-demos/accessibility/prefers-reduced-motion.css
装饰性变化	random()	css-demos/functions/random-function.css
规范化范围	progress()	css-demos/functions/progress-function.css

使用 MDN 了解语法和注意事项，使用 WebStatus 了解 Baseline：

• https://developer.mozilla.org/en-US/docs/Web/CSS
• https://webstatus.dev/
• https://web.dev/baseline/