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

Активно применяйте при создании систем проектирования, библиотек компонентов или любого внешнего приложения. Триггеры CSS Grid, Subgrid, Flexbox, Container Queries, :has(), @layer, @scope, вложенность CSS, @property, @function, if(), oklch, сочетание цветов, светлый-темный, относительный цвет, @starting-style, анимация на основе прокрутки, переходы просмотра, расположение привязки, всплывающее окно, настраиваемый выбор, видимость содержимого, логические свойства, перенос текста, интерполяция размера, зажим, изменение размера полей, современный CSS, архитектура CSS, адаптивный дизайн, темный режим, темы, токены дизайна, каскадные слои. Используйте при написании CSS для любого веб-проекта, выборе подходов к макету, создании адаптивных компонентов, реализации темного режима или тем, создании анимации или переходов, стилизации элементов формы или модернизации устаревших таблиц стилей. Современные функции CSS и лучшие практики создания интерфейсов с использованием чистого CSS. Источник: ccheney/robust-skills.