使用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";
}