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

Question

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

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

if (!isUpToDate) {
  displaySomethingAboutBrowserCompatibility()
}

在 raw CSS 中有没有办法做这种事情：使用 CSS 规则绘制 div 使 div 仅在网格为不支持？

Answer 1

是的，只需使用网格属性设置样式即可 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 2

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

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

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

如果您有充分的理由不使用 JS，并且不介意它不适用于所有版本的 IE 和每个浏览器的旧版本，您可以这样做

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

但这不是我的方法。它不会被驳回。您不能使用 LocalStorage 来记住他们的选择。等等

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

Display a browser compatibility alert via CSS (grid support)

html

javascript

css

browser

browser-support