Modern CSS 是一个专注于编写现代、健壮且高效 CSS 的专业知识技能。它在新 CSS 项目或文件启动时触发，也可在用户询问新 CSS 特性时使用。该技能提供现代 CSS 的参考，内容按以下主题组织。
布局与响应式设计：涵盖容器查询（container queries），包括容器单位 cqi、cqb、cqw、cqh，以及锚定容器查询；媒体查询范围语法，如 @media (width <= 1024px) 和 @media (360px < width < 1024px)；Grid 增强，包括 subgrid 和 masonry（display: grid-lanes）。
颜色与主题：涵盖 color-scheme 与 light-dark() 函数、现代颜色空间（OKLCH、Display-P3、使用 in oklch 的渐变）、颜色操作（color-mix()、相对颜色语法）、accent-color。
排版：涵盖文本换行（text-wrap: balance 与 pretty）、text-box 修剪、流体排版（clamp()）、动态视口单位（dvh、dvw、svh、svw、lvh、lvw）。
动画与动效：涵盖滚动驱动动画（animation-timeline: scroll() 与 view()）、视图过渡（@view-transition、view-transition-name、view-transition-class、嵌套视图过渡组）、使用 linear() 的高级缓动、@starting-style。
自定义属性与高级特性：涵盖 @property（类型安全、可动画的自定义属性）、数学函数与 calc-size()、树计数函数（sibling-index()、sibling-count()，即将推出）、if() 条件 CSS（即将推出）。
架构与组织：涵盖级联层（@layer），包括导入第三方 CSS 并降低特异性、按关注点组织样式、嵌套层创建清晰层级。
交互组件：涵盖 Dialog（含 closedby 属性）、Popover（含 popover=hint）、锚点定位（anchor-name、position-anchor、position-area、position-try-fallbacks、position-try-order，以及 anchor()、::scroll-button()、::scroll-marker() 伪元素）、排他手风琴（details name）、可定制 select（appearance: base-select）、search 元素。
表单增强：涵盖字段尺寸（field-sizing: content）、更好的验证伪类（:user-invalid、:user-valid）、select 中的 hr。
视觉效果：涵盖滚动条样式（scrollbar-color、scrollbar-width）、shape() 函数、角形状（corner-shape: squircle、notch、scoop、superellipse()）。
渐进增强模式：涵盖特性检测（@supports）、尊重用户偏好（prefers-reduced-motion、prefers-color-scheme、prefers-contrast）、检查浏览器支持（Baseline：Widely Available、Newly Available、Limited Availability）。
该技能还提供了真实世界示例：一个使用多种现代 CSS 特性的卡片组件，包含级联层、@property、容器查询、light-dark()、OKLCH、相对颜色、视图过渡、滚动驱动动画、锚点定位、@starting-style、滚动状态容器查询、尊重用户偏好等，并附有对应的 HTML 结构。
使用指南：优先考虑稳定性，推荐 Newly Available 或 Widely Available 特性用于生产代码，Limited Availability 特性需配合渐进增强、优雅降级或 @supports，或询问用户如何处理；优先使用 Web 平台标准方案而非 JavaScript 库（如使用 CSS Masonry 而非 Masonry.js，使用 Popover API 而非自定义 tooltip 脚本）；代码风格上，新调色板使用现代颜色空间（oklch）。
该技能还列出了规范资源：CSS Wrapped 2025、The Coyier CSS Starter、Adam Argyle 的 CascadiaJS 2025 演讲幻灯片、Modern CSS in Real Life。