uc和qq浏览器旧版不支持@container、:has()、@layer等现代css特性，需双重ua+全局对象检测并降级为媒体查询+resizeobserver（uc不支持时fallback轮询）。
UC 和 QQ 浏览器（尤其 Android 端旧版）对 @container、:has()、@layer 等现代 CSS 特性基本不识别，直接忽略或报解析错误——这不是写法问题，是内核根本没实现。必须降级或绕过，不能指望 polyfill。
判断是否运行在 UC/QQ 旧内核环境
仅靠 navigator.userAgent 不可靠：UC 会伪造 Chrome 版本号，QQ 浏览器可能伪装成 Safari。必须双重检测：
- 检查 UA 是否含
/UCBrowser\/\d+\.\d+/i或/MQQBrowser\/\d+\.\d+/i - 同时验证
typeof window.ucweb === 'object'（UC）或typeof window.mqq === 'object'（QQ）是否为真 - 封装函数时避免在非目标环境执行冗余逻辑：
if (isUcOrQqOld()) { applyLegacyStyles(); }
容器查询（Container Queries）的降级方案
@container 在 UC/QQ 中完全无效，container-type 声明会被静默丢弃。不能只加前缀，必须回退到视口媒体查询 + JS 监听容器尺寸：
- 用
ResizeObserver监听关键容器宽度变化（注意：UC 旧版不支持，需 fallback 到setTimeout轮询offsetWidth） - 手动切换类名：
el.classList.toggle('cq-sm', width ，再用普通类选择器写样式 - 避免在关键路径上依赖
@container；CMS 类系统中，可服务端预判容器宽并注入对应 class
:has() 选择器的兼容替代写法
.card:has(img) 这类选择器在 UC/QQ 中直接失效，且无 polyfill 可用（CSS 解析层缺失）。必须改用 JS 标记或结构约束：
- JS 检测子元素后添加标记类：
card.querySelectorAll('img').length && card.classList.add('has-img') - 结构上强制约定：含图片的卡片统一用
.card--with-img类，由模板/组件层控制 - 表单验证场景慎用
:has(:invalid)：UC 下整个规则块被跳过，导致无视觉反馈；改用 JS 监听input事件 + 动态加.is-invalid
@layer 的实际影响与规避方式
@layer 本身不会导致崩溃，但 UC/QQ 会忽略该声明，后续规则按原始顺序级联——这会破坏你预设的权重结构。重点不是“不支持”，而是“不生效却假装支持”：
- 不要在生产 CSS 中混用
@layer和未分层规则；全部规则必须显式归入某 layer，否则降级后顺序混乱 - 构建时用 PostCSS 插件（如
postcss-layer）将@layer展开为带命名空间的 class，例如@layer components { .button {...} }→.layer-components-button {...} - 如果项目已用
@layer，务必在 UC/QQ 环境下禁用 CSS-in-JS 的动态注入逻辑，防止 layer 声明被插入 DOM 后引发解析异常
真正棘手的不是语法报错，而是这些特性在旧内核里“静默失效”——页面看起来正常，但交互反馈、响应逻辑、样式隔离全乱了。上线前必须在真实 UC/QQ 安卓机上跑通 ResizeObserver 回退、:has() 的 JS 标记、以及 layer 展开后的 class 冲突检查。别信模拟器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
