使用 @supports 在 CSS 中进行特性检测

作者： 文章来源：

本文原地址：https://www.mimiwuqi.com/css/195157.html

CSS 中的新规则@supports可让您轻松检测访问者的浏览器中是否支持某个 CSS 功能。这样，您就可以仅在受支持的浏览器上使用这些功能，或者仅为不支持的浏览器定义特定规则，而其他浏览器则完全忽略它们。@supports是一种纯 CSS 方式，可以替代Modernizr之类的工具。@supports可让您测试某个功能是否受支持：

@supports (column-count: 3) {
  div { column-count: 3; }
}

不支持

当某个功能不受支持时，您可以按照以下方式测试并应用特定规则：

@supports not (display: flex) {
  .sidebar { float: left; }
}

使用 and / or 运算符链接多个 CSS 功能：

@supports (display: flex)
or (display: -webkit-box)
or (display: -webkit-flex)
or (display: -ms-flexbox) {
 .menu {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
 }
}

警告

目前@supports有一个主要问题： @supports本身并未得到普遍支持。Internet Explorer 根本不支持它，甚至 11 版也不支持，而且自 v9.2 版以来，Safari for iOS 才支持它。有关更多详细信息，请参阅 @supports Can I Use 页面。

因此，继续使用 Modernizr 一段时间可能更为实际，直到大多数 IE 用户都转而使用 Edge。

@supports还具有方便的JavaScript API，可用于检测 JS 中的功能。

更多 网站美化css 请访问 https://www.mimiwuqi.com/css/