米侠浏览器旧版内核不支持clip-path、color-mix、has等现代css特性，需通过caniuse查兼容性、开发者工具验证、@supports安全包裹、切换系统内核+桌面ua、或手动降级写法来保障渲染。
米侠浏览器旧版内核（如X5 v3.0或系统WebView Android 10以下版本）遇到clip-path: polygon()、color-mix()、has()选择器等现代CSS3语法时直接静默忽略，页面样式断裂且控制台无报错，必须主动降级或绕过不支持特性才能保证基础渲染可用。
确认当前内核对CSS3特性的实际支持边界
访问 https://caniuse.com → 搜索目标属性（如“clip-path”）→ 查看“Android Browser”与“QQ浏览器”两栏对应版本的绿色支持标记；若米侠当前内核版本号低于该栏中标注的首个支持版本，则说明该特性不可用，不能依赖其生效。
在问题页面按F12打开开发者工具 → 切换到“Elements”面板 → 点击目标元素 → 在右侧“Styles”中观察含现代语法的声明是否被划掉（灰色横线）或完全不显示；被划掉即代表内核解析失败，此时需替换写法。
用@supports规则做安全包裹
先写基础样式：【fallback必须裸写在外层，不可包裹在@supports块内】，例如：background-color: #4a6fa5;；再写检测块：@supports (color: oklch(0% 0 0)) { background-color: oklch(60% 0.2 240); }。
检测语句必须合法：想判断color-mix()是否可用，不能写@supports (color-mix: )，而要写@supports (color-mix(in srgb, black, white))——括号内必须是完整调用形式，否则整块规则被浏览器丢弃。
IE11及老旧WebView根本不识别@supports语法，整块规则会被跳过，所以外层fallback是唯一兜底手段。
切换内核并启用标准CSS渲染路径
第一步：切换内核
① 点击右下角菜单（三个点）→ “设置” → “高级设置” → “内核与UA设置”
② 将“浏览器内核”改为“系统内核”，同时把“UA标识”设为“桌面版”
③ 重启浏览器 —— 仅刷新页面无效，新内核上下文不会加载
第二步：强制激活Blink引擎CSS能力
① 地址栏输入 mi://flags → 搜索“css-render”
② 将“Enable CSS Animation Compositor”设为Enabled
③ 将“Disable GPU rasterization for animations”设为Disabled
④ 重启生效
系统内核+桌面UA组合能绕过X5对Flex/Grid/CSS变量的解析缺陷，使gap、aspect-ratio等属性恢复可用。
手动降级为兼容性写法
方法一：用clip-path替代方案
不用clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%)，改用overflow: hidden + 绝对定位子容器裁剪，或用SVG <clippath></clippath>内联嵌入。
方法二：用rgba()代替oklch()/color-mix()
【不能用hex值作rgba() fallback】，例如background-color: rgba(74, 111, 165, 0.9)可被所有旧内核识别，但background-color: #4a556880（带alpha的8位hex）在X5 v3.0中会彻底失效。
方法三：用:not()模拟:has()
原写法article:has(> .featured)不被支持，改为给.featured父级加类has-featured，再用article.has-featured选择，由JS动态添加该类。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
