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

来自菜鸟教程
跳转至:导航、​搜索

CSS 中的新规则 @supports 允许您轻松检测访问者的浏览器中是否可以使用某个 CSS 功能。 这允许您仅对受支持的浏览器使用这些功能,或仅为不支持的浏览器定义特定规则,而让其他浏览器完全忽略它们。 @supports 是一种纯 CSS 方式来替换像 Modernizr 这样的工具。 @supports 允许您测试功能的支持和不支持的功能:

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

不支持

以下是在某个功能不受支持时如何测试和应用特定规则的方法:

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

使用和/或运算符链接多个 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 页面

因此,在大多数 IE 用户切换到 Edge 之前,继续使用 Modernizr 可能会更实用。

@supports 还有一个方便的 JavaScript API 可以用来检测 JS 中的特性。