10个css更新 - 技术栈

文章目录

- [1. Container Queries](#1. Container Queries)
- [2. :has()](#2. :has())
- [3. CSS Nesting（原生嵌套）](#3. CSS Nesting（原生嵌套）)
- [4. Anchor Positioning API（锚定定位）](#4. Anchor Positioning API（锚定定位）)
- [5. Scroll-Linked Animations（滚动联动动画）](#5. Scroll-Linked Animations（滚动联动动画）)
- [6. if()（条件函数）](#6. if()（条件函数）)
- [7. @scope](#7. @scope)
- [8. Cascade Layers（级联层）](#8. Cascade Layers（级联层）)
- [9. 现代色彩函数](#9. 现代色彩函数)
- [10. Subgrid](#10. Subgrid)

1. Container Queries

过去我们都按屏幕宽度适配。布局简单还行；组件化之后就崩：卡片套格子、格子套侧栏、侧栏再塞进弹窗...... 你真正想要的是：组件响应它的容器，而不是整个窗口。

现在可以了。

css 复制代码

.card-wrap {
	container-type: inline-size;
	container-name: card;
}

@container card (min-width:280px) {
.card { padding: 24px; font-size: 1rem; }
}
@container card (max-width:279px) {
.card { padding: 12px; font-size: .9rem; }
}

给父级起名（container-name），用 @container 按容器尺寸写样式。不需要 JS Hack，不需要 ResizeObserver。组件真正可复用，丢到哪里都能自适应。

2. :has()

CSS 终于有了条件感知。以前你不能根据子元素去选中父元素，只能上 JS："如果这张卡里有图片就加个 class"。

现在 CSS 自己会判断：

css 复制代码

form:has(input:invalid) {
  border: 2px solid red;
}

.post:has(img) {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1rem;
}

把 :has() 当成全民呼唤多年的父选择器。它是响应式的关系选择。但也危险：复杂选择器会炸性能（比如 div:has(.card:has(img[src$=".gif"])) 这类组合），浏览器很努力，但别虐它。

Verdict：Fuck.用得好是神，用过头会卡成 PPT。

3. CSS Nesting（原生嵌套）

用过 Sass/Less 的人都"假装"写了多年，现在原生支持：

css 复制代码

.header {
padding: 1rem;
  & h1 {
    margin: 0;
    font-size: 1.5rem;
  }
  & nav {
    display: flex;
    gap: 1rem;
    & a {
      text-decoration: none;
      color: inherit;
    }
  }
}

少写重复选择器，没了构建依赖。但别五层嵌套，那是自杀式可维护性。保持浅层结构。

Verdict：Fuck.这就该是 CSS 的本来面目。

4. Anchor Positioning API（锚定定位）

终于有了原生的工具提示/下拉/气泡的"跟随定位"。以前全是 JS 去绑位置、监听滚动、计算边界。

css 复制代码

<button class="btn">Click me</button>
<div class="tooltip">Tooltip text here</div>

css 复制代码

.btn {
anchor-name: --btn;
}

.tooltip {
position: absolute;
position-anchor: --btn;
bottom: anchor(top);
left: anchor(center);
transform: translateX(-50%);
position-try-fallbacks: flip-block;
background: #222; color: #fff;
padding: 6px12px; border-radius: 4px;
}

按钮成为锚点。

tooltip 相对锚点定位。

没空间会自动翻转。零 JS，无 getBoundingClientRect()，无 scroll 监听。

兼容性目前Chromium 领先，其他在路上。等全覆盖，你会忘了那些定位库。

Verdict：Fuck（但目前主要在 Chrome 系里）。被低估的顶级新 API。

5. Scroll-Linked Animations（滚动联动动画）

你见过"滚动即动画"的页面，大多是超负荷 JS + 超耐心调试。现在 CSS 内建：

css 复制代码

@scroll-timeline --page-tl {
source: auto;
orientation: block;
}

header.logo {
animation: fade 1s linear both;
animation-timeline: --page-tl;
animation-range: 020%;
}

@keyframes fade {
from { opacity: 1; transform: translateY(0); }
to   { opacity: 0; transform: translateY(-20px); }
}

动画直接绑定滚动进度，更流畅、更易读，不再依赖庞大 JS 库。

Verdict：Fuck.简单、顺滑、优雅。

6. if()（条件函数）

CSS 终于能做小决策。像逻辑，但没完全变编程语言

css 复制代码

.button {
  padding: if(style(--compact: true): 6px 10px; else: 12px 18px);
  background: if(prefers-color-scheme: dark: #222; else: #fff);
}

可以检查自定义属性、系统偏好等，内联决策。

Verdict：Mixed.偶尔妙用，滥用会混乱。

7. @scope

小招解决大痛点。全局 CSS 是混沌：一个 footer 里的 .card img 就能炸整个站。

@scope 把样式限定在局部：

css 复制代码

@scope (.card) {
  img { border-radius: 8px; }
  h3  { margin-bottom: .5rem; }
}

像平民版 Shadow DOM，没有复杂性。终于可以局部组件化，不必把类名写成 card__image__inner 那种"欧洲中世纪姓氏"。

Verdict：Fuck.组件样式回到可控轨道（React 用户会想起 *.module.css 的舒适感）。

8. Cascade Layers（级联层）

花半小时找"为什么样式没生效"？多半是级联"心情不好"。层让优先级可设计：

css 复制代码

@layer reset, base, components, utilities;

@layer base {
  button { border-radius: 6px; }
}
@layer components {
  .btn { padding: .6rem 1rem; }
}
@layer utilities {
  .btn { text-transform: uppercase; }
}

你知道谁赢、为什么赢。把级联从敌人变工具。

Verdict：Fuck.不是酷炫，但救心智。

9. 现代色彩函数

设计师终于有讲理的颜色了。

css 复制代码

:root {
  --brand: oklch(60% 0.16 210);
}

.button {
  background: color-mix(in oklch, var(--brand) 80%, white 20%);
  color: color-contrast(var(--brand) vs white, black);
}

在 CSS 里直接混色、对比、偏移。 OKLCH/LAB 更符合人眼感知，渐变更顺滑、跨设备更稳定。它不仅更好看，更可预测。

Verdict：Fuck.低调但专业感爆棚。

10. Subgrid

修了布局史上最"智障"的坑。父网格 + 子网格=永远对不齐。subgrid 直接继承父网格轨道：

css 复制代码

.pricing {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

.card {
  display: grid;
  grid-template-rows: subgrid;
}

子网格继承父级的轨道尺寸，嵌套完美对齐。不花哨，但无可替代。

Verdict：Fuck.布局体系的无声英雄。

Personal Take（主观总结）

2025 的 CSS 让人心安：不再追着 JS 吃灰，结构、逻辑、清晰度都有了，同时保留了简洁。

但权力即代价：越强的 CSS 越容易写出技术惊艳、维护地狱的代码。请聪明地用：用新特性简化代码，而不是炫技。未来的你会感谢现在的你。

因为头一回，CSS 不只是"给页面上色"------它在"构建"页面。