Verwenden Sie modernizr, um ein alternatives Hintergrundbild für Browser ohne Webgl-Unterstützung bereitzustellen?

Question

Ich habe eine Webgl-Animation im Hintergrund meiner Website und möchte einige Fallback-Unterstützung für Browser anbieten, die diese Funktion nicht haben. Ich möchte ein Bild im Hintergrund und nicht die Javascript-Datei, die die Animation erstellt.

Modernizr bietet einige Hinweise und sagt zur Einrichtung einer if...else Anweisung, um die alternative Option zu aktivieren, wie folgt aus:

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

Sie schlagen auch diese CSS-Option:

.no-webgl body { background: red; } 

Nether arbeiten.

Ich will nicht meine Animation Skript in der if Anweisung setzen und dann so etwas wie dies in der else Aussage:

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

ich auch eine andere Idee in Betracht gezogen:

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

Wie kann Ich bekomme meine Anweisung zu arbeiten?

Answer 1

Add modernizr zur Unterseite der HTML-Datei, und führen Sie diese darunter:

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