使用modernizr 为不支持webgl 的浏览器提供备用背景图像？

Question

我的网站背景中有一个 webgl 动画，并希望为没有此功能的浏览器提供一些后备支持。我想在后台提供图像而不是创建动画的 javascript 文件。

Modernizr 提供了一些指导，并表示要设置 if...else 语句来激活替代选项，如下所示：

if (Modernizr.webgl) {
  // supported
} else {
  // not-supported
}

他们还建议使用这个 css 选项：

.no-webgl body { background: red; }

Nether 正在工作。

我不想将我的动画脚本放在 if 语句中，然后在 else 语句中添加类似的内容：

var oldBrowserFix = document.getElementsByName("body");
oldBrowserFix.style.background = '#ff0000';

我还考虑了另一个想法：

do {
  var oldBrowserFix = document.getElementsByName("body");
  oldBrowserFix.style.background = '#ff0000';
} while (!Modernizr.webgl);

我怎样才能让我的do...while 语句起作用？

Answer 1

将modernizr添加到html文件的底部并在它下面运行：

if (!Modernizr.webgl) {
  document.body.style.backgroundColor = "#000000";
}