modern-css

现代 CSS

选择符合所需行为且受目标浏览器支持的原生 CSS 功能。用户的明确指示优先于本指南。除非请求要求更改，否则请保留项目的框架、预处理器、设计令牌和样式约定。

解决样式问题

根据受影响的标记和样式、期望的外观或交互，以及目标浏览器来处理问题。如果有项目配置，请从中推断目标浏览器。若缺少的支持信息会影响实现，请询问相关信息，或说明保守的后备方案。

随附的支持表是过时的研究快照，并不保证当前兼容性。当支持情况很重要时，请查看特定功能的 MDN 兼容性数据 或 Web Platform Status。

需求	入手方向
行和列，或对齐的嵌套轨道	Grid / Subgrid
一维排列	Flexbox
根据组件可用空间调整布局	容器查询
层叠覆盖或特异性冲突	层、作用域、选择器特异性
主题和派生颜色	自定义属性、颜色函数、color-scheme
动效、弹出层或滚动效果	针对特定功能的参考资料和后备方案

确保结果可用

• 在受支持的浏览器中保留布局和交互。如果某项功能不可用，请使用渐进增强或功能检测。
• 使层叠更改与现有的来源、重要性和层顺序相匹配；添加一个层可能会改变优先级。
• 更改交互组件时，尊重减少动态效果的偏好，并保留焦点和键盘行为。
• 将现代 CSS 视为一种选择，而不是移除 JavaScript 或重建可用控件的强制要求。是否适合替换，取决于支持情况和行为是否等效。
• 将重置和样式表重组限制在任务范围内；修改组件不意味着需要全局重置。

交付所需的样式更改或说明，并在实现时验证受影响的布局和状态。说明尚未验证的浏览器限制，不要把示例当作支持证明。

参考资料

仅加载相关部分，并利用其中内容查找具体功能。

任务	参考资料
层、作用域、嵌套、特异性	CASCADE.md
Grid、Flexbox、容器、内在尺寸	LAYOUT.md
关系选择器、焦点、伪元素	SELECTORS.md
色彩空间、调色板、深色模式	COLOR.md
自定义属性、函数、设计令牌	TOKENS.md
过渡、关键帧、进入/退出、视图过渡	ANIMATION.md
滚动时间线、粘滞状态、轮播	SCROLL.md
对话框、弹出层、锚点、选择框、字段尺寸	COMPONENTS.md
渲染性能、排版、书写模式	PERFORMANCE.md
紧凑语法或功能检测速查	CHEATSHEET.md