Méthodes pour détecter la prise en charge du navigateur pour les compétences du didacticiel HTML5 et CSS3_html5

HTML5, CSS3 et d'autres technologies connexes telles que Canvas, WebSocket, etc. ont amené le développement d'applications Web à un nouveau niveau. Cette technologie combine HTML, CSS et JavaScript pour développer les effets d'une application de bureau. Bien que HTML5 promette beaucoup, en réalité, les navigateurs qui prennent en charge HTML5 et le standard HTML5 lui-même ne sont pas encore assez matures. Il n'est pas réaliste de ne pas se soucier du support du navigateur pour le moment, et cela prendra du temps. Par conséquent, lorsque nous décidons d'utiliser la technologie HTML5 pour développer des applications Web, nous devons détecter les fonctionnalités prises en charge par le navigateur.

Modernizr peut vous aider à vérifier les fonctionnalités HTML5 prises en charge par le navigateur.

Le code suivant détecte si le navigateur prend en charge Canvas :

Copiez le code

Le code est le suivant suit :

<script><br> window.onload = function () {<br> if (canvasSupported()) {<br> alert('canvas supporté');<br> }<br> };<br> <br> function canvasSupported() {<br> var canvas = document.createElement('canvas');<br> return (canvas.getContext && canvas.getContext('2d'));<br> }<br> </script>

Le code suivant détecte si le navigateur prend en charge le stockage local :

Copiez le code

Le code est le suivant :

<script><br> window.onload = function () {<br> if (localStorageSupported()) {<br> alert('stockage local pris en charge');<br> } <br> }; <br> <br> function localStorageSupported() {<br> essayez {<br> return ('localStorage' dans la fenêtre && window['localStorage'] != null);<br> }<br> catch(e) { }<br> return false;<br> }<br></script>

Dans les deux exemples ci-dessus, nous pouvons vérifier intuitivement les fonctionnalités du navigateur pour nous assurer que les fonctions que nous appliquons sur les navigateurs correspondants peuvent fonctionner normalement.

L'avantage d'utiliser Modernizr est que vous n'avez pas besoin de vérifier chaque élément comme ceci. Il existe un moyen plus simple commençons ci-dessous :

Quand j'ai entendu parler du projet Moderizr pour la première fois, je pensais qu'il s'agissait d'une bibliothèque JS qui permet à certains anciens navigateurs de prendre en charge HTML5. En fait, ce n'est pas le cas. Il s'agit principalement d'une fonction de détection.

Modernizr est accessible via l'URL http://modernizr.com. Le site Web fournit également une fonction de script personnalisé. Vous pouvez déterminer les fonctionnalités dont vous avez besoin pour détecter et générer les fichiers JS correspondants en conséquence, ce qui peut réduire le code JS inutile. .

Une fois que vous avez téléchargé le fichier Modernizr JS, vous pouvez l'introduire dans la page Web via la balise <script> <br> <br><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode11'));"><u>Copier le code</u></span></div>Le code est le suivant :</div> <div class="msgborder" id="phpcode11"><script src=" Scripts/Modernizr .js" type="text/javascript"></script>