Il modo migliore per rilevare che HTML5 non è supportato

Question

Il metodo standard per affrontare situazioni in cui il browser non supporta il tag HTML5 <canvas> è quello di incorporare alcuni contenuti di ripiego come:

<canvas>Your browser doesn't support "canvas".</canvas>

Ma il resto della pagina rimane la stessa, che può essere inopportuno o fuorviante. Mi piacerebbe in qualche modo di rilevare tela non il supporto in modo che possa presentare il resto della mia pagina di conseguenza. Che cosa mi consiglia?

Answer 1

Questa è la tecnica utilizzata in Modernizr e praticamente ogni altra libreria che fa lavoro di tela:

function isCanvasSupported(){
  var elem = document.createElement('canvas');
  return !!(elem.getContext && elem.getContext('2d'));
}

Dal momento che la tua domanda era per il rilevamento quando è non supportato, mi consiglia di utilizzare in questo modo:

if (!isCanvasSupported()){ ...

Answer 2

Ci sono due metodi popolari di rilevare il supporto di tela nei browser:

1. suggerimento di Matt di verificare l'esistenza di getContext, utilizzato anche in modo simile dalla biblioteca Modernizr :

   var canvasSupported = !!document.createElement("canvas").getContext;
   

2. Controllo dell'esistenza dell'interfaccia HTMLCanvasElement, come definito dalla WebIDL HTML specifiche. Questo approccio è stato anche raccomandato in un post dal team di IE 9 .

   var canvasSupported = !!window.HTMLCanvasElement;
   

La mia raccomandazione è una variante di quest'ultimo (vedi Note aggiuntive ), per diversi motivi:

• Ogni browser noto supporto tela - tra cui IE 9 - implementa questa interfaccia;
• E 'più conciso e immediatamente evidente ciò che il codice sta facendo;
• L'approccio getContext è significativamente più lento in tutti i browser , perché comporta la creazione di un elemento HTML. Questo non è l'ideale quando si ha bisogno di spremere il più possibile le prestazioni (in una libreria come Modernizr, per esempio).

Non ci sono vantaggi evidenti di utilizzare il primo metodo. Entrambi gli approcci possono essere contraffatti, ma questo non probabile che accada per caso.

Note aggiuntive

Può essere comunque necessario verificare che un contesto 2D possono essere recuperate. Secondo quanto riferito, alcuni browser mobili possono restituire true per entrambi sopra i controlli, ma tornare null per .getContext('2d'). Questo è il motivo per cui Modernizr controlla anche il risultato di .getContext('2d'). Tuttavia, WebIDL & HTML - ancora una volta - ci dà un altro migliore, opzione più veloce :

var canvas2DSupported = !!window.CanvasRenderingContext2D;

Si noti che possiamo saltare il controllo per l'elemento canvas del tutto e andare direttamente al controllo per il supporto il rendering 2D. Il CanvasRenderingContext2D interfaccia è anche parte della specifica HTML.

deve usare l'approccio getContext per il rilevamento di WebGL sostegno perché, anche se il browser potrebbe supportare la WebGLRenderingContext, getContext() può restituire nullo se il browser è in grado di interfacciarsi con la GPU a causa di problemi di driver e non v'è alcuna implementazione del software. In questo caso, il controllo per la prima interfaccia permette di saltare il controllo per getContext:

var cvsEl, ctx;
if (!window.WebGLRenderingContext)
    window.location = "http://get.webgl.org";
else {
    cvsEl = document.createElement("canvas");
    ctx = cvsEl.getContext("webgl") || cvsEl.getContext("experimental-webgl");

    if (!ctx) {
        // Browser supports WebGL, but cannot create the context
    }
}

Confronto rendimento

Performance dell'approccio getContext è 85-90% più lento in Firefox 11 e Opera 11 e circa il 55% più lento in cromo 18.

Answer 3

Io di solito eseguire un controllo per getContext quando creo il mio oggetto di tela.

(function () {
    var canvas = document.createElement('canvas'), context;
    if (!canvas.getContext) {
        // not supported
        return;
    }

    canvas.width = 800;
    canvas.height = 600;
    context = canvas.getContext('2d');
    document.body.appendChild(canvas);
}());

Se è supportato, quindi è possibile continuare l'installazione di tela e aggiungerlo al DOM. Questo è un semplice esempio di Progressive Enhancement , che io (personalmente) preferisco più di degradazione scalabile.

Answer 4

Perché non prova a Modernizr ? Si tratta di una libreria JS che fornisce capacità di rilevamento.

Quote:

  

Hai mai voluto fare   se-dichiarazioni nel vostro CSS per il   disponibilità di caratteristiche fredde come   border-radius? Bene, con Modernizr   si può realizzare proprio questo!

Answer 5

try {
    document.createElement("canvas").getContext("2d");
    alert("HTML5 Canvas is supported in your browser.");
} catch (e) {
    alert("HTML5 Canvas is not supported in your browser.");
}

Answer 6

Non ci può essere un Gotcha qui- alcuni client non supportano tutti metodi di tela.

var hascanvas= (function(){
    var dc= document.createElement('canvas');
    if(!dc.getContext) return 0;
    var c= dc.getContext('2d');
    return typeof c.fillText== 'function'? 2: 1;
})();

alert(hascanvas)

Answer 7

È possibile utilizzare canisuse.js script per rilevare se il vostro browser supporti di tela o no

caniuse.canvas()