Cet article a fait l'objet d'une traduction automatique.
HTML5
Détection de navigateurs et de fonctionnalités
Sascha P.Corti
Si vous créez un site Web, vous ne voulez pas seulement qu'il soit superbe aujourd'hui, mais qu'il brille encore pendant de longues années à venir.Cela signifie que votre site doit fonctionner non seulement sur les navigateurs actuels, mais également avec les versions futures.Dans cet article, je présenterai quelques conseils et meilleures pratiques qui vous aideront à atteindre cet objectif.
Un peu d'histoire
Aujourd'hui, tous les navigateurs Web sont construites avec un seul objectif : rendre les pages Web de manière optimale conformément aux spécifications du plus récentes.
Ce n'était pas toujours le cas.Dans le passé, comme les fournisseurs de navigateur Me pour devenir dominante, plus implémenté les fonctionnalités qui étaient très sollicité, même s'ils n'étaient pas encore normalisés.Bien entendu, chaque navigateur fait dans sa propre méthode.Voici un exemple de comment réglant la transparence dans CSS variés.
Internet Explorer avant que la version 8 entendu le code CSS suivant :
.transparent { /* Internet Explorer < 9 */
width: 100%;
filter:alpha(opacity=50);
}
pendant que Firefox avait son propre attribut :
.transparent {
/* Firefox < 0.9 */
-moz-opacity:0.5;
}
comme le faisaient Safari :
.transparent {
/* Safari < 2 */
-khtml-opacity: 0.5;
}
Maintenant, cependant, dans CSS3, il existe une méthode unifiée pour définir la transparence d'un élément :
.transparent {
/* IE >= 9, Firefox >= 0.9, Safari >= 2, Chrome, Opera >= 9 */
opacity: 0.5;
}
Pendant qu'il peut sembler bonne convaincre pour prendre en charge les fonctionnalités standard un navigateur, cela complique la vie d'un développeur Web doivent être, car il doit prendre toutes les implémentations différentes de la fonctionnalité en considération lors de l'ajout à une page.
Balisage cohérente
Le meilleur moyen pour vous assurer que votre page Web est rendue de manière optimale dans tous les navigateurs consiste à se concentrer sur les marques de révision est certain d'être pris en charge toutes les versions actuelles des navigateurs.Jusqu'à très récemment, il s'agissait de HTML 4.01, une norme de 10 ans avec des fonctions très limitées.
Aujourd'hui, tous les navigateurs sont convergent vers le HTML5 riche, mais la plupart des nouvelles spécifications résumées sous ce terme général, y compris le balisage HTML5, ses API telles que DOM niveaux 2 et 3, CSS3, SVG et 262 EcmaScript, sont en cours de développement et donc sujets à modification.Les fournisseurs de navigateur sont continuelles de prise en charge de nouvelles fonctionnalités HTML5, mais à rude épreuve assez différente.
Firefox et Opera est généralement très rapide à adopter de nouvelles spécifications HTML5, parfois même celles de développement précoce et sous réserve de modification ou qui présentent des problèmes de sécurité.Cela peut être intéressant pour les développeurs tester les nouvelles fonctionnalités, il peut conduire à des pages Web qui rompent entre les versions de navigateur en raison des modifications radicales entre une spécification et sa mise en oeuvre.C'est une expérience frustrante pour les utilisateurs et les développeurs.Un exemple de ce a été Websockets entre la version bêta 7 et 8 la désactivation de Firefox 4 pour des raisons de sécurité.
Chrome, qui est également très rapide d'adopter de nouvelles normes HTML5, agité récemment la Communauté HTML5 avec le annonce qu'il a été abandon de la prise en charge du codec vidéo h.264 populaires pour HTML5 <video> les éléments et à la place de commutation à la norme WEBM exempte de redevance.Bien que cela peut être utile pour les développeurs qui paient actuellement pour les licences h.264, il ajoute un autre choix que les développeurs auront pour suivre pour prendre en charge des navigateurs autant que possible.
Microsoft est plus lent mettre en œuvre des normes, mais il fonctionne mais en étroite collaboration avec le W3C pour générer des suites de test, en aidant à minimiser l'ambiguïté dans les spécifications et la création d'une base technique pour aider les fournisseurs à homogénéiser la façon dont leurs navigateurs rendre HTML5.Pour voir le dernier travail dans ce domaine, ont un aspect à l'Internet Explorer 10 Platform Preview, vous trouverez sur IE Test Drive.Vous souhaiterez également extraire le HTML5labs où Microsoft prototypes précoces, instables spécifications des normes Web organismes tels que le W3C.Reportez-vous à la section «Interopérabilité améliorée par le biais de prise en charge des normes, "du Guide Internet Explorer 9 pour les développeurs pour des informations détaillées sur la façon dont Internet Explorer 9 prend en charge les différentes spécifications HTML5 aujourd'hui.
Toujours, car les nouvelles normes HTML5 restent une cible mobile et dans la mesure où la plupart des utilisateurs Internet n'utilisez pas les dernières versions des navigateurs Web différents, desservant le balisage de droit est plus importante que jamais.
Détection du navigateur
Une approche de gestion des différences entre les navigateurs consiste à utiliser la détection du navigateur.Le moyen le plus courant pour ce faire consiste à utiliser JavaScript pour interroger l'en-tête agent utilisateur :
<script type="text/javascript">
if ( navigator.userAgent.indexOf("MSIE")>0 )
{
// Run custom code for Internet Explorer.
}
</script>
Le problème avec cette approche est double. Tout d'abord, il regroupe plusieurs hypothèses sur les fonctionnalités du navigateur prend en charge dans un chèque. Une seule hypothèse incorrecte peut interrompre le site. Vous devez donc en tant que développeur de suivre exactement quelles fonctionnalités prend en charge par chaque version d'un navigateur spécifique.
Le deuxième problème est que cette vérification du navigateur ne prend pas en considération les versions de navigateur et n'est donc pas durable. Même si elle fonctionne avec la version actuelle d'un navigateur, la prochaine version ne nécessite pas — ou pire encore, peut-être Retirez prise en charge pour — une solution de contournement qui la détection du navigateur a été utilisée pour ajouter au site.
Par conséquent, si vous devez utiliser la détection du navigateur, assurez-vous que vous tenir compte de la version et que vous utilisez uniquement cette approche pour détecter les anciens navigateurs, comme indiqué dans Figure 1.
Figure 1 détecter les navigateurs hérités
<script type="text/javascript">
functiongetInternetExplorerVersion()
// Returns the version of Internet Explorer or a -1 for other browsers.
{
var rv = -1;
if(navigator.appName == 'Microsoft Internet Explorer')
{
var ua = navigator.userAgent;
varre = newRegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
if(re.exec(ua) != null)
rv = parseFloat( RegExp.$1 );
}
return rv;
}
functiononLoad()
{
var version = GetInternetExplorerVersion()
if (version <= 7 && version > -1)
{
// Code to run in Internet Explorer 7 or earlier.
}
}
</script>
La page MSDN Library, «détection navigateurs plus efficacement, « a plus d'informations, et vous y trouverez un article exhaustif sur l'utilisation de l'objet navigator et les expressions régulières pour détecter les différents navigateurs et leurs versions exactes à Didacticiels JavaScript.
À partir de la version 5, Internet Explorer possède une méthode unique pour détecter des navigateurs à l'aide de commentaires conditionnels. Cette syntaxe s'étend aux commentaires HTML standard. Vous pouvez utiliser ces commentaires conditionnels avec une CSS pour mettre en œuvre certaine Internet Explorer spécifique que vous souhaitez que les autres navigateurs pour ignorer les règles CSS. Dans l'exemple suivant, « ie7.css » est chargé uniquement si Internet Explorer 7 ou une version antérieure est détectée :
<!--[if lte IE 7]>
<style TYPE="text/css">
@import url(ie7.css);
</style>
<![endif]-->
Vous trouverez des informations détaillées sur la façon d'utiliser des commentaires conditionnels dans la page MSDN Library, «sur les commentaires conditionnels. »
Étant donné les problèmes et les limitations de la détection de navigateur, cependant, examinons une alternative.
Fonction détection
Une bien meilleure approche à la gestion des différences entre les navigateurs Web consiste à utiliser la fonctionnalité Détection. Avant d'utiliser une fonctionnalité que vous connaissez a différentes mises en œuvre dans les différents navigateurs, vous exécutez un test de petite taille qui recherche la disponibilité d'un objet spécifique, méthode, propriété ou le comportement. Dans la plupart des cas il est possible en essayant de créer une nouvelle instance de la fonctionnalité en question et si cette instanciation renvoie une valeur différente de null, le navigateur en cours d'exécution sait que cette fonctionnalité. Dans le cas contraire, vous pouvez suivre en testant la disponibilité d'une solution de contournement ou d'une ancienne implémentation propriétaire de la fonctionnalité.
Comparaison de navigateur et Detection des CARACTERISTIQUES
Nous allons utiliser les diagrammes dans Figures 2, 3 et 4 pour aider à visualiser le fonctionnement des deux approches dans différentes situations.
.png)
Figure 2 chemins de Code Possible via le Site de Test
.png)
Figure 3 résultats avec des Configurations de navigateur connus
Confrontée à des configurations de navigateur connus, les deux méthodes fonctionnent, mais la détection du navigateur a fixe supposant que la fonctionnalité a et b de la fonctionnalité sont pris en charge par le navigateur, considérant que la détection de la fonction teste individuellement pour chaque fonctionnalité.
.png)
Figure 4 Configuration du navigateur inconnu
Il est confronté à une configuration de navigateur inconnu les choses deviennent intéressantes. Detection des CARACTERISTIQUES gère cette barre d'outils et constate que le navigateur est capable d'afficher une fonction, mais a besoin de code de secours pour b de fonctionnalité. Détection du navigateur, d'autre part, choisit un chemin d'accès basé sur le nom du navigateur ou choisit le chemin par défaut car aucune des combinaisons/version du navigateur interrogé correspond au. Quoi qu'il en soit, dans cet exemple la page ne sont pas rendues correctement car il n'existe aucun chemin d'accès du code qui relie tous les segments de code valide même si la page contienne en fait tout le code nécessaire pour afficher correctement dans cette configuration inconnu : navigateur.
Exemples de détection des fonctionnalités
Il existe deux recommandations très importantes à prendre en compte lors de l'utilisation de détection de fonctionnalité :
- Toujours tester d'abord des normes , car les navigateurs prennent souvent en charge la norme plus récente ainsi que la solution de contournement héritée.
- Toujours cible liés uniquement les fonctionnalités dans un seul chèque, efficacement en réduisant les hypothèses de fonctionnalités d'un navigateur.
Maintenant examinons quelques exemples de détection de fonctionnalité.
Le script suivant crée deux chemins de code. Il vérifie d'abord si le navigateur prend en charge window.addEventListener et sondes pour la disponibilité de l'héritage dans le cas contraire, fonction de window.attachEvent :
<script type="text/javascript">
if(window.addEventListener) {
// Browser supports "addEventListener"
window.addEventListener("load", myFunction, false);
} else if(window.attachEvent) {
// Browser supports "attachEvent"
window.attachEvent("onload", myFunction);
}
</script>
Une autre approche consiste à encapsuler la détection de fonctionnalité dans un ensemble de fonctions qui peut ensuite être utilisé dans tout le code. Voici une bonne pratique pour détecter si le navigateur prend en charge les HTML5 <canvas> élément et dans l'affirmative, s'assure que la méthode canvas.getContext('2d') fonctionne également. Cette fonction renvoie simplement true ou false, ce qui facilite la réutilisation.
<script type="text/javascript">
functionisCanvasSupported()
{
var elem = document.createElement('canvas');
return!!(elem.getContext && elem.getContext('2d');
}
</script>
Une chose à garder à l'esprit lorsque utilisant la fonctionnalité détection consiste à utiliser toujours sur nouvellement créé éléments ou des objets afin de vous évitez la possibilité que n'importe quel autre script sur la page a modifié l'élément ou un objet dans la mesure où il a été créé, qui pourrait conduire à des résultats aléatoires ou irrégulière.
Fonction détection fonctionne également directement pour quelques éléments HTML, tels que HTML5 <video>, <audio> et <canvas> sous la forme d'un « secours ». Le navigateur affiche le premier sous-élément pris en charge à partir du haut et visuellement masque les éléments ci-dessous.
La forme la plus simple ressemble à ceci :
<video src="video.mp4">
Your browser doesn't support videos natively.
</video>
Un navigateur qui prend en charge de la <video> élément affiche la vidéo « video.mp4 » pendant un navigateur qui ne reviendra au texte fourni. Mais le secours fonctionne également pour les différents formats vidéo dans la balise video :
<video>
<source src="video.mp4" type="video/mp4" />
<source src="video.webm" type="video/webm" />
Your browser doen't suppport videos natively.
</video>
Dans ce cas, un navigateur qui prend en charge HTML5 <video> tout d'abord essaie de charger la vidéo mp4. Si elle ne gère pas ce format, elle vous renverra à la vidéo codée webm. Ce format ne sera pas gérée ou le navigateur ne doit pas compatible <video> tout, il reviendra au texte.
Bien entendu, il est plus judicieux de revenir à un lecteur vidéo Plug-in à la place du texte, dans le cas où le navigateur ne prend pas en charge les HTML5 <video> du tout. L'exemple suivant utilise un lecteur vidéo Silverlight :
<video>
<source src="video.mp4" type='video/mp4' />
<source src="video.webm" type='video/webm' />
<object type="application/x-silverlight-2">
<param name="source" value="http://url/player.xap">
<param name="initParams" value="m=http://url/video.mp4">
</object>
Download the video <a href="video.mp4">here</a>.
</video>
Une logique similaire fonctionne dans CSS. Dans CSS, les propriétés non reconnues sont simplement ignorées. Par conséquent, lorsque vous souhaitez ajouter plusieurs propriétés expérimentales, préfixé fournisseur, comme illustré avec « border-radius » ci-dessous, vous pouvez simplement inclure toutes les variations dans votre code. Cela se sentent un peu imprécise, mais il est facile à utiliser et obtient le travail effectué pour un cas comme celui-ci. Notez qu'il est recommandé de placer les préfixes spécifiques au fournisseur que vous souhaitez inclure tout d'abord et le balisage standard dernier.
<style type="text/css">
.target
{
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}
</style>
Un grand avantage à la détection de la fonctionnalité est qu'il fonctionne également avec les navigateurs que vous n'étaient pas même penser à lors de la création de votre page et même avec les futures versions de navigateurs, car il ne repose pas sur des hypothèses sur les fonctionnalités un navigateur prend en charge.
Développement et test de la fonctionnalité Détection
Le F12 Developer Tools dans Internet Explorer 9 sont très utiles pour développer et tester la détection de fonctionnalité avec de nombreux navigateurs. Vous pouvez les utiliser pour déboguer un script, étape par étape et modifier chaîne d'agent utilisateur du navigateur, ainsi que pour indiquer à Internet Explorer pour utiliser le moteur de rendu des versions précédentes**.**Figures 5, 6, 7 et 8 afficher quelques exemples de comment vous pouvez utiliser ces outils.
.png)
Figure 5 Utilisation de points d'arrêt lors du débogage JavaScript dans Internet Explorer 9
.png)
Figure 6 fonctionnant en « Mode Document : normes IE9, "le bBrowser utilise la méthode d'addEventListener moderne
.png)
Figure 7 en "Mode Document : normes IE7," le débogueur tombe précédent pour la méthode attachEvent de Legacy
.png)
La figure 8, vous pouvez modifier l'Agent utilisateur Internet Explorer de chaîne à la volée et même ajouter vos propres chaînes, y compris ceux pour les navigateurs mobiles
Gestion de la fonctionnalité Détection dans les grands projets
Lorsque vous créez un projet Web complexe, création et gestion de tout le code de détection de la fonctionnalité peuvent être fastidieuses. Heureusement, il existe très bibliothèques de JavaScript disponibles qui aident à cet effort, à savoir Modernizr et jQuery.
Modernizr a détection intégrée pour la plupart des fonctionnalités HTML5 et CSS3 qui est très facile à utiliser dans votre code. Elle a très largement adopté et constamment amélioré. Modernizr et jQuery sont livrés avec l'ASP.Outils NET MVC.
Examinez le code dans Figure 9, qui détecte les fonctionnalités du navigateur pour afficher les polices web sans l'aide de Modernizr, puis le code dans Figure 10 qui n'utilise pas Modernizr.
La figure 9 sans Modernizr
function(){
var
sheet, bool,
head = docHead || docElement,
style = document.createElement("style"),
impl = document.implementation || { hasFeature: function()
{ return false; } };
style.type = 'text/css';
head.insertBefore(style, head.firstChild);
sheet = style.sheet || style.styleSheet;
var supportAtRule = impl.hasFeature('CSS2', '') ?
function(rule) {
if (!(sheet && rule)) return false;
var result = false;
try {
sheet.insertRule(rule, 0);
result = (/src/i).test(sheet.cssRules[0].cssText);
sheet.deleteRule(sheet.cssRules.length - 1);
} catch(e) { }
return result;
} :
function(rule) {
if (!(sheet && rule)) return false;
sheet.cssText = rule;
return sheet.cssText.length !== 0 &&
(/src/i).test(sheet.cssText) &&
sheet.cssText
.replace(/\r+|\n+/g, '')
.indexOf(rule.split(' ')[0]) === 0;
};
bool = supportAtRule('@font-face { font-family: "font";
src: url(data:,); }');
head.removeChild(style);
return bool;
};
La figure 10 avec Modernizr
<script type="text/javascript" src"modernizr.custom.89997.js"></script>
<script type="text/javascript">
if(Modernizr.fontface){
// font-face is supported
}
</script>
Ajout de prise en charge des fonctionnalités manquantes
Detection des CARACTERISTIQUES n'élimine la charge de l'élaboration d'une solution de contournement lorsque le navigateur testé ne prend pas en charge une fonctionnalité que vous avez besoin. Dans l'échantillon vidéo HTML5 antérieur, à l'aide de Silverlight comme un secours était une solution évidente. Mais qu'en est-il des autres fonctionnalités HTML5, <canvas> ou les nouvelles balises de sémantiques, tels que <nav>, <section> et <article>, <aside>, ou la <header> et <footer> ?
Un nombre croissant de prêts à l'emploi « secours » pour de nombreuses fonctionnalités HTML5, appelé polyfills et le shim peut faciliter cette charge. Ce genre de documents sous forme de bibliothèques de CSS et JavaScript, ou parfois même comme Flash ou Silverlight de contrôles que vous pouvez utiliser dans votre projet, ajout de fonctionnalités de HTML5 manquantes dans les navigateurs qui n'en charge dans le cas contraire.
L'idée générale est que les développeurs doivent être en mesure de développer avec les API HTML5 et scripts de créer les méthodes et les objets qui doivent exister. Développement de cette manière pérenne signifie que lorsque vous mettez à niveau les utilisateurs, le code n'a pas à modifier et les utilisateurs seront déplace vers la meilleure expérience natif proprement.
La différence entre shim et polyfills est que shims imitent uniquement une fonctionnalité et chacun a sa propre API propriétaire, tandis que polyfills émuler la fonctionnalité de HTML5 et son API exacte. Ainsi, en règle générale, à l'aide d'un polyfill vous fait gagner le devoir fouiller à adopter une API propriétaire.
Le HTML5 Cross navigateur Polyfills collection sur github contient une liste croissante de shims disponibles et polyfills.
Modernizr, par exemple, inclut le « HTML5Shim » pour la prise en charge de la balise sémantique, mais il est facile de charger d'autres correctifs et polyfills si Modernizr détecte qu'une fonctionnalité n'est pas prise en charge.
Ajout dynamique de prise en charge
Vous vous demandez peut-être, « n'Ajout de toutes ces bibliothèques de script ma page énorme et lent à charger? »
Eh bien, il est vrai que la plupart de ces bibliothèques de prise en charge à l'aide peut accroître considérablement la charge sur votre site Web, il paraît donc logique pour charger dynamiquement uniquement lorsqu'ils sont réellement nécessaires. En cas de shim ou polyfill, la meilleure pratique consiste à les charger uniquement lorsque vous avez détecté que le navigateur ne prend en charge la fonctionnalité HTML5 native.
Nouveau nous sommes de la chance, car il existe une grande bibliothèque prend en charge exactement ce scénario : yepnope.js
Yepnope est un chargeur de ressources asynchrone qui fonctionne avec JavaScript et CSS et entièrement découple le préchargement de l'exécution. Cela signifie que vous disposez d'un contrôle total lorsque votre ressource est exécutée et que vous pouvez modifier l'ordre à la volée. Yepnope sera intégré dans le Modernizr 2, mais peut également être utilisé sur son propre. Nous allons avoir un coup de œil à sa syntaxe :
<script type="text/javascript" src="yepnope.1.0.2-min.js"></script>
<script type="text/javascript">
yepnope({
test : Modernizr.geolocation,
yep : 'normal.js',
nope : ['polyfill.js', 'wrapper.js']
});
</script>
Cet exemple à partir de la page Yepnope teste la possibilité du navigateur d'utiliser géolocalisation HTML5 à l'aide de Modernizr.Si la prise en charge, votre propre code (normal.js) sera chargée ; Sinon, un polyfill personnalisé (qui se compose de polyfill.js et wrapper.js) sera chargée.
Les points les plus importants sont résumées dans Figure 11.
La figure 11 Détection du navigateur et fonctionnalité Détection Dos et ne pas faire
| DO | NE PAS | |
| Détection du navigateur | Essayez d'éviter totalement. ou Test d'un navigateur spécifique et version. |
Faire des hypothèses pour les navigateurs à venir en vérifiant uniquement si le nom du navigateur. |
| Fonction détection | Tester d'abord des normes. | Supposons que des fonctionnalités sans aucun rapport sous un seul test. |
Ressources :
En savoir plus sur le navigateur et la fonctionnalité de détection à :
- Tester Internet Explorer
- HTML5 Labs
- Articles MSDN :
- Bibliothèques JavaScript :
- Polyfills / Shims :
Sascha P. Corti works pour la Suisse de Microsoft comme un developer evangelist en mettant l'accent sur les outils du système Microsoft platform et développeur, et il présente les dernières tendances de la Communauté des développeurs Suisse.Il se concentre actuellement sur les technologies Web et la plate-forme de Windows Phone 7.
Ses études en cause Computer Science à ETH Zurich et gestion de l'Information à l'Université de Zurich.
Depuis sept ans Sascha était un développeur de logiciels et l'architecte pour une banque suisse majeure et il a travaillé en tant qu'un spécialiste systems engineer et de la technologie de plusieurs sociétés de haute technologies American notamment Silicon Graphics et Microsoft.
Vous pouvez lire sur ses activités sur son weblogs au derniers http://techpreacher.corti.com et https://blogs.msdn.com/swiss_dpe_team/ ou lui suivre sur Twitter @ TechPreacher.
Merci aux experts techniques suivantes pour la révision de cet article : Garret avoir Justin etThomas Lewis