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

Question

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

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

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

他们还建议这个 css 选项：

.no-webgl body { background: red; }

下面正在工作。

我不想将我的动画脚本放在 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";
}

Use modernizr to serve alternate background image for browsers without webgl support?