SuperAPI AI 工具集

modern-css

前端与建站

查看项目

更新于 10-15 20:11

技能介绍

用途:解决 CSS 布局、响应式、主题与动效问题,选择契合目标行为与浏览器支持的原生 CSS 特性。用户明确指令优先于本技能指南;除请求本身要求外,保留项目现有框架、预处理器、设计令牌与样式约定。

主要能力:按需求给出起点方案,如 Grid/Subgrid 处理行列与嵌套轨道,Flexbox 处理一维排列,容器查询处理基于组件可用空间的布局,Layers/scope/选择器特异性处理级联覆盖,自定义属性与颜色函数处理主题与派生色,特性参考与回退处理动效、popover 与滚动效果。附带参考文档按主题拆分:CASCADE、LAYOUT、SELECTORS、COLOR、TOKENS、ANIMATION、SCROLL、COMPONENTS、PERFORMANCE、CHEATSHEET,按需加载相关部分。

使用方式:以受影响的标记/样式、期望外观或交互、浏览器目标为输入;可从项目配置推断目标,若缺失支持信息会影响实现则询问或给出保守回退。实现后验证受影响的布局与状态。

限制:内置支持表是带日期的研究快照,不构成当前兼容性保证,涉及支持时需查 MDN 兼容数据或 Web Platform Status。级联改动需匹配现有 origin、importance 与 layer 顺序,新增 layer 可能改变优先级。需尊重 reduced-motion 偏好并保留焦点/键盘行为。现代 CSS 是选项而非强制移除 JavaScript 或重建可用控件;重置与样式表重组应限定在任务范围内。未验证的浏览器限制应如实说明,不能把示例当作支持证明。