modern-css

SKILL.md

Pure native CSS for building interfaces — no preprocessors, no frameworks.

| CSS Grid, Subgrid, Flexbox | @function, if() (Chrome-only) | | Container Queries (size + style) | Customizable (Chrome-only) | | :has(), :is(), :where() | Scroll-state queries (Chrome-only) | | CSS Nesting, @layer, @scope | sibling-index(), sibling-count() | | @property (typed custom props) | ::scroll-button(), ::scroll-marker |

| oklch(), color-mix(), light-dark() | Typed attr() beyond content | | Relative color syntax | field-sizing: content | | @starting-style, transition-behavior | interpolate-size (Chrome-only) | | Scroll-driven animations | Grid Lanes / masonry (experimental) | | Anchor positioning, Popover API | random() (Safari TP only) |

在创建设计系统、组件库或任何前端应用程序时主动应用。 CSS 网格、子网格、Flexbox、容器查询、:has()、@layer、@scope、CSS 嵌套、@property、@function、if()、oklch、颜色混合、明暗、相对颜色、@starting-style、滚动驱动动画、视图转换、锚点定位、弹出窗口、可自定义选择、内容可见性、逻辑属性、文本换行、插值大小、钳位、字段大小、现代触发CSS、CSS 架构、响应式设计、深色模式、主题、设计令牌、级联层。在为任何 Web 项目编写 CSS、选择布局方法、构建响应式组件、实现深色模式或主题、创建动画或过渡、设计表单元素的样式或现代化遗留样式表时使用。使用纯原生 CSS 构建界面的现代 CSS 功能和最佳实践。 来源：ccheney/robust-skills。

查看原文