用@supports处理浏览器差异，兼容性不愁了！

博客主页瑕疵的CSDN主页 Gitee主页瑕疵的gitee主页⏩ 文章专栏《热点资讯》用supports处理浏览器差异兼容性不愁了目录昨晚又在Chrome和Safari之间反复横跳。Chrome 110跑得飞起Safari 14一打开按钮变灰色——报错Uncaught ReferenceError: var is not defined。笑死就因为一个CSS变量上线前没处理兼容。问题出在哪老浏览器不认var(--color)。IE、Edge Legacy、Safari 14以下直接忽略整个变量。写代码时以为主流浏览器都支持结果测试用例只在Chrome跑。上线后用户反馈移动端按钮全白屏。核心根源CSS变量Custom Properties是2018年才被主流浏览器支持的。IE彻底没戏Safari 14以下也得用回退方案。浏览器渲染引擎会直接跳过不支持的属性导致样式失效或报错。不是JS问题纯CSS层的兼容坑。解决代码用supports包裹新特性代码浏览器自动判断。不用JS不用额外库一行搞定。错误写法踩坑版/* 旧代码老浏览器直接报错样式全崩 */:root{--primary-color:#3498db;/* 旧浏览器不认这个 */}.btn{background:var(--primary-color);/* 报错 */}正确写法优雅版/* 1. 用supports包裹支持新特性的代码 */supports(display:grid){/* 选个浏览器支持的属性比如display: grid */:root{--primary-color:#3498db;}.btn{background:var(--primary-color);/* 新浏览器用这个 */}}/* 2. 必须写回退样式 */.btn{background:#ccc;/* 旧浏览器用这个避免空白 */}关键点supports (display: grid)里的条件随便写个浏览器支持的属性就行比如color: #000也行但display: grid更通用。回退样式必须写在supports外面。否则旧浏览器啥都没有。避坑总结别用supports (color: #000)这种无意义条件——浏览器都支持等于没写。用display: grid或flex更可靠。测试时别只在Chrome跑。用Chrome DevTools的Device Mode切换Safari 14或IE11。如果真要支持IE优先用supports回退。别用JS动态加样式比如document.body.style.setProperty(--color, #3498db)性能差还容易漏。代码注释要写清楚。我见过同事写/* 兼容处理 */结果没写回退上线崩了。上周被老板骂惨就因为这个坑。现在直接用supports写完测一遍Safari就完事。以前总用JS处理兼容写得跟屎一样。现在纯CSS搞定爽多了。记住浏览器差异不是问题是机会。用好原生CSS特性比加一堆polyfill简单10倍。别等用户投诉了才改——写代码时就加个supports省得半夜被拉起来修。