AI 摘要：作者以“很多站点并不需要 JavaScript”为引子，系统展示现代 CSS 的强大与可用性：从 Nesting、相对颜色、:has、@starting-style、color-scheme/light-dark，到输入校验与 details 组件、Web 动画与视口单位 dvh/lvh/svh，以及 Baseline 兼容性保证；论证在性能（合成器线程 compositor thread）、可访问性与隐私友好方面 CSS 具备天然优势，主张用 CSS 做到能做的事，把 JS 作为渐进增强，并提出若干 CSS 心愿单与个人的创作观。

1. 观点与动机
• 批评“臃肿 JS + 追踪脚本”导致的糟糕体验，但承认框架在合适场景的价值。
• 核心主张：并非所有站点都需要 JavaScript；HTML/CSS 已能覆盖大量交互与视觉需求。
• 目标：科普现代 CSS 能力，帮助开发者减少不必要的 JS。

2. 现代 CSS 能力与可用性
• 语法与可读性：原生 Nesting 显著改善层级样式组织；短类名也更可控。
• 相对颜色与 color-mix：可在多色彩空间就地变换/混合，轻松生成主题、悬停态等。
• 新语法与单位：媒体查询支持范围表达式 (width <= 768px)、lh 单位、scrollbar-gutter 等。
• Baseline 计划：用“新近可用/广泛可用”标识保障跨浏览器一致性与上线时机判断。

3. 性能、可访问性与渐进增强
• 性能：CSS 动画运行在合成器线程 (compositor thread)，避免事件循环抖动，低端设备也更顺滑；如需 JS 触发，优先用 Web Animations API。
• 可访问性与隐私：无脚本也可完整浏览；对安全研究者/隐私用户更友好。
• 渐进增强 (progressive enhancement)：交互与主题切换用 CSS 实现，偏好持久化可由 JS 或服务端补充。

4. 实战示例与模式库
• 过渡与入场：@starting-style 简化“初始态 + transition”实现，无需 keyframes/JS 强制触发。
• 主题与暗色模式：color-scheme: light dark + light-dark() 一键适配系统主题；用 radio + :has 覆写用户选择。
• 表单与交互：
• 自定义单选/标签：:has(input:checked)、:has(input:focus-visible) 驱动样式与无障碍焦点。
• 选项卡：在父级用 :has(#id:checked) 切换内容显示。
• 折叠面板：details/summary 原生手风琴，支持 [open] 状态与可搜索。
• 校验：pattern、:valid/:invalid 与 :user-valid/:user-invalid 组合，既即时反馈又避免“未输入即报错”；可配合 :has 进行联动样式。
• 其他经验：使用自定义元素名（带连字符）组织结构；在 body 内邻近放置 style 以优化首屏可读性（实践有效但规范上未正式推荐）。

5. 视口与虚拟键盘适配
• 移动端视口单位陷阱：vw/vh 在地址栏显隐时不稳定，易致元素被截断或背景不满屏。
• 解决方案：使用响应式单位 lvh/svh/dvh（背景用 lvh，必须始终可见的按钮用 svh，dvh 动态变化慎用以免抖动）。
• 键盘覆盖处理：
• meta viewport 的 interactive-widget=resizes-content（跨浏览器、无 JS）。
• VirtualKeyboard API（Chromium 专属）：navigator.virtualKeyboard.overlaysContent 与 env(keyboard-inset-height) 获取键盘尺寸；跨端性不足，谨慎采用。

6. CSS 心愿单（提案/期望）
• 可复用块：在原生 CSS 内支持类似 @apply 的类复用。
• 组合 @media 选择器：在同一规则中合并媒体条件与选择器列表，减少重复。
• nth-child 变量：将子序号暴露为变量，便于位置/颜色等按序计算。
• nth-letter 选择：扩展 ::first-letter 为 ::nth-letter(n) 做文本特效。
• 单位移除：更直观地得到无单位数值（当前需 tan/atan2 等技巧与 @property，期望直接除法）。
• 更好的 image()：实现带回退色与图像片段裁剪的函数，优于 url() 场景。
• 允许 body 内 style 合规：实务上有利于感知性能