现代 CSS UI 设计模式

CSS 终于能「向上看」：选择「包含某个元素的父元素」。以前必须靠 JS 加类名才能实现的联动，现在一行搞定。

只给宽度，高度按比例自动算。以前要靠 padding-top:56.25% 的 hack，现在一个属性解决。

嵌套的网格可以继承父网格的轨道，让跨卡片的内容真正对齐。解决「卡片内元素对不齐」这个困扰多年的老问题。

动画进度直接绑到滚动位置，纯 CSS 实现，不需要滚动监听 JS。是视差与滚动进度条的最优解（跑在合成线程上）。

浏览器自动为新旧两个状态截图并做补间，几行代码换来原生级的页面/状态切换动画。SPA 与多页应用都能用。

让 tooltip / 下拉 / 气泡自动贴住触发元素，还能在空间不足时自动翻转方向。以前必须用 Popper/Floating UI 这类 JS 库。

给元素加 popover 属性 + 一个按钮配 popovertarget，就得到一个自动支持顶层渲染、点击外部关闭、Esc 关闭的浮层。零 JS。

<dialog> + .showModal() 一行得到一个真模态：自动焦点锁定、自动遮罩、自动 Esc 关闭、自动惰化背景。

一个 <details> 包一个 <summary> 就是可折叠区块，天生支持键盘、天然可访问、完全零 JS。accordion 的最省事做法。

一行 accent-color 就让原生的复选框、单选框、滑块、进度条跟随品牌色，不用再自绘控件。

在 CSS 里按比例混合两种颜色，做悬停变深、禁用变淡、色调叠加，不用再手动算十六进制值。

感知均匀的色彩空间：同样的 L 值在任意色相下「看起来一样亮」。生成色阶时不会出现某个色相莫名发暗或发灰。

用形状或渐变把元素「剪」出来：圆形、三角、波浪、渐隐。做非矩形图片与渐变淡出最干净的方式。

让上下图层按数学方式混合，做出自动反色、正片叠底、叠加发光等效果。文字在色块上自动反色就是它的经典用法。