Wie Sie wissen, gibt es viel mehr zum Erstellen responsiver Websites als Breite. Sie benötigen Sensoren, die Ihnen Feedback geben, um Websites basierend auf anderen Faktoren anzupassen.
Der beste Weg, unser Feedback vom Sensor oder Browser Ihres Benutzers zu verbessern, ist die Verwendung einer JavaScript-Bibliothek namens Modernizr. In diesem Artikel werde ich erklären, warum, wenn Sie über die Breite gehen, ist Modernizr so ein unschätzbares Werkzeug.
In der Front-End-Entwicklung haben Entwickler eine Site an die Beschränkungen der von einem bestimmten Browser verwendeten Layout-Engine angepasst. Im Jahr 2003 gab es nur drei Browser: Netscape, Internet Explorer und Opera. Firefox, Safari und der erste mobile Browser Opera Mini wurden 2005 veröffentlicht. Chrome wurde erst 2008 veröffentlicht.
Derzeit gibt es fünf große Browser, von denen jeder eine eigene mobile Version hat. In diesem Bereich von Browsern gibt es auch ältere Versionen, die Benutzer nicht aktualisiert haben. Auf die gleiche Weise, wie das Erstellen mehrerer Layouts für mehrere Bildschirmgrößen zu einem Nullsummenspiel wird, werden auch mehrere Frontends für mehrere Browser erstellt.
Wir verwenden Responsive Webdesign, um neue, innovative mobile Browser zu unterstützen. Bei neuen Browsern ist es jedoch wichtig, dies nicht auf Kosten älterer Browser zu tun.
Historisch gesehen war die Optimierung ein Produkt des Aufbaus einer Website für die gängigsten Browser und der Optimierung, um sicherzustellen, dass die Website in einer Reihe gängiger Browser gleich aussieht. Designs müssten die Fähigkeiten aller Browser berücksichtigen.
Progressive Enhancement ist eine Strategie, um mit der Unfähigkeit von Browsern fertig zu werden, moderne Funktionen zu unterstützen. Es besteht die Versuchung, für die aktuellsten Funktionen zu bauen, aber in einem responsiven Web ist das Design einer Site kontextabhängig zu dem Frame, durch den sie angezeigt wird. Responsives Webdesign ist populär geworden, weil es den offensichtlichsten sich ändernden Kontext löst - die Größe des Frames -, aber der Kontext eines Browsers läuft viel tiefer als seine Darstellungsgröße.
SVG ist eine großartige Lösung für hochauflösende Displays, aber was ist mit der Unterstützung älterer Browser? Es wird nicht in IE 8 oder älter unterstützt, daher müssen Sie einen Fallback einbauen, wenn Sie diesen Browser unterstützen. Sie können den Browser identifizieren und alternative Stile für diesen Browser bereitstellen, aber dann müssten Sie dieselben alternativen Stile für jeden Browser bereitstellen, der SVG nicht unterstützt.
Wäre es nicht einfacher, wenn Sie einfach einen Stil schreiben würden, der gegen jeden Browser verwendet würde, der SVG nicht unterstützt? Auf diese Weise müssen Sie nicht mit Fehlermeldungen von Benutzern älterer Versionen mithalten. Sie könnten das Fallback einfach einmal einstellen und es vergessen.
Herkömmlicherweise wurde die Merkmalserkennung durch Erkennen des Benutzeragenten des Browsers durchgeführt. Dies geschieht über JavaScript mithilfe des Navigatorobjekts. Das Navigator-Objekt stammt aus den Netscape-Tagen und war das beste Tool des Entwicklers für die browserübergreifende Kompatibilität.
Wenn Sie Chrome haben und DevTools aktiviert haben, öffnen Sie den Webinspektor Ihres Browsers, indem Sie mit der rechten Maustaste auf eine Seite klicken und Element prüfen auswählen. Klicken Sie dann auf Console und geben Sie nach dem Einfügen "navigator.userAgent" ein und drücken Sie die Eingabetaste. Dadurch wird der Benutzer-Agent Ihres aktuellen Browsers zurückgegeben. Dabei handelt es sich um eine Textzeichenfolge, die zur Identifizierung des verwendeten Browsers verwendet wird. Chrome gibt Folgendes zurück:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.35 (KHTML, like Gecko) Chrome/27.0.1443.2 Safari/537.35In vielerlei Hinsicht ist das Navigator-Objekt einer der besten Sensoren, die wir zur Verfügung haben, um unser System darüber zu informieren, zu was unser Benutzer fähig ist. es ist jedoch nicht sehr freundlich für die Zukunft. Es basiert auf den Aktoren Ihrer Site auf einer Menge Annahmen darüber, was der Browser tut und nicht unterstützt. Es ist außerdem unzuverlässig, da Benutzer es so konfigurieren können, dass es auf Websites zugreift, die der Browser möglicherweise nicht unterstützen kann.
Modernizr ist eine JavaScript-Bibliothek zur Erkennung von Funktionen im Browser. Es ist im Kopf Ihrer Seite geladen und läuft während eines Seitenladevorgangs. Das Hinzufügen zu Ihrer Site ist so einfach wie das Hinzufügen einer anderen JavaScript-Bibliothek, wie z. B. jQuery, aber sobald sie hinzugefügt wurde, bietet Ihnen Modernizer eine unglaubliche Menge an Kontrolle beim Rendern Ihrer Seite und stellt sicher, dass jedem Benutzer ein Qualitätserlebnis geboten wird.
Nach dem Laden führt Modernizr eine Reihe von Überprüfungen gegen den Browser des Benutzers durch, um festzustellen, welche Funktionen der Browser unterstützt, und erstellt ein JavaScript-Objekt, mit dem Sie testen können. Modernizr erstellt keine Unterstützung für diese Funktionen. Es gibt Ihnen einfach eine Möglichkeit, Fallback-Unterstützung für moderne Funktionen bereitzustellen. Im Fall von SVG ermöglicht es uns Modernizr beispielsweise, ein Fallback-Image für Browser ohne SVG-Unterstützung bereitzustellen.
Modernizr wendet außerdem eine Reihe von Klassen auf das HTML-Tag an, wodurch Sie das CSS der Seite mithilfe der entsprechenden CSS-Klassen ändern können. Mit diesen CSS-Klassen können Sie CSS-Systeme verwenden, um Aktuatoren zu erstellen, die Ihre Seiten so anpassen, dass die für eine Seite verfügbaren progressiven Verbesserungen möglich sind.
Im Gegensatz zur Verwendung des Benutzeragenten erkennt Modernizr Features direkt, indem eine Reihe von JavaScript-Tests ausgeführt wird, die boolesche (wahre oder falsche) Werte zurückgeben. Dies schreibt die Klassen vor, die auf das html-Tag festgelegt sind, und gibt Ihnen die Möglichkeit, mithilfe von JavaScript festzustellen, ob eine Funktion verfügbar ist.
Die Installation von Modernizr ist so einfach wie das Verknüpfen mit der JavaScript-Bibliothek im Kopf Ihrer Seite, aber wo der Installationsprozess kompliziert wird, ist die Erstellung der Version, die Sie benötigen. Modernizr steht in zwei Versionen zum Download zur Verfügung die Entwicklungsversion und die Produktionsversion.
Die Entwicklungsversion ist eine vollständige unkomprimierte 42 KB-Datei. Diese Version ist großartig, wenn Sie mit JavaScript vertraut sind und einige Optimierungen an den Tests vornehmen möchten. Da es unkomprimiert ist, ist es leicht zu lesen und zu erweitern, aber es ist am besten den Entwicklern mit einem festen Verständnis von JavaScript überlassen.
Für diejenigen unter Ihnen, die JavaScript nicht vollständig beherrschen oder schnell eine angepasste Version von Modernizr erstellen möchten, kommt hier die Produktionsversion der Bibliothek ins Spiel. Das Produktionsversions-Erstellungstool auf der Site bietet Ihnen die Möglichkeit, eine Version mit nur den von Ihnen benötigten Tests zu erstellen.
Dies ist nützlich, wenn Sie wissen, dass Sie nur bestimmte Tests benötigen. Zum Beispiel nutzt Ihre Site möglicherweise keine CSS-Box-Schatten, aber sie muss möglicherweise CSS-Gradienten unterstützen. Mit dem Build-Tool können Sie die benötigten Tests einbeziehen und diejenigen ausschließen, die Sie nicht benötigen. Dadurch bleiben der Quellcode und die Gesamtladezeit Ihres Benutzers erhalten.
In unserem Beispiel arbeite ich an der Entwicklungsversion. Ich finde, dass es beim Erstellen einer Website am besten ist, mit der Vollversion zu arbeiten. Wenn Sie dann wissen, welche Funktionen Sie auf Ihrer Website verwenden, sollten Sie die Version verkleinern.
Machen wir eine einfache Feature-Erkennung mit Modernizr. Wir beginnen mit einer rohen Beispielseite.
Lassen Sie uns diesen kleinen Test verwenden, um festzustellen, ob unser Browser SVG unterstützen kann oder nicht. Der Einfachheit halber fügen wir der Seite einfach zwei Span-Tags hinzu, um Support zu erkennen.
Huzzah! You have SVG support.BOO! You don't have SVG support.Wenn Sie dies in einem Browser testen, der SVG unterstützt, sehen Sie die Nachricht "Huzzah! Sie haben SVG-Unterstützung. "Wenn Sie jedoch einen Browser haben, der SVG nicht unterstützt, finden Sie den" BOO! Sie haben keine SVG-Unterstützung. "Nachricht.
Dieses Beispiel ist ziemlich rudimentär, zeigt aber die Kernidee, mit Modernizr Cross-Browser-Probleme zu beheben. Wenn wir denselben Fix unter Verwendung der alten Benutzeragentenmethode ausführen würden, müssten wir ein Stylesheet für jeden Browser haben, der SVG nicht unterstützt, und für jeden Browser unser CSS ändern. (Für alle Interessierten sind die einzigen großen Browser ohne SVG-Unterstützung Internet Explorer 7 und darunter.)
Durch Hinzufügen der Klasse "svg / no-svg" zum HTML-Code auf der Seite verfügt Ihr CSS jetzt über einen Selektor, der zum Überschreiben vorhandener CSS-Regeln verwendet werden kann. Da es sich um das übergeordnete Tag handelt, kann es andere Klassen auf der Seite überschreiben.
In diesem Fall erhalten beide Span-Tags display: none ;. Wenn keine SVG-Unterstützung vorhanden ist, überschreibt die display: inline-Deklaration auf dem span-Tag mit der .no-Klasse die Anzeige: Versteckt dank der no-svg-Regel auf dem html-Tag.
Versuchen wir ein nützlicheres Beispiel derselben Idee. Wir möchten vielleicht ein SVG-Hintergrundbild auf der Seite haben, das auf ein PNG zurückgreift, wenn der Browser SVG nicht unterstützt. Standardmäßig verwenden wir das PNG-Bild. Auf diese Weise wird das SVG nicht bedient, es sei denn, es wird benötigt und wird zu einer progressiven Verbesserung.
Jetzt haben wir einen tollen SVG-Schädel, der für Nutzer mit hochauflösenden Displays großartig und knackig aussieht und dennoch für Nutzer mit älteren Browsern gut aussieht.
Es gibt eine große Fülle von Informationen über Modernizr. Wir haben Ihnen gezeigt, wie browserübergreifend gearbeitet werden kann, ohne sich eine laufende Liste von Browsern merken zu müssen, die SVG unterstützen.
Es funktioniert außergewöhnlich als ein System, mit dem Sie Ihre Benutzeraktuatoren bedienen können, um schnelle und hochfunktionale Websites zu erstellen.
Verwenden Sie Modernizr in Ihren Projekten? Welche anderen Methoden haben Sie für die Bereitstellung von Responsive Content verwendet? Lassen Sie es uns in den Kommentaren wissen.
Ausgewähltes Bild / Vorschaubild, divergentes Linienbild über Shutterstock.