CSS如何应对旧版浏览器的兼容性倒退_SCSS条件判断技巧

SCSS的@if仅在编译期生效，无法检测浏览器运行时能力；@supports由浏览器执行，IE11忽略其规则，需配合手动变量（如$legacy-support）或JS特性检测实现兼容性降级。

SCSS 本身不参与运行时兼容性判断，@supports 或浏览器检测必须在 CSS 层或 JS 层完成；SCSS 的 @if 只能在编译期做静态分支，无法响应 IE11 是否支持 flex 这类运行时事实。

SCSS @if 只能判断变量/函数/配置，不能判断浏览器能力

很多人误以为可以用 @if feature-exists(display: flex) 或类似写法让 SCSS 自动降级，这是错的。SCSS 编译器根本不知道目标浏览器是否支持某个 CSS 特性——它只处理源码文本，不解析渲染规则。

• @if $use-flex == true 可行，但这个 $use-flex 是你手动设的布尔变量，不是自动探测结果
• feature-exists() 只能查 SCSS 内置函数（如 darken()）或自定义函数是否存在，和 CSS 特性无关
• 试图用 @if str-index($css, 'flex') 做字符串匹配，属于 hack 行为，不可靠且违背语义

真正可用的编译期条件：用变量开关控制多套输出

适合已知目标环境（如“本项目必须支持 IE11”），通过一个顶层开关统一生成带 -ms- 前缀 + float 降级的 CSS。

• 定义 $legacy-support: true，然后在 mixin 中分支：
  

  @mixin flex-center {<br>  @if $legacy-support {<br>    display: -ms-flexbox;<br>    display: flex;<br>    -ms-flex-pack: center;<br>    justify-content: center;<br>  } @else {<br>    display: flex;<br>    justify-content: center;<br>  }<br>}

• 避免每个属性都写 @if，把整套旧语法封装进 mixin，保持调用简洁
• 如果同时要输出纯 float 版本，另建 @mixin float-grid，用 @if 切换整个布局方案，而不是混写 float 和 flex

为什么不用 @supports 写在 SCSS 里

@supports (display: flex) 是标准 CSS 规则，SCSS 编译后原样保留，由浏览器在运行时执行。把它写在 SCSS 文件里没问题，但要注意：

立即学习“前端免费学习笔记（深入）”；

• IE11 完全忽略 @supports 块（包括里面的规则），所以它不会触发降级——你需要额外提供无 @supports 包裹的 IE 专用样式
• 不能依赖 @supports not (display: flex) 给 IE 写 fallback，因为 IE11 不解析这整条规则，里面的内容根本不会生效
• 正确做法是：现代样式用 @supports 包裹；IE 专用样式单独写在外部，或用 @if $legacy-support 输出到独立文件中

最易被忽略的一点：SCSS 的条件能力仅限于构建时决策。如果你需要根据用户实际浏览器动态切换主题或布局，必须用 JS 检测 CSS.supports() 或 UA 字符串，再切换 class 或加载对应 CSS —— 这部分完全脱离 SCSS 范畴。