Vor zehn Jahren verwendeten nur die neuesten Website-Designer CSS für Webseitenlayout und Verzierung. Zu diesem Zeitpunkt war die Unterstützung der Browser für das CSS -Layout sowohl unvollständig als auch voller Lücken. Während diese Personen auf Web -Standardisierung bestanden, mussten sie Hacks verwenden, um ihre Seiten in allen Browsern normal anzuzeigen. Eine der eher verwendeten Hack -Technologien ist das Browser -Sniffing, das das Attribut "Navigator.Useragent in JavaScript" verwendet, um zu bestimmen, welche Marke und Version des Browsers der Benutzer verwendet. Die Browser -Sniffing -Technologie kann den Abzweigcode schnell für verschiedene Anweisungen auf verschiedene Browser anwenden.
Heute sind CSS-basierte Layouts bereits sehr häufig und Browser unterstützen es sehr solide. Aber jetzt sind CSS3 und HTML5 hier, die Geschichte hat sich umgedreht und an ihren ursprünglichen Ort zurückgekehrt - die Unterstützung für diese neuen Technologien verschiedener Browser hat wieder ungleichmäßig geworden. Wir sind seit langem daran gewöhnt, ordentliche und standardhafte Codes zu schreiben, und wir werden keine CSS-Hacks oder Browser mehr verwenden, um unzuverlässige und niedrigstuftige Technologien zu schnüffeln. Wir glauben auch, dass immer mehr Benutzer der Idee zustimmen werden, dass Websites in allen Browsern nicht gleich aussehen müssen. Was sollen wir angesichts dieser vertrauten Situation (unterschiedliche Browserunterstützung) tun? Einfach: Verwenden Sie die Funktionserkennung, was bedeutet, dass wir den Browser nicht fragen müssen, wer Sie sind? Unzuverlässige Spekulationen machen. Stattdessen fragen wir den Browser, ob Sie dies oder das tun können. Dies ist leicht zu erkennen, Browser, aber es ist immer noch langweilig, Zeit manuell einzeln zu testen. Modernizr kann uns zu diesem Zeitpunkt helfen.
Modernizr: Eine speziell für HTML5 und CSS3 entwickelte Funktion für Funktionserkennungsbibliothek
Modernizr ist eine Open -Source -JS -Bibliothek, die es Designern erleichtert, die unterschiedliche Erfahrungsstufen basierend auf den Unterschieden in den Gastbrowsern (in Bezug auf Unterschiede bei der Unterstützung neuer Standards) entwickeln. Es ermöglicht Designer, HTML5- und CSS3 -Funktionen für die Entwicklung in Browsern zu nutzen, die HTML5 und CSS3 unterstützen, ohne die Kontrolle anderer Browser zu beeinträchtigen, die diese neuen Technologien nicht unterstützen.
Wenn Sie das Skript von Modernizr in eine Webseite einbetten, wird festgestellt, ob der aktuelle Browser CSS3-Funktionen wie @font-face, Border-Radius, Border-Image, Box-Shadow, RGBA () usw. unterstützt. Auf der Grundlage dieser Informationen können Sie sie in Browsern verwenden, die diese Funktionen unterstützen, um zu entscheiden, ob Sie einen JS-basierten Fallback erstellen oder einfach diejenigen herabstufen, die sie nicht unterstützen. Darüber hinaus kann Modernizr auch IE ermöglichen, die Anwendung von CSS -Stilen auf HTML5 -Elemente zu unterstützen, sodass Entwickler diese mehr semantischen Tags sofort verwenden können.
Modernizr wird auf der Grundlage der Theorie der progressiven Verbesserung entwickelt und unterstützt und ermutigt Entwickler, ihre Website -Schicht für Schicht zu erstellen. Alles beginnt mit einer müßigen Grundlage mit angewendetem JavaScript und fügt nacheinander erweiterte Anwendungsebenen hinzu. Da Modernizr verwendet wird, ist es für Sie leicht zu wissen, was der Browser unterstützt. Schauen wir uns ein Beispiel für das Erstellen von Websites mit modernster Anwendung an, die modernisierte Websites erstellen.
Beginnen Sie mit der Anwendung von Modernizr
Laden Sie zunächst die neueste stabile Version von Modernizr von www.modernizr.com herunter (derzeit ist die offizielle Website von Modernizr in China blockiert. Wir können sie von Github herunterladen. Um einfacher zu sein, können Sie die neueste Version 1.7 -Skriptdatei vom Master herunterladen). Auf der offiziellen Website sehen Sie auch eine Liste aller Funktionen, die sie zur Erkennung unterstützt (die letzte Seite dieses Artikels gibt diese Listen, damit Kinderschuhe, die nicht durch die Wand gedreht werden können, wissen, welche sie unterstützen). Fügen Sie nach dem Herunterladen der neuesten Version (der Autor, der Version 1.5 beim Schreiben dieses Artikels verwendet hat) zum Seitenbereich hinzu:
Als nächstes fügen Sie dem Element keine Klasse hinzu.
Wenn Modernizr läuft, verwandelt es die No-JS-Klasse in JS, um Sie mitzuteilen, dass sie ausgeführt wird. Modernizr tut dies nicht nur, sondern fügt allen nachweisenden Funktionen auch eine Klasseklasse hinzu. Wenn der Browser keine Funktion unterstützt, präfixt er den Klassennamen, der der Funktion von NO- entsprechend ist. Ihr Element kann also so werden:
Modernizr erstellt auch ein JS -Objekt namens Modernizr, das eine Liste von booleschen Ergebnissen für jede erkannte Funktion ist. Wenn der Browser ein neues Canvas -Element unterstützt, ist der Wert von modernizr.canvas wahr; Wenn der Browser dieses neue Element nicht unterstützt, ist der entsprechende Wert falsch. Dieses JS -Objekt enthält auch detailliertere Informationen für bestimmte Funktionen, wie z. B. Modernizr.video.h264, Ihnen mitteilen, ob der Browser diesen speziellen Codec unterstützt. Modernizr.InputTypes.search wird Ihnen mitteilen, ob der aktuelle Browser den neuen Sucheingangstyp usw. unterstützt.
Unsere unverarbeitete, einfache kleine Seite sieht ein bisschen wie ein Vor-Test-System aus, hat aber eine bessere Semantik und Zugänglichkeit. Fügen wir ihm einen kleinen grundlegenden Stil hinzu: ein kleines Textformat, eine Farbe und ein kleines Layout, damit es besser aussieht. Gegenwärtig gibt es nichts Neues, fügen Sie einer semantischen HTML -Seite nur Ausdrucksstile hinzu und schauen Sie sich die Seite nach dem Hinzufügen des Stils an.
Im Folgenden möchten wir diese Seite verbessern, um sie interessanter zu machen. Ich möchte einen besonderen Texteffekt auf H1 auf dem Kopf anwenden, die Liste der Erkennungsmerkmale in zwei Spalten aufteilen und dann alles über Modernizr auf der rechten Seite bringen. Ich möchte auch den Rand um den Inhalt der Seite schön machen. Je leistungsstärkerer CSS3 Sie nun einer Regel, die sie ignoriert, mehr Eigenschaften hinzufügen, wenn der Browser sie nicht unterstützt. Mit CSS Cascade (Vererbung) können Sie neue Eigenschaften wie Border-Radius verwenden, ohne sich auf Modernizr zu verlassen. Die Verwendung von Modernizr kann Ihnen jedoch einige Funktionen zur Verfügung stellen, die nicht mit vorhandenen Mitteln bereitgestellt werden können: dynamisch geänderte Klassennamen basierend auf der unterschiedlichen Unterstützung des Browsers für neue Dinge. Ich werde dies veranschaulichen, indem ich unserer Seite 2 neue Regeln hinzufüge:
Die erste Regel fügt dem Element #Content eine 12-Pixel-abgerundete Ecke hinzu. Auf der vorhandenen Seite haben wir jedoch einen Rand mit dem #-Content -Element mit einem Attributwert von 2PX Outset Nr. 666 festgelegt. Das sieht ziemlich gut aus, wenn die Box rechtswinkel ist, aber nicht in abgerundeten Ecken. Dank Modernizr kann ich eine 1px echte Kante mit dem vom Browser unterstützten Border-Radius festlegen.
Die zweite Regel ist etwas fortgeschrittener. Wir haben dem Element #Content einen Schatten hinzugefügt und das Randattribut für Browser entfernt, die Box-Shadow-Attribute unterstützen. Warum? Da die meisten Browser keine gute Leistung für die Kombination von Kanten und Ecken mit Schatten bieten (dies ist ein Fehler in einem Browser, der bezeichnet werden sollte, aber wir müssen es jetzt ertragen). Anstatt Schatten zu verwenden und nur Grenzen zu verwenden, würde ich lieber Schatten verwenden, um Elemente zu umgeben. Auf diese Weise kann ich die beste, genaue und beste CSS-Leistung der Welt haben: Ein wunderschöner Schatten wird in einem Browser erscheinen, der das Attribut des Box-Shadow unterstützt. Ein Browser, der nur das borgendliche Attribut unterstützt, präsentiert einen schönen, abgerundeten, dünnen Rand. Für die gebrochenen Browser, die diese beiden nicht unterstützen, werden wir einen 2-Pixel-rechtwinkligen Grenze sehen.
Im Folgenden möchten wir eine benutzerdefinierte spezielle Schriftart auf den Header anwenden. Das Folgende ist unsere aktuelle Aussage für H1 ohne Änderungen:
Diese Aussagen funktionieren gut auf unseren Basisseiten, und die 27-Pixel-Textgröße ist auch für die Anzeige der Schriftarten geeignet, die wir für H1 festgelegt haben. Aber für die Schrift werde ich namens Beautiful, 27 Pixel zu klein. Hier möchten wir andere Regeln hinzufügen, um diese benutzerdefinierte Schriftart zu verwenden:
Zunächst fügen wir die @font-face-Deklaration hinzu und geben den Pfad, den Dateinamen und den Schriftnamen für unsere benutzerdefinierten Schriftarten an. Dann verwenden wir eine CSS -Anweisung, um den Schriftart für unseren H1 auszuwählen. Sie werden sehen, dass ich hier eine große Schriftgröße ausgewählt habe, da die schöne Schrift selbst viel kleiner als der Text anderer Schriftarten ist. Daher müssen wir den Browser anweisen, H1 bei der Anzeige unserer benutzerdefinierten Schriftarten eine große Schriftgröße zu geben.
Darüber hinaus hat unser wunderschöner handgeschriebener Text einige Rendering -Probleme mit Textschatten. Daher müssen wir das Text -Schatten abbrechen, wenn der Browser beschließt, benutzerdefinierten Text zu verwenden. Darüber hinaus muss die Liste der Erkennungsmerkmale in zwei Spalten unterteilt werden. Um mein Ziel zu erreichen, möchte ich das Awesome CSS -Spalten -Attribut verwenden, mit dem der Browser die Liste intelligent in Spalten unterteilt, ohne seine Reihenfolge zu stören. Obwohl unsere Liste keine numerische Zahl hat, ist sie auch in alphabetischer Reihenfolge angeordnet. Natürlich unterstützen nicht alle Browser diese Eigenschaft. Für diejenigen, die nicht unterstützen, verwenden wir Float, um den Zweck von 2 Spalten zu erreichen. Nach der Verwendung von Float wird die Liste nicht mehr alphabetisch angeordnet, aber das ist besser als nichts.
Ich habe Modernizr erneut verwendet, um verschiedene Eigenschaften für verschiedene Situationen festzulegen. Wenn der Browser CSS -Spalten unterstützt, wird die Liste perfekt in 2 Spalten unterteilt. Wenn es nicht unterstützt wird, können wir auch eine schwimmende Methode verwenden, um die Liste durch Schwimmern zu zwei Spalten zu machen. Obwohl es nicht so perfekt ist, ist es besser, als eine lange Liste einzelner Spalten direkt anzuwenden.
Hier haben Sie vielleicht bemerkt, dass ich dem Attribut verschiedene Präfixe (-moz-, -webkit-, -o-) hinzugefügt habe. Dies liegt daran, dass verschiedene Browserhersteller unterschiedliche Definitionen der Implementierung dieser Funktion haben. Um diese Funktion zu implementieren, müssen sie ihre entsprechenden Präfixe zu verschiedenen Browsern hinzufügen.
Nach diesen Änderungen sieht unsere neue Seite besser aus.
Wir werden unserer Seite weiter progressive Verbesserungen hinzufügen, um dieses Tutorial zu beenden. Webkit-basierte Browser unterstützen einige weitere großartige Spezialeffekte wie CSS-Transformation, Animation und dreidimensionale Transformation. Und ich möchte einige dieser Spezialeffekte auf den Seiten der letzten Stufe anwenden. Auch diese Eigenschaften werden zu unseren vorhandenen CSS hinzugefügt und in Browsern ignoriert, die sie nicht unterstützen. Daher ist es angemessen, Modernizr für diese Situation zu verwenden, in der einerseits eine allmähliche Verbesserung nicht unterstützt wird.
Erster Satz:
Die @KeyFrames -Regel ist Teil der neuen CSS -Animationsspezifikation und unterstützt derzeit nur Webkit. Sie können einen vollständigen Animationspfad für jedes Attribut deklarieren und diese in jeder Phase ändern, die Sie mögen. Um mehr über Animationen zu erfahren, lesen Sie die Spezifikation von W3C Working Draft.
Hier fügen wir den Code hinzu, der ein Element im dreidimensionalen Raum dreht:
Weil das Logo gedreht werden muss und ich hoffe, dass es mit dem Hintergrund harmonischer mit dem Hintergrund versteht, wenn es gedreht wird, wird hier eine PNG -Formatdatei verwendet. Ich habe auch einen Überlauf verwendet: verstecktes Attribut, um den Text im Header mit indentum-9999-Pixel auszublenden. Es ist interessant, dass die Elemente in 3D drehen, aber nicht zu schön. Schließlich haben wir uns für die Animationsregel entschieden, ihre Rotationsperiode auf 2 Sekunden festgelegt, sich entlang einer eigenen zentralen Achse drehen und nie angehalten.
Die letzte Seite sieht gut aus und setzt sogar lustige Animationen für den Webkit -Browser ein. Ich hoffe, dass Sie bisher verstehen können, wie großartig es Ihr Handgelenk mit Modernizr -Kontrolle über Ihre Website machen kann und wie einfach es wirklich progressiv verbessert werden kann. Dies ist nicht nur der volle Vorteil von Modernizr, sondern kann Ihnen auch helfen, Fallbacks basierend auf JS zu erstellen und die fantastischen neuen Funktionen von HTML5 anzuwenden.