使用CSS @supports检测浏览器支持度 - 智猿学院-IT界的百科全书

CSS @supports：浏览器，别装了，你到底行不行？

话说江湖上行走，最怕的就是遇到“表面兄弟”。你以为他跟你穿一条裤子，结果关键时刻掉链子，给你挖坑。前端开发这行，也常常碰到这种“表面浏览器”。你辛辛苦苦写了一堆炫酷的CSS3新特性，结果在某些浏览器里直接瘫痪，整个页面丑得让人想砸电脑。

这种时候，我们就需要一个“测谎仪”——CSS的 @supports 规则。它就像一个老练的江湖郎中，专门给浏览器把脉，看看它到底是不是真的“肾好”。

@supports 是个啥玩意儿？

简单来说，@supports 是一个CSS条件规则，它可以让你检测浏览器是否支持某个CSS特性。如果支持，就应用花括号里的CSS样式；如果不支持，就跳过。

你可以把它想象成一个“if…else…”语句，只不过它针对的是浏览器的CSS特性支持度，而不是JavaScript里的变量。

语法结构：

@supports (property: value) {
  /* 如果浏览器支持 property: value，就应用这里的样式 */
}

@supports not (property: value) {
  /* 如果浏览器不支持 property: value，就应用这里的样式 */
}

@supports (condition) and (condition) {
  /* 如果浏览器同时支持 condition1 和 condition2，就应用这里的样式 */
}

@supports (condition) or (condition) {
  /* 如果浏览器支持 condition1 或 condition2，就应用这里的样式 */
}

property: CSS属性名，例如 display、grid、transform 等。
value: CSS属性值，例如 grid 属性的 grid 值，transform 属性的 scale(2) 值。
not: 表示“不支持”。
and: 表示“并且”，需要同时满足多个条件。
or: 表示“或者”，只需要满足其中一个条件。

举个栗子：让不支持 Grid 布局的浏览器也能愉快玩耍

Grid 布局现在很流行，但是总有些“老顽固”浏览器不支持。为了照顾它们，我们可以用 @supports 来实现优雅降级。

.container {
  display: flex; /* 默认使用 Flexbox 布局 */
  flex-wrap: wrap;
}

.item {
  width: 25%; /* 在 Flexbox 布局下，每个元素占 25% 的宽度 */
}

@supports (display: grid) {
  .container {
    display: grid; /* 如果浏览器支持 Grid 布局，就切换到 Grid 布局 */
    grid-template-columns: repeat(4, 1fr);
  }

  .item {
    width: auto; /* 在 Grid 布局下，宽度由 Grid 自动分配 */
  }
}

在这个例子中，我们先用 Flexbox 布局作为默认方案，确保所有浏览器都能正常显示。然后，用 @supports (display: grid) 检测浏览器是否支持 Grid 布局。如果支持，就切换到 Grid 布局，并调整元素的宽度。

这样，即使在不支持 Grid 布局的浏览器中，页面也能正常显示，只是布局略有不同。这就是所谓的“优雅降级”，让用户体验尽可能地好。

再来个栗子：让不支持 backdrop-filter 的浏览器也拥有磨砂效果

backdrop-filter 属性可以给元素后面的区域添加模糊、颜色偏移等效果，实现类似毛玻璃的磨砂效果。但是，有些浏览器可能不支持这个属性。

.modal {
  background-color: rgba(0, 0, 0, 0.5); /* 默认半透明背景 */

  @supports (backdrop-filter: blur(10px)) {
    background-color: rgba(255, 255, 255, 0.2); /* 支持 backdrop-filter 的浏览器使用更透明的背景 */
    backdrop-filter: blur(10px); /* 添加模糊效果 */
  }
}

在这个例子中，我们先设置一个半透明的背景色，作为默认方案。然后，用 @supports (backdrop-filter: blur(10px)) 检测浏览器是否支持 backdrop-filter 属性。如果支持，就使用更透明的背景色，并添加模糊效果。

这样，在不支持 backdrop-filter 的浏览器中，只会显示一个半透明的背景，也能起到一定的遮罩效果。而在支持 backdrop-filter 的浏览器中，就能看到真正的磨砂效果。

@supports 的妙用：不只是简单判断

@supports 的强大之处在于，它不仅可以判断浏览器是否支持某个特性，还可以进行更复杂的条件判断。

多重条件判断： 可以用 and 和 or 组合多个条件，实现更精细的控制。

@supports (display: flex) and (appearance: none) {
  /* 只有同时支持 Flexbox 布局和 appearance 属性的浏览器才会应用这里的样式 */
}

@supports (transform: rotate(30deg)) or (transform: scale(2)) {
  /* 只要支持旋转或缩放的浏览器就会应用这里的样式 */
}

否定判断： 可以用 not 来判断浏览器是否不支持某个特性。
```
@supports not (pointer-events: none) {
  /* 如果浏览器不支持 pointer-events: none，就应用这里的样式 */
}
```
这个例子可以用来给不支持 pointer-events: none 的浏览器添加一些额外的样式，例如显示一个提示信息，告诉用户这个元素无法点击。
特性查询： @supports 还可以用来查询浏览器是否支持某个CSS特性，即使这个特性没有特定的值。
```
@supports selector(:focus-visible) {
  /* 如果浏览器支持 :focus-visible 伪类，就应用这里的样式 */
}
```
:focus-visible 是一个比较新的伪类，它可以根据用户的输入方式（例如键盘、鼠标、触摸屏）来决定是否显示焦点样式。

@supports 的注意事项：别踩坑里了！

虽然 @supports 很强大，但是在使用时也要注意一些细节，否则可能会掉坑里。

不要过度依赖： @supports 只是一个辅助工具，不要过度依赖它。如果某个特性是页面正常显示所必需的，那么最好提供一个备用方案，而不是完全依赖 @supports。
注意浏览器兼容性： 虽然 @supports 本身具有一定的兼容性，但是有些老版本的浏览器可能不支持它。因此，在使用 @supports 时，最好也考虑一下老版本浏览器的兼容性。
避免复杂的条件判断： 虽然 @supports 可以进行复杂的条件判断，但是过度复杂的条件判断可能会导致代码难以维护。因此，尽量保持条件判断的简洁明了。
测试！测试！再测试！ 在使用 @supports 之前，一定要在不同的浏览器中进行充分的测试，确保代码能够正常工作。

@supports：你的CSS探险好伙伴

总而言之，@supports 是一个非常实用的CSS工具，它可以帮助我们检测浏览器是否支持某个CSS特性，从而实现优雅降级和渐进增强。有了它，我们就可以更加放心地使用CSS3新特性，而不用担心在某些浏览器中出现问题。

下次你在写CSS的时候，不妨试试 @supports，让它成为你的CSS探险好伙伴，带你避开浏览器的“坑”，创造出更加炫酷、更加兼容的网页。

记住，好的前端工程师，不仅要会写代码，还要懂得如何与浏览器“斗智斗勇”，而 @supports 就是你的秘密武器！

CSS @supports：浏览器，别装了，你到底行不行？

发表回复 取消回复

发表回复取消回复