CSS 容器查询迁移到 style() 条件：旧写法影响与回归检查

组件主题从“宽度够不够”变成“当前密度是什么”时，继续堆叠 @container (min-width: ...) 往往会让 CSS 规则越来越难维护。更稳妥的迁移方式，是先把主题状态放进自定义属性，再用 @container style() 读取它，同时保留尺寸查询和旧浏览器回退。

先区分尺寸查询与样式条件

尺寸容器查询回答的是“容器有多宽”，例如卡片超过 36rem 后把两列内容改成横排。style() 条件回答的是“容器当前带着什么样式状态”，例如密度变量为 compact 时缩小间距。两者可以组合，但它们依赖的证据不同。

这里先用一个小组件说明边界。主题状态挂在 .panel 上，组件自身成为容器：

.panel {
  container: panel / inline-size;
  --density: comfortable;
}

.result-card {
  padding: 1rem;
  gap: 1rem;
}

@container panel (min-width: 36rem) {
  .result-card {
    grid-template-columns: 1fr auto;
  }
}

这段规则只知道可用空间，不知道密度。迁移的第一步不是立即删除它，而是给状态建立明确归属。

迁移时把状态放进容器边界

下面的写法把 --density 放在容器上，并把样式条件作为增强规则。基础样式先保证内容可读，支持条件命中后再调整间距。

.panel {
  container: panel / inline-size;
  --density: comfortable;
}

.panel[data-density="compact"] {
  --density: compact;
}

.result-card {
  display: grid;
  gap: 1rem;
  padding: 1rem;
}

@supports (container-type: inline-size) {
  @container panel style(--density: compact) {
    .result-card {
      gap: .5rem;
      padding: .625rem;
    }
  }
}

这时 style() 的职责很窄：读取 panel 容器的样式状态。不要把它写成全局主题开关，也不要假定任意祖先变量都能被当前容器查询到。

旧规则、新规则和优先级怎么共存

真实项目通常不会一次性切掉所有尺寸查询。可以保留“宽度决定布局、密度决定间距”的分工：

两条容器规则同时命中时，按层叠规则和源码顺序检查结果，不要只在宽屏桌面上看一眼。特别是嵌套卡片，如果内外层都声明了容器名，查询目标必须写清楚。

用回归用例确认迁移没有漏状态

我更建议把检查拆成四组，每组只验证一个事实：宽度变化不会意外改变密度；切换 data-density 能改变间距；变量未设置时仍有默认值；不支持 style 条件时基础布局没有塌掉。

/* 默认状态：内容应该保持可读 */
document.querySelector('.panel').dataset.density = 'comfortable';

/* 紧凑状态：只改变密度相关样式 */
document.querySelector('.panel').dataset.density = 'compact';

浏览器开发者工具里重点看容器元素的 Computed 面板：先确认 --density 的最终值，再看 gap 和 padding 是否来自预期的容器规则。若变量值正确但规则未命中，优先检查容器声明、查询名和目标浏览器支持，不要先提高选择器权重。

常见误区与迁移清单

• 把 style() 当作任意祖先选择器：先确认被查询元素所在的容器边界。
• 只保留新规则：至少保留基础间距和布局，给不支持新能力的环境留下可用结果。
• 混用多个容器名却不写目标：为组件容器起稳定名称，嵌套场景逐层核对。
• 只测一个主题：至少覆盖默认、紧凑、变量缺失和窄容器四个状态。

相关问题

style() 条件能替代所有媒体查询吗？

不能。媒体查询针对视口或设备环境，容器样式条件针对组件容器状态；它们解决的判断对象不同。

为什么自定义属性写在祖先节点却没有命中？

容器查询需要在目标容器的样式上下文中找到可用状态。把变量明确放到容器上，或确认继承链没有被中断，通常更容易排查。

不支持 style() 的浏览器怎么办？

用基础样式提供可读结果，再用 @supports 包住增强规则，并把目标浏览器矩阵纳入发布前回归。

迁移后的最小验收标准

完成迁移并不等于代码能解析。至少确认：宽度分支仍按容器尺寸工作，密度变量在容器边界内可追踪，新规则命中后只改变预期的间距属性，旧环境仍能显示完整内容。达到这四点，再考虑清理已经没有调用方的旧规则。