1
:has() 选择器
检测由 :has() 父选择器引起的视觉变化，这些选择器根据子元素条件性地设置样式。
40 测试用例
现代 CSS
现代 CSS 引入了强大的新功能，可能改变整个页面的渲染方式。Delta-QA 保持与最新 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 在每个浏览器上捕获网格截图并对比：错位的元素在差异图中清晰可见。