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

您可以为此使用@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>

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。〜唯一的问题是@supports没有足够的浏览器支持让您依赖它。〜

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

如果您有令人信服的理由不使用JS，并且不介意在所有版本的IE和所有浏览器的较早版本中都无法使用JS，则可以执行类似的操作

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

但这不是我的方法。它不会被拒绝。您无法使用LocalStorage记住他们的选择。等等

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

3 个答案: