Wie Sie wissen, geht es bei der Erstellung responsiver Websites um viel mehr als nur um die 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 Modernisierung. In diesem Artikel erkläre ich, warum Modernizr ein unschätzbar wertvolles Werkzeug ist, wenn man über die Breite hinausgeht.
Bei der Frontend-Entwicklung passten Entwickler früher eine Website an die Einschränkungen der von einem bestimmten Browser verwendeten Layout-Engine an. 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, jeder mit seiner eigenen mobilen Version. In dieser Reihe von Browsern gibt es auch ältere Versionen, die von Benutzern nicht aktualisiert wurden. So wie das Erstellen mehrerer Layouts für mehrere Bildschirmgrößen irgendwann zu einem Nullsummenspiel wird, so wird auch das Erstellen mehrerer Frontends für mehrere Browser irgendwann zum Nullsummenspiel.
Wir verwenden responsives Webdesign, um neue, hochmoderne mobile Browser zu unterstützen. Bei der Anpassung an neue Browser ist es jedoch wichtig, dies nicht auf Kosten älterer Browser zu tun.
In der Vergangenheit bestand die Optimierung darin, eine Website für die gängigsten Browser zu erstellen und dann zu optimieren, um sicherzustellen, dass die Website auf einer Reihe gängiger Browser gleich aussieht. Designs müssten den Funktionen aller Browser gerecht werden.
Progressive Verbesserung ist eine Strategie, um mit der mangelnden Unterstützung moderner Funktionen durch Browser umzugehen. Es besteht die Versuchung, die aktuellsten Funktionen zu berücksichtigen, aber in einem responsiven Web hängt das Design einer Website vom Kontext ab, durch den sie betrachtet wird. Responsives Webdesign ist populär geworden, weil es den offensichtlichsten sich ändernden Kontext – die Größe des Rahmens – auflöst, aber der Kontext eines Browsers geht viel tiefer als seine Ansichtsfenstergröße.
SVG ist eine großartige Lösung für hochauflösende Displays, aber wie sieht es mit der Unterstützung in älteren Browsern aus? Es wird in IE 8 oder älter nicht unterstützt, daher müssen Sie ein Fallback einbauen, wenn Sie diesen Browser unterstützen. Sie könnten den Browser identifizieren und alternative Stile für diesen Browser bereitstellen, müssten dann jedoch dieselben alternativen Stile für jeden Browser bereitstellen, der SVG nicht unterstützt.
Wäre es nicht einfacher, wenn Sie einfach einen Stil schreiben könnten, der für jeden Browser verwendet wird, der SVG nicht unterstützt? Auf diese Weise müssten Sie nicht mit Fehlerberichten von Benutzern älterer Versionen Schritt halten. Sie könnten den Fallback einfach einmal einstellen und ihn dann vergessen.
Traditionell wurde die Funktionserkennung durch die Erkennung des Benutzeragenten des Browsers erreicht. Dies erfolgt über JavaScript unter Verwendung des Navigator-Objekts. Das Navigator-Objekt stammt aus der Netscape-Zeit und war einst das beste Tool für Entwickler in Sachen Cross-Browser-Kompatibilität.
Wenn Sie Chrome haben und DevTools aktiviert haben, öffnen Sie den Web-Inspektor Ihres Browsers, indem Sie mit der rechten Maustaste auf eine Seite klicken und „Element prüfen“ auswählen. Klicken Sie dann auf „Konsole“, geben Sie nach dem Caretzeichen „navigator.userAgent“ ein und drücken Sie die Eingabetaste. Dadurch wird der User-Agent Ihres aktuellen Browsers zurückgegeben, bei dem es sich um eine Textzeichenfolge handelt, die zur Identifizierung des verwendeten Browsers verwendet wird. Chrome gibt Folgendes zurück:
Mozilla/5.0 (Macintosh; Intel Mac OS
In vielerlei Hinsicht ist das Navigatorobjekt einer der besten Sensoren, die uns zur Verfügung stehen, um unser System darüber zu informieren, wozu unser Benutzer fähig ist; Allerdings ist es nicht sehr zukunftsfreundlich. Die Aktuatoren Ihrer Website basieren auf vielen Annahmen darüber, was der Browser tut und was nicht. Es ist außerdem unzuverlässig, da Benutzer es so konfigurieren können, dass auf Websites zugegriffen wird, die der Browser möglicherweise nicht unterstützt.
Was Modernizr macht
Modernizr ist eine JavaScript-Bibliothek zur Erkennung von Funktionen im Browser. Es wird im Kopf Ihrer Seite geladen und beim Laden der Seite ausgeführt. Das Hinzufügen zu Ihrer Website ist so einfach wie das Hinzufügen einer anderen JavaScript-Bibliothek, z. B. jQuery. Sobald Sie Modernizer jedoch hinzugefügt haben, haben Sie unglaublich viel Kontrolle über die Darstellung Ihrer Seite und stellen sicher, dass jedem Benutzer ein qualitativ hochwertiges Erlebnis geboten wird.
Nach dem Laden führt Modernizr eine Reihe von Prüfungen im Browser des Benutzers durch, um festzustellen, welche Funktionen der Browser unterstützt, und erstellt ein JavaScript-Objekt, das Sie zum Testen verwenden können. Modernizr bietet keine Unterstützung für diese Funktionen. Es bietet Ihnen lediglich die Möglichkeit, Ersatzunterstützung für moderne Funktionen bereitzustellen. Im Fall von SVG ermöglicht uns Modernizr beispielsweise die Bereitstellung eines Fallback-Images für Browser, denen SVG-Unterstützung fehlt.
Modernizr wendet außerdem eine Reihe von Klassen auf das HTML-Tag an, sodass Sie das CSS der Seite mithilfe der entsprechenden CSS-Klassen ändern können. Mit diesen CSS-Klassen können Sie mithilfe von CSS-Systemen Aktoren erstellen, die Ihre Seiten anpassen, um die für eine Seite verfügbaren progressiven Verbesserungen zu ermöglichen.
Im Gegensatz zur Verwendung des Benutzeragenten erkennt Modernizr Funktionen direkt, indem es eine Reihe von JavaScript-Tests ausführt, die boolesche Werte (wahr oder falsch) zurückgeben. Dies bestimmt die Klassen, die auf das HTML-Tag festgelegt werden, und gibt Ihnen die Möglichkeit, mithilfe von JavaScript zu erkennen, ob eine Funktion verfügbar ist.
Modernizr installieren
Die Installation von Modernizr ist so einfach wie das Verknüpfen mit der JavaScript-Bibliothek im Kopf Ihrer Seite. Der Installationsprozess wird jedoch komplizierter, wenn Sie die Version erstellen, 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 Datei mit 42 KB. Diese Version ist großartig, wenn Sie sich gut mit JavaScript auskennen und einige Optimierungen an den durchgeführten Tests vornehmen möchten. Da es unkomprimiert ist, ist es leicht zu lesen und zu erweitern. Überlassen Sie es jedoch am besten Entwicklern mit fundierten JavaScript-Kenntnissen.
Für diejenigen unter Ihnen, die sich möglicherweise nicht vollständig mit JavaScript auskennen oder schnell eine angepasste Version von Modernizr erstellen möchten, kommt hier die Produktionsversion der Bibliothek ins Spiel. Mit dem Tool zum Erstellen von Produktionsversionen auf der Website haben Sie die Möglichkeit, eine Version nur mit den Tests zu erstellen, die Sie benötigen.
Dies ist praktisch, wenn Sie wissen, dass Sie nur eine bestimmte Reihe von Tests benötigen. Beispielsweise nutzt Ihre Website möglicherweise nicht die Vorteile von CSS-Boxschatten, muss aber möglicherweise CSS-Verläufe unterstützen. Mit dem Build-Tool können Sie die von Ihnen benötigten Tests einschließen und die nicht benötigten ausschließen, wodurch der Quellcode gekürzt und die Gesamtladezeit Ihres Benutzers niedrig gehalten wird.
In unserem Beispiel arbeite ich mit der Entwicklungsversion. Ich finde, dass es beim Erstellen einer Website am besten ist, mit der Vollversion zu arbeiten und dann, sobald Sie wissen, welche Funktionen Sie auf Ihrer Website verwenden werden, die Version zu kürzen.
Verwendung von Modernizr für browserübergreifendes CSS
Lassen Sie uns mit Modernizr eine einfache Funktionserkennung durchführen. Wir beginnen mit einer Rohbeispielseite.