如果不支持样式则显示警报，没有 HTML

Question

我需要这样的东西：

if {
  @supports not(display: grid) {
    window.alert("Please use a different browser.");
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

因此，如果浏览器不支持 CSS 网格，它应该显示 JavaScript 警报 。我知道仅使用 CSS 会如何工作，但我需要一个 JavaScript 或 jQuery 解决方案，而 HTML 部分中没有任何 HTML。这怎么可能？

Answer 1

你把事情搞得太复杂了

if (document.documentElement.style.grid === undefined) {
    alert("Please use a different browser.");
}

在现代浏览器中，grid是每个元素样式的属性。如果未定义，则浏览器不支持。

Answer 2

您可以创建一个通常隐藏但在不支持网格时变为可见的元素。请查看 https://developer.mozilla.org/en-US/docs/Web/CSS/@supports

例如，您有一个元素 warning-message，其中 display: none; 和

@supports not (display: grid) {
  #warning-message {
    display: block;
  }
}

Show alert if style is not supported, without HTML