modern-css-html

现代 CSS 与 HTML

使用当前平台功能编写 CSS 和 HTML。优先使用原生功能，而非旧式技巧和不必要的 JavaScript。

与其他技能的配合

• 本技能负责原生实现方案的选择。
• fluid-design 负责处理超出 CSS 能力范围的交互体验，例如物理效果、中断或手势。
• semantic-html-first 负责元素与 ARIA 的边界。
• 如果原生 CSS/HTML 功能可以满足需求，且支持情况可接受，就使用它。

浏览器支持策略

目标是支持 WebKit（Safari） 和 Blink（Chrome/Edge） 的功能，除非任务明确允许仅针对单一引擎进行实验。

• **两个引擎都广泛支持：**直接作为默认方案发布。
• **两个引擎都刚刚开始支持：**使用 @supports / 渐进增强。
• **仅单一引擎支持或尚不稳定：**作为可选方案说明，并提供跨引擎实现路径。

建议中不要硬编码可能变动的全球支持率百分比。不确定时，重新核查支持情况，并将决策表述为“两个引擎都支持 / 渐进增强 / 回退方案”。

核心默认做法

HTML

• 优先使用原生元素（button、a、details、dialog、select、表单控件），而非 ARIA 小部件。
• 优先采用语义化结构（main、nav、section、标题），而非由大量 div 组成的结构。
• 在支持情况允许时，优先使用 Popover API + CSS Anchor Positioning，而非自定义浮动元素堆栈。

布局

• 使用 gap，而非通过 margin 实现间距；使用 inset，而非四个物理方向偏移；使用 aspect-ratio，而非通过 padding 实现比例。
• 在移动设备全屏高度布局中使用 100dvh；使用逻辑属性实现适应方向的间距。
• 使用容器查询实现组件响应式布局；使用范围语法编写媒体查询。
• 在可以替代 JavaScript 的情况下，使用 subgrid、grid-template-areas、position: sticky 和滚动捕捉。

颜色与主题

• 使用 oklch() 构建调色板。
• 使用 color-mix() 和相对颜色语法派生状态颜色。
• 优先使用 light-dark() 和 color-scheme，而非重复编写主题代码块。

动效

• 优先对 translate、rotate、scale 和 opacity 进行动画处理。
• 在支持时，使用 @starting-style 和 transition-behavior: allow-discrete 实现进入/退出效果。
• 在支持情况允许时，优先使用 CSS 滚动驱动时间线，而非通过 Intersection Observer 切换类名。
• 弹簧效果、手势和可中断的物理效果请遵循 fluid-design。

审查清单

• 此控件是否有对应的原生 HTML 元素？
• 是否可以不使用库，仅通过 CSS 实现布局、颜色和动效？
• 颜色是否使用令牌 / oklch，而非一次性十六进制值？
• 是否在需要时使用 @supports 编写回退方案？
• 是否为减少动态效果设置了真正可用的替代方案？
• 是否避免在方向敏感的 UI 中使用物理方向的左右属性？
• 如果仍保留 JavaScript，它是否用于弥补 CSS/HTML 无法解决的缺口？

参考资料

• 实现匹配的模式时，请阅读 任务示例。
• 选择功能或回退方案时，请阅读 功能说明。 仅加载与当前决策相关的参考资料。