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、捲動動畫、視圖轉換、錨點定位、彈出視窗、可自訂選擇屬性、內容可見性、觸發符號、滾動點定位架構、響應式設計、深色模式、主題、設計令牌、級聯層。在為任何 Web 項目編寫 CSS、選擇佈局方法、建立響應式元件、實現深色模式或主題、建立動畫或轉場、設計表單元素的樣式或現代化遺留樣式表時使用。使用純原生 CSS 建立介面的現代 CSS 功能和最佳實踐。 來源：ccheney/robust-skills。

查看原文