modern-css

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) |

Applica in modo proattivo durante la creazione di sistemi di progettazione, librerie di componenti o qualsiasi applicazione frontend. Trigger su griglia CSS, sottogriglia, Flexbox, query contenitore, :has(), @layer, @scope, annidamento CSS, @property, @function, if(), oklch, mix di colori, chiaro-scuro, colore relativo, @starting-style, animazioni guidate da scorrimento, transizioni di visualizzazione, posizionamento di ancoraggio, popover, selezione personalizzabile, visibilità del contenuto, proprietà logiche, testo a capo, dimensione interpolata, morsetto, ridimensionamento del campo, moderno CSS, architettura CSS, design reattivo, modalità oscura, temi, token di progettazione, livelli a cascata. Da utilizzare durante la scrittura di CSS per qualsiasi progetto Web, la scelta di approcci di layout, la creazione di componenti reattivi, l'implementazione di modalità oscura o temi, la creazione di animazioni o transizioni, lo styling di elementi di moduli o la modernizzazione di fogli di stile legacy. Funzionalità CSS moderne e best practice per la creazione di interfacce con CSS nativi puri. Fonte: ccheney/robust-skills.