24 mai 2014

Feature Detection HTML5

24.5.14 - 0

Vous voulez savoir si le navigateur reconnaît les nouveautés HTML5, Allons-y. D'abord, je vous recommandons d'utiliser une bibliothèque appelée modernizr pour effectuer des tests de fonctionnalité, il est certainement important d'avoir une idée de ce qui se passe derrière la scène.

feature detection html5
Feature Detection HTML5

Input Type:
Quand nous essayons d'appliquer un type input que le navigateur ne le support pas, il sera toujours afficher l'input de type "texte". Pour tester si le navigateur prend en charge un type quelconque:
var input = document.createElement ('input');
input.setAttribute ('type', 'color');
if (input.type == 'color') {
  //Navigateur prend en charge ce type
}

Attributs:
Pour déterminer si un navigateur prend en charge un attribut:
if ('placeholder' in document.createElement('input')) {
  //Navigateur prend en charge l'attribut placeholder
}
Ce code détermine simplement si un attribut existe dans l'objet document.createElement('input'). C'est exactement la même chose que :
var langues = {
  francais : 'premier',
  anglais  : 'deuxieme'
};

if ('francais' in langues ) { ... }

audio et vidéo:
Presque tous les navigateurs modernes supportent la balise audio et vidéo. Nous pouvons encore fournir le test pour les anciens navigateurs. Nous pouvons tester des médias par la méthode "canPlayType":
if (document.createElement('audio').canPlayType) {
  // Mettez votre code ici
}
ou bien:
if ('canPlayType' in document.createElement('video')) {
  //Code
}

canvas:
Si nous avons besoin de tester le support de canvas :
if (document.createElement('canvas').getContext) {
  //recupérer votre canvas
}

Local storage:
Tester le support de LocalStorage est simple. Nous pouvons générer des erreurs utilisons le block try{...}catch{...}:
try {
  if ('localStorage' in window.localStorage != null)
    return true; 
} catch (e) {
    return false;
}
Ce code détermine si localStorage exists dans l'objet window. Si des erreurs se produisent dans le processus, il retourne false.

Autres API:
Le test pour les autres nouvelles API est plus ou moins le même processus.

Geolocation:
if ( navigator.geolocation )
Offline
if ( window.applicationCache )
Web Workers
if ( window.Worker )
History
if ( window.history )
//ou bien
if ( window.history && history.pushState )

Newsletter

Abonnez-vous à notre newsletter pour recevoir les nouveautés.

0 commentaires:

© 2014 Déveur. WP Theme-junkie converted by Bloggertheme9
Powered by Blogger.
back to top