1
:has() 选择器
检测由 :has() 父选择器引起的视觉变化，这些选择器根据子元素条件性地设置样式。
40 测试用例
现代 CSS
现代 CSS 提供了强大的工具——:has()、原生嵌套、@layer、subgrid、@scope、container queries、扩展的自定义属性——它们极大地简化了复杂界面的设计。这种强大的另一面是更易暴露于浏览器之间的支持差异和级联陷阱。一份依赖 :has() 来设置表单样式的样式表在最新版 Chrome 上完美工作，但在较旧版本的 Firefox 上可能失去所有视觉参照。用于在产品 grid 中对齐价格、描述和购买按钮的 subgrid 在不支持它的浏览器上可能完全错位，价格甚至不再对应正确的商品。组织不当的 @layer 会无声地反转规则的优先级，引入未正确 scope 的自定义属性可能污染多个组件，而构建过程不会发出任何警告。由于大多数团队在 Chrome 上开发和测试，这些回归往往要在生产环境中由用户本身发现。Delta-QA 通过在目标浏览器中捕获页面，并将渲染结果与对应的视觉 baseline 进行比较来处理该类别。Diff 突显尺寸错误的组件、不再生效的选择器、错位的网格，以及未按预期回退到 fallback 的现代 CSS 特性。这种多浏览器覆盖对于快速采用新 CSS 规范但无法在每种浏览器/版本组合上手动审计行为的团队尤为宝贵，避免支持差异性的回归在生产中演化为事故，加强视觉回归测试的可靠性。
我们检测什么
2
CSS 嵌套
监控原生 CSS 嵌套行为，捕获嵌套规则特异性的回归。
3
@layer 级联
跟踪可能意外覆盖样式的级联层顺序变化。
4
Subgrid
检测当父子网格容器之间的 subgrid 对齐中断时的布局变化。
5
@scope
监控作用域样式变化和影响组件级样式隔离的边界条件。
6
逻辑属性
捕获用于国际化就绪布局的逻辑属性（inline-start、block-end）变化。
实际场景
🎯
Container query 在某些浏览器上不生效
一位开发者使用 CSS container queries 让组件自适应容器，但忘记在父元素上定义 container-type。在 Chrome 上回退方案正常工作。在 Safari 上组件尺寸异常——偏大或偏小。iPhone 访客看到一个损坏的组件。团队在 Chrome 上开发和测试，没有在每个迭代中测试所有浏览器。Delta-QA 在每个浏览器上捕获截图并对比：Safari 上尺寸异常的组件在差异图中清晰可见。
⚠️
排除 Firefox 的 :has()
一位开发者使用 :has() 选择器来美化表单——字段填写时高亮标签，突出显示必填字段。在 Firefox（121 版本之前）上，:has() 不被支持：访客看到的表单没有任何视觉提示。团队在 Chrome 上开发，bug 在本地从未出现。Delta-QA 在每个浏览器上捕获表单截图并对比：Firefox 上缺失的样式在叠加图中清晰可见。
💡
子网格破坏对齐
一位开发者使用 subgrid 在产品网格中对齐价格、描述和按钮。在不支持 subgrid 的浏览器上，元素错位：价格不再与产品对齐，"购买"按钮高度各不相同。QA 在 Chrome（支持 subgrid）上验证过，没有测试其他浏览器。Delta-QA 在每个浏览器上捕获网格截图并对比：错位的元素在差异图中清晰可见。