La meilleure façon de détecter que HTML5 est pas pris en charge

Question

La méthode standard pour faire face aux situations où le navigateur ne supporte pas la balise HTML5 <canvas> est d'intégrer un contenu de fallback comme:

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

Mais le reste de la page reste la même, ce qui peut être inapproprié ou trompeur. Je voudrais une certaine façon de détecter la toile non-support pour que je puisse présenter le reste de ma page en conséquence. Que recommanderiez-vous?

Answer 1

Ceci est la technique utilisée dans Modernizr et fondamentalement toutes les autres bibliothèques qui fonctionne sur toile:

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

Étant donné que votre question était pour la détection quand elle est en pas pris en charge, je recommande de l'utiliser comme ceci:

if (!isCanvasSupported()){ ...

Answer 2

Il existe deux méthodes de détection populaires support de toile dans les navigateurs:

1. suggestion de Matt de vérifier l'existence de getContext, également utilisé de manière similaire par la bibliothèque Modernizr :

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

2. Vérification de l'existence de l'interface HTMLCanvasElement, tel que défini par la WebIDL et HTML spécifications. Cette approche a également été recommandée dans un billet de blog de l'équipe IE 9 .

   var canvasSupported = !!window.HTMLCanvasElement;
   

Ma recommandation est une variante de celle-ci (voir Notes additionnelles ), pour plusieurs raisons:

• Chaque toile supportant le navigateur connu - y compris IE 9 - implémente cette interface;
• Il est plus concis et instantanément évident ce que le code fait;
• L'approche getContext est significativement plus lent dans tous les navigateurs , parce qu'il implique la création d'un élément HTML. Ce n'est pas idéal lorsque vous devez presser autant que possible la performance (dans une bibliothèque comme Modernizr, par exemple).

Il n'y a pas d'avantages notables à l'aide de la première méthode. Les deux approches peuvent être usurpées, mais cela arrive peu probable par accident.

Notes additionnelles

Il peut encore être nécessaire de vérifier qu'un contexte 2D peut être récupéré. Apparemment, certains navigateurs mobiles peuvent revenir vrai pour les vérifications ci-dessus, mais le retour null pour .getContext('2d'). C'est pourquoi Modernizr vérifie également le résultat de .getContext('2d'). Cependant, WebIDL & HTML - encore une fois - nous donne une autre meilleure, option plus rapide :

var canvas2DSupported = !!window.CanvasRenderingContext2D;

Notez que nous pouvons ignorer la vérification de l'élément de toile entièrement et aller directement à la vérification de support de rendu 2D. CanvasRenderingContext2D Interface fait également partie de la spécification HTML.

doit utiliser l'approche getContext pour détecter WebGL soutien parce que, même si le navigateur peut prendre en charge le WebGLRenderingContext, getContext() peut retourner null si le navigateur ne peut pas l'interface avec le GPU en raison de problèmes de pilote et il n'y a pas d'implémentation du logiciel. Dans ce cas, la vérification de l'interface première vous permet de sauter la vérification 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
    }
}

Comparaison des performances

Performance de l'approche getContext est 85-90% plus lent dans Firefox 11 et Opera 11 et environ 55% plus lent en chrome 18.

Answer 3

Je commence en un chèque de getContext quand je crée mon objet toile.

(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 elle est prise en charge, vous pouvez continuer la configuration de la toile et l'ajouter au DOM. Ceci est un exemple simple de progressive de mise en valeur, que je (personnellement) préfère plus la dégradation Graceful.

Answer 4

Pourquoi ne pas essayer Modernizr ? Il est une bibliothèque JS qui fournit une capacité de détection.

Citation:

  

Avez-vous déjà voulu faire   si-déclarations dans votre CSS pour la   la disponibilité des fonctionnalités très pratiques comme   Rayon de frontière? Eh bien, avec Modernizr   vous pouvez accomplir tout cela!

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

Il peut y avoir une chasse aux sorcières ici- certains clients ne prennent pas en charge toutes les méthodes de toile .

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

Vous pouvez utiliser le script canisuse.js pour détecter si vos navigateurs supports toile ou pas

caniuse.canvas()