时间戳

首页 > 解决方案 > 通过 CSS（网格支持）显示浏览器兼容性警报

javascript - 通过 CSS（网格支持）显示浏览器兼容性警报

问题描述

我可以检测浏览器支持并显示关于 CSS 网格与 JS 的兼容性的“警报”（样式化的 div）：

function isUpToDate() {
  var div = document.createElement('div')
  div.style.display = 'grid'
  return div.style.display === 'grid'
}

if (!isUpToDate) {
  displaySomethingAboutBrowserCompatibility()
}

原始 CSS 中有没有办法做这种事情：使用 CSS 规则绘制一个 div，使 div 仅在不支持网格时才可见？

标签： javascripthtmlcssbrowserbrowser-support

解决方案

您可以为此使用@supports。

默认显示警告，如果支持您想要的功能则隐藏。

div {
   display: block;
   margin: 1em;
   text-align: center;
   border: solid red 4px;
}

@supports(display: grid) {
    .grids { display: none; }
}

@supports(display: fakedisplay) {
    .fakedisplay { display: none; }
}
<div class="grids">Grid is not supported</div>

<div class="fakedisplay">Fake Display is not supported</div>

推荐阅读