Erkennen neuer HTML5/CSS3 -Funktionen mit Modernizr

HTML5, CSS3 und verwandte Technologien wie Leinwand und Webstecke haben sehr nützliche Funktionen mitgebracht, die unseren Webprogrammen helfen können, ein neues Niveau zu verbessern. Mit diesen neuen Technologien können wir verschiedene Formseiten erstellen, die auf Tablets und mobilen Geräten mit nur HTML, CSS und JavaScript ausgeführt werden können. Obwohl HTML5 viele neue Funktionen bietet, ist es nicht realistisch, diese neuen Technologien zu verwenden, wenn wir die alte Version des Browsers nicht berücksichtigen. Die alte Version des Browsers wird seit vielen Jahren verwendet, und wir müssen immer noch die Kompatibilitätsprobleme dieser Versionen berücksichtigen. Das Problem, das in diesem Artikel gelöst werden muss, ist: Wenn wir die HTML5/CSS3 -Technologie verwenden, wird das Problem alter Browser, die HTML5/CSS3 -Funktionen nicht unterstützen, besser umgehen.

Obwohl wir Code selbst schreiben können, um festzustellen, ob der Browser bestimmte HTML5/CSS3 -Funktionen unterstützt, ist der Code nicht sehr einfach. Zum Beispiel: Schreiben von Code, um festzustellen, dass die Browserzahlung Canvans unterstützt, kann unser Code dem folgenden ähnlich sein:

 <Script> window.onload = function () {if (canvassupported ()) {alert ('canvas unterstützt'); }}; Funktion canvassupported () {var canvas = document.createelement ('canvas'); return (canvas.getContext && canvas.getContext ('2d')); } </script>

Wenn Sie feststellen möchten, ob der lokale Speicher unterstützt wird, kann der Code dem unten ähnlichen, aber es ist einfach, Fehler unter Firefox zu verursachen.

 <Script> window.onload = function () {if (localStorageSupported ()) {alert ('Lokaler Speicher unterstützt'); }}; Funktion localStorageSupported () {try {return ('localStorage' im Fenster && Fenster ['localStorage']! = null); } catch (e) {} return false; } </script>

Die ersten beiden Beispiele sind alle nach einer Funktion. Wenn es viele HTML5/CSS3 -Funktionen gibt, müssen wir mehrere Kopien von Code zum Richten schreiben, aber zum Glück hängen diese Codes nicht von der Reihenfolge ab. Mit Modernizr können Sie die oben genannten komplexen Funktionen mit sehr wenig Code implementieren. Schauen wir uns einige wichtige Merkmale von Modernizr an:

Als ich das erste Mal Modernizr hörte, dachte ich, es bedeutete modernisiert und konnte älteren Browsern neue HTML5/CSS3 -Funktionen hinzufügen. Tatsächlich macht Modernizr dies nicht, sondern hilft uns, unsere Entwicklungspraktiken zu verbessern, indem wir eine sehr funky Methode verwenden, um festzustellen, ob der Browser eine neue Funktion unterstützt und sogar zusätzliche Skripte laden kann. Wenn Sie ein Webentwickler sind, ist es eine sehr großartige Waffe für Sie.

Modernizr Official Site: http://modernizr.com können Sie beide 2 Arten von Skripten (Entwicklungsversion und benutzerdefinierte Produktionsversion) verwenden. Die Website bietet ein individuelles Demand-Tool, um nur die Erkennungsfunktionen zu generieren, die Sie benötigen, anstatt eine große und vollständige Version, mit der alles erfasst werden kann. Dies bedeutet, dass Sie Ihre Skripte minimieren können. Die folgende Abbildung ist die Schnittstelle des offiziellen Tools der Website -Generation. Sie können sehen, dass viele HTML5/CSS3 und verwandte Technologien ausgewählt werden können.

Nachdem Sie Ihr benutzerdefiniertes Skript heruntergeladen haben, können Sie es wie eine normale JS -Datei verweisen, und dann können Sie es verwenden.

 <script src = scripts/modernizr.js type = text/javaScript> </script>

Nach dem Hinzufügen der Modernizr -Referenz wird sofort wirksam. Beim Ausführen werden dem HTML -Element eine Charge von CSS -Klassennamen hinzugefügt. Diese Klassennamen markieren, welche Funktionsunterstützung und welche Funktionen im aktuellen Browser nicht unterstützen. Die unterstützten Funktionen werden direkt den Namen der Funktion des Tages als Klasse angezeigt (z. B. Leinwand, Websockets). Die Klasse, die von den nicht unterstützten Funktionen angezeigt wird, ist der Name des No-Property-Namens (z. B. No-FlexBox). Der folgende Code ist der Effekt des Laufens in Chrome:

 <html class= js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitionen fontface generatedContent Video Audio LocalStorage SessionStorage Webworkers ApplicationCache SVG INLINESVG SMIL SVGCLIPPATHS>

Der folgende Code ist der Effekt des Laufens unter IE9:

 <html class = js no-flexbox canvas canvas canvaVaVaVaVaVaVext No-Webgl No-Touch Geolocation Postmessage No-Webatabase No-Indexeddb Hashchange No-History Draganddrop No-Websockets rgba hsla multiplebgs Hintergrund-Opkskur oquaks-oqual-oqual-oqual-oqual-oqual-oqual-oqual-oqual-oqual-oqual-ochse no-csssanimationen no-csscolumns no-cssgradients no-cssReflections csStransforms no-csstransforms3d no-csStransitionen fontface generatedContent Video audio localStorage SessionStorage No-Webworkers No-ApplicationCache Svg Inlinesvg Smil Svg Clippaths>

Unter Verwendung von Modernizr kann der folgende Code auftreten (fügen Sie den Namen No-JS in die Klasse hinzu):

 <html class = no-JS>

Sie können die (http://html5boilerplate.com) -Seite besuchen, um den verwandten Inhalt von HTML5-Kesselplatten anzuzeigen, oder (http://initializ.com), um den initializr verwandten Inhalt anzuzeigen. Wenn es nicht unterstützt wird, wird niemand angezeigt. Wenn es unterstützt wird, wird niemand gelöscht. Sehr cool, oder?

Sie können den von Modernizr generierten Klassennamen im <html> -Element direkt verwenden, um die entsprechenden Attribute in Ihrer CSS -Datei zu definieren, um den aktuellen Browser zu unterstützen. Beispielsweise kann der folgende Code Shadow in einem Browser anzeigen, der Shadow Shadow unterstützt, und Standardgrenzen in Browsern anzeigen, die nicht unterstützen:

 .boxShadow #myContainer {Border: Keine; -Webkit-box-shadow: #666 1px 1px 1px; -moz-box-shadow: #666 1px 1px 1px;} .no-boxShadow #myContainer {Border: 2px Solid Black;}

Denn wenn der Browser Box-Shadows unterstützt, fügt Modernizr dem <html> -Element eine BoxShadow-Klasse hinzu und Sie können sie mit der entsprechenden Div-ID verwalten. Wenn es nicht unterstützt wird, fügt Modernizr die No-BoxShadow-Klasse zum <html> -Element hinzu, das einen Standardrand zeigt. Auf diese Weise können wir die neuen CSS3 -Funktionen auf Browsern, die CSS3 -Funktionen unterstützen, problemlos verwenden und die vorherige Methode weiterhin auf Browsern verwenden, die sie nicht unterstützen.

Modernizr bietet nicht nur die entsprechende Klasse zum <html> -Element, sondern bietet auch ein globales Modernizr -JavaScript -Objekt, das verschiedene Eigenschaften bereitstellt, um anzuzeigen, ob eine neue Funktion im aktuellen Browser unterstützt wird. Beispielsweise kann der folgende Code verwendet werden, um festzustellen, ob der Browser Leinwand und lokaler Speicher unterstützt. Für mehrere Entwickler ist es sehr vorteilhaft, sich unter Multi-Version-Browsern zu entwickeln und zu testen, und jeder kann den Code vereinen.

 $ (Dokument) .Ready (function () {if (modernizr.canvas) {// Canvas -Code ieben} if (modernizr.localStorage) {// Lokaler Speichercode hinzufügen}});

Das globale Modernizr -Objekt kann auch verwendet werden, um festzustellen, ob die CSS3 -Funktion unterstützt wird. Der folgende Code wird verwendet, um zu testen, ob Grenzradius- und CSS-Transformationen unterstützt werden:

 $ (document) .ready (function () {if (modernizr.borderRadius) {$ ('#mydiv').

Einige andere CSS3-Funktionen können Ergebnisse wie Depazität, RGBA, Text-Shadow, CSS-Animationen, CSS-Übergänge, mehrere Hintergründe usw. erfassen

In einigen Browsern, die keine neuen Funktionen unterstützen, bietet Modernizr nicht nur die oben genannte Methode, die Sie mitteilen können, sondern auch die Lastfunktion, mit der Sie einige Shim/Polyfill-Skripte laden können, um Unterstützung zu erhalten (Informationen zu Shim/Polyfill finden Sie unter: https://github.com/modernizr/modernizr/wiki/Html5-cross-cross-cross--polyiNSISKR/wiki/Html5-cross-cross- Modernizr bietet einen Skriptlader, um eine Funktion zu bestimmen, und wenn sie nicht unterstützt wird, wird das entsprechende Skript geladen. Ein separates Skript finden Sie auch unter http://yepnopejs.com.

Sie können die Load () -Funktion von Modernizr verwenden, um das Skript dynamisch zu laden. Das Testattribut der Funktion zeigt an, ob sie unterstützt wird. Wenn der Test erfolgreich unterstützt wird, wird das vom YEP -Attribut festgelegte Skript geladen. Wenn es nicht unterstützt wird, wird das vom NOPE -Attribut festgelegte Skript geladen. Unabhängig davon, ob es unterstützt wird oder nicht, wird das von beiden Attribut festgelegte Skript geladen. Der Beispielcode lautet wie folgt:

 Modernizr.load ({test: modernizr.canvas, yep: 'html5canvasavailable.js', nope: 'excanvas.js', beide: 'mycustomscript.js'});

In diesem Beispiel bestimmt Modernizr, ob der aktuelle Browser die Canvas -Funktion unterstützt. Wenn es unterstützt wird, wird die beiden Skripte html5canvasApleable.js und mycustomscript.js geladen. Wenn es nicht unterstützt wird, wird die Skriptdatei excanvas.js (verwendet für Versionen vor IE9) geladen, damit der Browser die Canvas -Funktion unterstützt und dann das Skript von MyCustomscript.js lädt.

Da Modernizr Skripte laden kann, können Sie auch andere Verwendungszwecke verwenden, beispielsweise wenn das Drittanbieter-Skript, auf das Sie verweisen (z. B. Google und Microsoft, die CDN-Dienste angeben, JQuery Hosting anbietet) nicht geladen werden können, können Sie alternative Dateien laden. Der folgende Code ist ein Beispiel für das Laden von JQuery von Modernizr:

 Modernizr.load ([{load: '//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js', komplett: function () {if (! Window.jquery) {modernizr.load ('js/libs/jquery.6.6.Min. zum Laden und // ausführen, wenn es muss.

Dieser Code lädt zuerst die JQuery -Datei von Google CDN. Wenn der Download oder das Laden fehlschlägt, wird die vollständige Funktion ausgeführt. Stellen Sie zunächst fest, ob das JQEURY -Objekt existiert. Wenn es nicht existiert, lädt Modernizr die definierte native JS -Datei. Wenn auch die in vollständigen Dateien nicht erfolgreich geladen werden, werden die Datei "Anforderungen-jquery.js.js" geladen.

Modernizr ist definitiv ein notwendiges Tool, wenn Sie die neuesten HTML5/CSS3 verwenden, um Ihr Programm zu erstellen. Mit der Verwendung können Sie viel Code und Testarbeiten sparen und die entsprechenden neuen Funktionen in Form zusätzlicher Ladeskripte für einige Browser, die keine neuen Funktionen unterstützen, implementieren.

Originaladresse: http://weblogs.asp.net/dwahlin/archive/2011/11/16/detekting-html5-css3-features-using-moderizr.aspx