在css3中检测浏览器是否支持自定义属性（custom properties，即css变量）与特性查询，核心方法是使用 @supports 规则结合 var() 函数。如果浏览器支持自定义属性，@supports (color: var(--test)) 将返回 true；否则为 false。通过这种方式，你可以编写兼容代码，在不支持的旧浏览器中提供降级样式。
如何检测浏览器对CSS自定义属性的支持？
要检测浏览器是否支持CSS自定义属性，可以使用 @supports 规则测试 var() 函数的有效性。例如，@supports (color: var(--c)) 会检查浏览器是否能解析 var()。如果支持，则执行块内样式；如果不支持，则执行 @supports not 块中的降级样式。这种方法简单且广泛兼容现代浏览器。
/* 检测CSS自定义属性支持 */
@supports (color: var(--test)) {
/* 支持自定义属性的浏览器 */
.box {
color: var(--primary-color);
}
}
@supports not (color: var(--test)) {
/* 不支持的浏览器降级处理 */
.box {
color: #000; /* 默认黑色 */
}
}上述代码中，.box 元素在支持 var() 的浏览器中使用自定义属性 --primary-color 设置颜色，而在不支持的浏览器中回退到固定颜色 #000。这是确保跨浏览器兼容性的标准做法。
立即学习“前端免费学习笔记（深入）”；
如何检测浏览器对CSS特性查询的支持？
检测浏览器对CSS特性查询（如 display: grid 或 flex）的支持，同样使用 @supports 规则。例如，@supports (display: grid) 会检查浏览器是否支持Grid布局。如果支持，则应用Grid样式；否则，应用Flexbox或其他降级方案。这种方法允许你根据浏览器能力动态调整样式。
/* 检测CSS Grid支持 */
@supports (display: grid) {
/* 支持Grid的浏览器 */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
}
@supports not (display: grid) {
/* 不支持Grid的浏览器降级处理 */
.container {
display: flex;
flex-wrap: wrap;
}
}在上述代码中，.container 在支持Grid的浏览器中使用三列布局，而在不支持的浏览器中使用Flexbox实现类似效果。这种策略确保了内容在不同浏览器中都能正确显示。
当自定义属性未定义时，CSS如何处理？
当自定义属性未定义时，var() 函数会使用其第二个参数作为回退值。例如，var(--undefined, #fff) 会在 --undefined 未定义时使用白色 #fff。这种行为是CSS规范的一部分，无需额外检测。开发者应始终提供合理的回退值，以避免样式失效。
