CSS如何根据浏览器支持引入样式_利用@supports进行条件加载

@supports 是 CSS 条件规则，用于声明式控制样式是否生效，不触发网络请求；需全写属性+值，支持 and/or/not 组合，兼容现代浏览器但 IE 完全不支持，不能实现按需加载 CSS 文件，该由 JavaScript 配合 CSS.supports() 实现。怎么用 @supports 检测浏览器是否支持某个 CSS 特性@supports 不是“加载样式”的指令，而是 CSS 的条件规则——它只决定某段样式是否生效，不触发网络请求或动态引入文件。想“根据支持情况加载不同 CSS 文件”，得靠 JavaScript 配合 @supports 查询结果来 link 或 import，纯 CSS 做不到。常见错误现象：@supports (display: grid) { .container { display: grid; } } 写对了，但发现旧版 Safari 仍尝试渲染 grid 样式（实际没效果），误以为检测失效——其实是检测本身成功了，只是浏览器解析时忽略不支持的声明，不报错也不阻断后续规则。检测必须写全属性+值，@supports (display: grid) 和 @supports (display: inline-grid) 是不同条件不能只写属性名：@supports (display) ? 语法错误，会整个规则块被丢弃支持逻辑组合：@supports (display: grid) and (not (user-select: none))，注意 and/or/not 前后必须有空格兼容性：Chrome 28+、Firefox 22+、Safari 9+、Edge 12+；IE 完全不支持，所有 @supports 规则会被直接跳过@supports 在真实项目里该放在哪儿别把它当“polyfill 入口”塞在全局顶层。优先用在组件级局部样式中，尤其是那些强依赖新特性的模块（比如用 aspect-ratio 做卡片、用 container-query 做响应式布局）。使用场景：你写了一个基于 scroll-snap-type 的轮播组件，但需要给不支持的浏览器 fallback 到 JS 驱动的滚动逻辑。这时 @supports 只负责关掉默认滚动行为，不负责加载 JS——JS 加载由外部逻辑控制。立即学习“前端免费学习笔记（深入）”； arXiv Xplorer ArXiv 语义搜索引擎，帮您快速轻松的查找，保存和下载arXiv文章。