La mejor manera de detectar que HTML5 no es compatible

Question

La forma habitual de hacer frente a situaciones en las que el navegador no soporta la etiqueta HTML 5 <canvas> es encajar un cierto contenido de reserva como:

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

Sin embargo, el resto de la página sigue siendo el mismo, lo que puede ser inadecuado o erróneo. Me gustaría alguna manera de detectar la lona falta de apoyo para que pueda presentar el resto de mi página en consecuencia. ¿Qué recomendaría usted?

Answer 1

Esta es la técnica utilizada en Modernizr y básicamente todos los demás biblioteca que hace trabajo de la lona:

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

Debido a que su pregunta era para la detección de cuando no apoyado, recomiendo usarlo de esta manera:

if (!isCanvasSupported()){ ...

Answer 2

Hay dos métodos populares de detectar el apoyo de la lona en los navegadores:

1. sugerencia de Matt de la comprobación de la existencia de getContext, también se utiliza de manera similar por la biblioteca Modernizr :

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

2. Comprobación de la existencia de la interfaz HTMLCanvasElement, tal como se define por el WebIDL y HTML especificaciones. Este enfoque también se recomienda en una entrada de blog del equipo de IE 9 .

   var canvasSupported = !!window.HTMLCanvasElement;
   

Mi recomendación es una variación de este último (ver Notas adicionales ), por varias razones:

• Cada navegador conocida apoyo tela - incluyendo IE 9 - implementa esta interfaz;
• Es más concisa e inmediatamente obvio lo que el código está haciendo;
• El enfoque getContext es significativamente más lento en todos los navegadores , ya que implica la creación de un elemento HTML. Esto no es ideal cuando se necesita para exprimir el rendimiento tanto como sea posible (en una biblioteca como Modernizr, por ejemplo).

No hay beneficios notables a usar el primer método. Ambos enfoques pueden ser falseadas, pero esto no es probable que suceden por accidente.

Notas adicionales

Todavía puede ser necesario comprobar que un contexto 2D puede ser recuperada. Según se informa, algunos navegadores móviles pueden devolver cierto para ambos por encima de los controles, pero null regresar para .getContext('2d'). Esta es la razón por Modernizr también comprueba el resultado de .getContext('2d'). Sin embargo, WebIDL y HTML - de nuevo - nos da otra mejor, opción más rápida :

var canvas2DSupported = !!window.CanvasRenderingContext2D;

Tenga en cuenta que podemos omitir la comprobación de la lona por completo el elemento e ir directamente a la verificación del respaldo de renderizado 2D. El CanvasRenderingContext2D interfaz es también parte de la especificación HTML.

debe utilizar el enfoque getContext para detectar WebGL apoyo porque, a pesar de que el navegador puede apoyar la WebGLRenderingContext, getContext() puede volver nula si el navegador no es capaz de interactuar con la GPU debido a problemas con los controladores y no hay ninguna aplicación de software. En este caso, la comprobación de la primera interfaz permite omitir la comprobación de 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
    }
}

Comparación de rendimiento

Rendimiento del enfoque getContext es 85-90% más lento en Firefox y Opera 11 11 y aproximadamente un 55% más lento en cromo 18.

Answer 3

Por lo general ejecuta un cheque por getContext cuando creo mi objeto de la lona.

(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);
}());

Si es compatible, entonces se puede continuar con la configuración de la lona y añadirlo a la DOM. Este es un ejemplo sencillo de Enhancement progresivo , que I (personalmente) prefiero más Degradación agraciado.

Answer 4

¿Por qué no tratar Modernizr ? Es una biblioteca JS que proporciona la capacidad de detección.

Cita:

¿Alguna vez ha querido hacer sentencias if en el CSS para el disponibilidad de características como fresco la frontera de radio? Pues bien, con Modernizr se puede lograr precisamente eso!

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

Puede haber un Gotcha aquí- algunos clientes no admiten todos métodos de lona.

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

Se puede usar canisuse.js script para detectar si la lona de su navegador apoya o no

caniuse.canvas()