现代 CSS 的隐藏超能力

很多开发者还在用几年前的 CSS 写法，但如今的原生 CSS 已经变得无比强大。

1. :has() 选择器 —— 真正的父选择器

/* 选择包含 .active 子元素的 .card 父元素 */
.card:has(.active) {
  border-color: #00fff0;
  box-shadow: 0 0 30px rgba(0, 255, 240, 0.4);
}

2. 容器查询 @container

终于可以根据父容器尺寸而非视口尺寸来调整样式了！

3. View Transitions API

无刷新路由切换有了原生动画支持：

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.4s;
}

4. color-mix()

在 CSS 中直接混色，无需预处理器。

5. 嵌套语法

原生支持嵌套，Sass 的一大优势不再。