通过CSS (网格支持)显示浏览器兼容性警报

Question

我可以检测浏览器支持并显示关于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仅在不支持网格的情况下可见？

Answer 1

为此您可以使用@支持。

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

​

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>

​

Answer 2

是的，只需使用网格属性来为div设置样式，以便使其失效，如果不支持网格，它将是可见的。

这里有个主意。使用旧的IE浏览器打开它来查看结果。

​

.box {
  display:grid;
  grid-template-columns:0px;
  grid-template-rows:0px;
}
.box * {
 overflow:hidden;
}

<div class="box">
<div>I am a div inside a grid, if you see me than you cannot use grid</div>
</div>

​

Answer 3

那得看情况。理论上你可以使用@支持。~唯一的问题是@supports没有足够的浏览器支持来依赖它。

编辑：@Quentin的答案显示，您可以做相反的工作，使支持浏览器关闭消息，这是一个很好的解决方案，我的浏览器支持反对。

如果您有一个令人信服的不使用JS的理由，并且不介意在所有版本的IE和每个浏览器的旧版本中使用JS，那么您可以这样做

@supports not (text-align: center) {
    .myTextAlignCenterNotSupportedDivMessage {
        display: block;
    }
}

但这不是我的方法。这是不可能的。你不能用LocalStorage来记住他们的选择。等。