Methoden zum Erkennen der Browserunterstützung für HTML5- und CSS3_html5-Tutorial-Fähigkeiten

HTML5, CSS3 und andere verwandte Technologien wie Canvas, WebSocket usw. haben die Entwicklung von Webanwendungen auf ein neues Niveau gebracht. Diese Technologie kombiniert HTML, CSS und JavaScript, um die Effekte einer Desktop-Anwendung zu entwickeln. Obwohl HTML5 viel verspricht, sind die Browser, die HTML5 unterstützen, und der HTML5-Standard selbst in Wirklichkeit noch nicht ausgereift genug. Es ist unrealistisch, sich jetzt überhaupt keine Gedanken über die Browserunterstützung zu machen, und es wird einige Zeit dauern. Wenn wir uns daher für die Entwicklung von Webanwendungen entscheiden, müssen wir die vom Browser unterstützten Funktionen erkennen.

Modernizr kann Ihnen dabei helfen, die vom Browser unterstützten HTML5-Funktionen zu überprüfen.

Der folgende Code erkennt, ob der Browser Canvas unterstützt:

Kopieren Sie den Code

Der Code ist wie folgt folgt:

<script><br> window.onload = function () {<br> if (canvasSupported()) {<br> warning('canvas unterstützt');<br> }<br> };<br> <br> function canvasSupported() {<br> var canvas = document.createElement('canvas');<br> return (canvas.getContext && canvas.getContext('2d'));<br> }<br> </script>

Der folgende Code erkennt, ob der Browser lokalen Speicher unterstützt:

Kopieren Sie den Code

Der Code lautet wie folgt:

<script><br> window.onload = function () {<br> if (localStorageSupported()) {<br> Alert('Local Storage Supported');<br> } <br> }; <br> <br> function localStorageSupported() {<br> try {<br> return ('localStorage' in window && window['localStorage'] != null);<br> }<br> Catch(e) { }<br> return false;<br> }<br></script>

In den beiden oben genannten Beispielen können wir die Browserfunktionen intuitiv überprüfen, um sicherzustellen, dass die Funktionen, die wir auf den entsprechenden Browsern anwenden, normal funktionieren.

Der Vorteil der Verwendung von Modernizr besteht darin, dass Sie nicht jeden Punkt auf diese Weise überprüfen müssen. Es gibt einen einfacheren Weg:

Als ich zum ersten Mal vom Moderizr-Projekt hörte, dachte ich, es sei eine JS-Bibliothek, die es einigen alten Browsern ermöglicht, HTML5 zu unterstützen. Tatsächlich handelt es sich jedoch nicht um eine Erkennungsfunktion.

Auf Modernizr kann über die URL http://modernizr.com zugegriffen werden. Die Website bietet auch eine benutzerdefinierte Skriptfunktion. Sie können bestimmen, welche Funktionen Sie zum Erkennen und Generieren der entsprechenden JS-Dateien benötigen, wodurch unnötiger JS-Code reduziert werden kann .

Sobald Sie die Modernizr JS-Datei heruntergeladen haben, können Sie sie über das Tag <script> in die Webseite einbinden. <br> <br><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode11'));"><u>Code kopieren</u></span></div>Der Code lautet wie folgt:</div> <div class="msgborder" id="phpcode11"><script src=" Skripte/Modernizr .js" type="text/javascript"></script>