Hi，我是前端人类学！

曾经需要 JavaScript + 复杂类名才能做到的事，现在三行 CSS 就能搞定。

2023-2025 年，CSS 迎来了历史上最密集的一次能力爆发。容器查询和 :has() 已在 Chromium 105 中正式推出，两者在响应式设计中堪称“绝配”。而 CSS 变量作为基础能力，让这一切变得可维护、可主题化。

今天我们不聊概念，直接上实战——看这三个特性如何联手解决真实场景中的棘手问题。

---

---

一、CSS 变量：一切灵活性的底座

CSS 变量（自定义属性）早已不是新东西，但在容器查询和 :has() 的加持下，它的价值被彻底放大了。变量让样式逻辑变得可配置、可继承，成为连接其他新特性的“总线”。

:root {
  --card-padding: 1.5rem;
  --card-radius: 12px;
  --card-bg: #ffffff;
}

有了变量，后续所有新特性都可以围绕它构建动态逻辑，而不是硬编码具体值。

二、容器查询：让组件“自带响应式”

这是近年来需求呼声最高的功能之一。容器查询与媒体查询类似，但评估依据是容器的大小而非视口大小。

2.1 核心用法：卡片根据容器宽度自动切换布局

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

.card {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
  .card {
    grid-template-columns: 1fr;
  }
}

当容器宽度小于 400px 时，卡片从双列切换为单列。无论这个卡片被放到页面的哪个位置，它都能自适应——这才是真正的“组件级响应式”。

2.2 实战案例：Netflix 团队的经验

Netflix 团队采用容器查询后，某些组件的 CSS 代码减少了高达 30%，同时完全消除了对 JavaScript 布局管理的依赖。团队一位成员感叹：“CSS 从一开始就应该是这样运作的。”

具体来说，容器查询带来的变化是根本性的：

之前（需要 JavaScript）：

const card = document.querySelector('.card');
function adjustLayout() {
    if (window.innerWidth >= 900) {
        card.style.width = '33.33%';
    } else if (window.innerWidth >= 600) {
        card.style.width = '50%';
    } else {
        card.style.width = '100%';
    }
}
window.addEventListener('resize', adjustLayout);

之后（纯 CSS）：

.container {
  container-type: inline-size;
}
.card { width: 100%; }
@container (min-width: 600px) { .card { width: 50%; } }
@container (min-width: 900px) { .card { width: 33.33%; } }

这不仅减少了代码量，还避免了运行时计算的性能开销。

三、:has()：终于等来的“父选择器”

:has() 伪类是 CSS 史上最受期待的功能之一。它让开发者能够根据子元素来选择父元素——这在过去是做不到的。

3.1 核心语法：父元素根据子元素条件被选中

/* 选中包含 .featured 子元素的 section */
section:has(.featured) {
  border: 2px solid blue;
}

:has() 的参数是相对选择器列表，支持任意选择器组合，从 2023 年 12 月起已获得主流浏览器广泛支持。

3.2 实战案例一：表单验证状态管理

结合 :valid / :invalid 伪类，form-group 可以根据输入框状态自动调整样式：

.form-group:has(:invalid) {
  --color: red;
}
.form-group:has(:focus) {
  --color: blue;
}
.form-group:has(:valid) {
  --color: green;
}
/* 只有当字段无效且未聚焦时才显示错误信息 */
.form-group:has(:invalid:not(:focus)) .form-group__error {
  display: block;
}

这套方案被 Policybazaar 团队用于实际生产，完全替代了基于 JavaScript 的表单验证逻辑，而且体验更流畅。

3.3 实战案例二：卡片根据内容自动调整布局

Jhey Tompkins 的演示展示了 :has() 与容器查询的组合威力。当卡片包含图片时，采用双列布局；不包含图片时，自动切换为单列，同时标题字体更大：

/* 包含图片 → 双列 */
.card:has(.visual) {
  grid-template-columns: 1fr 1fr;
}

/* 不包含图片 → 标题放大 */
.card:not(:has(.visual)) h1 {
  font-size: 4rem;
}

3.4 实战案例三：电商平台的实际应用

Tokopedia 的商品详情页中，当缩略图包含视频播放图标时，自动叠加半透明遮罩层，完全不需要 JavaScript：

.thumbnailWrapper:has(.playIcon)::after {
  content: '';
  background: rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
}

四、三者组合：1+1+1 > 3

案例：响应式卡片系统

/* 1. 定义变量作为设计令牌 */
:root {
  --card-gap: 1rem;
  --card-radius: 12px;
}

/* 2. 容器查询驱动布局切换 */
.card-container {
  container-type: inline-size;
}
.card {
  display: grid;
  gap: var(--card-gap);
  border-radius: var(--card-radius);
}

@container (min-width: 500px) {
  .card { grid-template-columns: 1fr 1fr; }
}

/* 3. :has() 根据内容微调样式 */
.card:has(.featured-badge) {
  border-left: 4px solid #ff6b6b;
  --card-radius: 16px;
}
.card:not(:has(img)) {
  padding: 2rem;
}

这套系统的优势：

• CSS 变量：所有设计决策集中管理，一键换主题
• 容器查询：布局逻辑绑定到组件自身，随处复用
• :has()：内容驱动样式，无需维护额外类名

五、性能与兼容性注意事项

:has() 的性能陷阱

:has() 的某些用法会显著影响页面性能。核心原则：约束锚点选择器和内部选择器的范围。

❌ 避免过于宽泛的锚点：

body:has(.sidebar) { /* 会检查 body 下所有变化 */ }
*:has(.item) { /* 极不推荐 */ }

✅ 使用具体的容器作为锚点：

.container:has(.sidebar-expanded) { /* 范围可控 */ }
.gallery:has(> img[data-loaded="false"]) { /* 子选择器约束了遍历范围 */ }

浏览器兼容性

• 容器查询：所有主流浏览器已支持（Chrome 105+, Firefox 110+, Safari 16.4+）
• :has()：Baseline 2023，自 2023 年 12 月起广泛可用
• CSS 变量：所有现代浏览器支持，兼容性无需担心

如需兼容旧版浏览器，可使用 @supports 做渐进增强：

@supports selector(:has(*)) {
  /* :has() 可用时的增强样式 */
}

容器查询也可通过 polyfill 回退。

---

CSS 变量、容器查询和 :has() 的组合，正在重塑我们写样式的方式。它们让 CSS 第一次拥有了真正的组件化能力——样式逻辑附着在组件自身，而不是依赖外部上下文或 JavaScript 的干预。

正如 Netflix 团队所说：“这让生活变得更轻松了。”