Wie Modernizr Ihnen bei der Implementierung von CSS-Fallbacks helfen kann
Veröffentlicht: 2021-04-05Als Webdesigner werden wir oft ermutigt, die neuesten und besten Funktionen zu nutzen, die CSS zu bieten hat. Und es gibt viele überzeugende Gründe dafür. Techniken wie CSS Grid und Flexbox ermöglichen eine schnelle Bearbeitung gängiger Layouts, während CSS-Animationen Bewegung und Interaktivität hinzufügen. Das ist nur die Spitze des Eisbergs.
Die Implementierung dieser Funktionen kann jedoch manchmal auf Kosten der Browserkompatibilität gehen. Bei Websites, die immer noch eine beträchtliche Anzahl von Benutzern mit älteren Browsern haben, oder bei sehr neuen Funktionen besteht die Gefahr, dass einige Personen außen vor bleiben.
Philosophisch gesehen sind einige Designer damit einverstanden – und das ist in Ordnung. Die Implementierung von Fallbacks für diese Funktionen ist jedoch möglicherweise einfacher als Sie denken. Diese ausfallsicheren Maßnahmen bieten ein angemessenes Abbild eines bestimmten Layouts oder Designelements und sind mit älteren Webbrowsern kompatibel.
Heute zeigen wir Ihnen, wie Sie die Funktionserkennungsbibliothek von Modernizr für diesen Zweck verwenden. Auf geht's!
Was ist Modernizr?
Modernizr ist eines dieser praktischen Tools, auf die sich Webdesigner seit Jahren verlassen. Es handelt sich um eine Bibliothek, die angepasst werden kann, um bestimmte Funktionen beim Laden einer Webseite zu „erkennen“ (in Wirklichkeit führt sie Tests aus). Von dort aus fügt es dem <HTML> -Element der Seite CSS-Klassen hinzu, sodass Designer ihren Code auf der Grundlage dessen ausrichten können, was die Bibliothek findet.
In unserem Fall verwenden wir es, um CSS Flexbox zu erkennen. Es ist jedoch auch in der Lage, nach Funktionen zu suchen, die sich auf HTML und JavaScript beziehen. Sie können damit beispielsweise feststellen, ob ein Browser HTML5 unterstützt. Wenn nicht, kann das verfügbare HTML5-Shiv-Skript verwendet werden, um es sozusagen auf Code zu bringen.
Was wirklich nett ist, ist, dass Sie Modernizr an die Bedürfnisse Ihres Projekts anpassen können. Auf der Benutzeroberfläche ihrer Website können Sie nur die Elemente auswählen, die Sie erkennen möchten. Nachdem Sie Ihre Auswahl getroffen haben, klicken Sie auf die Schaltfläche „Erstellen“, um ein benutzerdefiniertes herunterladbares Paket zu erstellen.
Unser Aufbau
Für unsere Zwecke (und um die Dinge einfach zu halten) erstellen wir unser Modernizr-Paket, um Flexbox zu erkennen. Wir werden uns auch dafür entscheiden, den Code zu minimieren und CSS-Klassen hinzuzufügen .
Schritt 1: Einrichten der Demo
Um zu demonstrieren, wie das alles funktioniert, sind ein paar Dateien erforderlich – beide auf GitHub verfügbar:
- flexgrid.css – Dies ist unser einfaches CSS-Flexbox-Rastersystem. Sie werden feststellen, dass es Klassen für unterschiedliche Ausrichtungen und Spaltenbreiten gibt. Darüber hinaus gibt es einen speziellen Satz von
.no-flexboxKlassen, die ebenfalls CSS-Floats der alten Schule verwenden. Dies wird uns helfen, einen ähnlichen Layoutstil in älteren Browsern zu erstellen. - modernizr-custom.js – Das oben genannte Skript erkennt, ob CSS Flexbox vom aktuellen Browser unterstützt wird oder nicht.
Als Nächstes wollen wir ein neues HTML-Dokument erstellen, das beide oben genannten Dateien im <head> -Bereich aufruft. Darüber hinaus benötigt das Dokument ein Beispiel-CSS-Flexbox-Layout und einige Inhalte.
Sie können gerne die unten stehende Demodatei zum Experimentieren verwenden. Es enthält ein einfaches 3-Spalten-Layout, zusammen mit einigen kleineren visuellen Verbesserungen (mehr dazu gleich).
Schritt 2: Zeigen Sie das HTML-Dokument in einem modernen Browser an
Jetzt ist es Zeit zu sehen, wie unsere Demo in einem Browser aussieht. Verwenden wir zunächst einen modernen Webbrowser, der Flexbox unterstützt.
Zumindest vermuten wir, dass es Flexbox unterstützt. Wie können wir das sicher sagen? Dafür ist Modernizr da.
In unserem Fall möchten wir uns die Quelle unserer Demoseite ansehen, insbesondere das <HTML> -Element. Wenn dem Element eine flexbox -Klasse hinzugefügt wird, wissen wir, dass unser Browser diese Funktion unterstützt. Fahren Sie fort und sehen Sie sich den Seitenquelltext in Ihrem Browser an – wir warten.
Wo ist die Klasse?
Wenn Sie versucht haben, den vollständigen Quellcode der Seite anzuzeigen, ist Ihnen vielleicht aufgefallen, dass das <HTML> -Element keine Klasse enthält. Keine Sorge – das ist normal.
Das liegt daran, dass die Klasse zur Laufzeit hinzugefügt wird, nachdem Modernizr das ausgewählte Feature getestet hat. Daher wird es nicht im vollständigen Quellcode angezeigt.
Verwenden Sie die Entwicklertools Ihres Browsers
Öffnen Sie stattdessen die Entwicklertools Ihres Webbrowsers (drücken Sie die Taste F12 auf Ihrer Tastatur). Dadurch erhalten Sie einen genauen Blick auf das <HTML> -Element.
Hier verwenden wir die neueste Version der Firefox Developer Edition. Laut Modernizr unterstützt es CSS Flexbox. Yay!
Schritt 3: Testen Sie das CSS-Fallback in einem Legacy-Browser
In unserem modernen Browser sieht alles ziemlich gut aus. Aber wie sieht es mit Legacy-Software aus?
Unsere Stile sind so eingestellt, dass sie CSS-Floats in Browsern verwenden, die Flexbox nicht unterstützen. Dieser Fallback sollte es uns ermöglichen, ein mehrspaltiges Layout zu erstellen, selbst bei alten Setups.
Laut Can I use wird Flexbox teilweise schon ab Internet Explorer 10, Firefox 2, Chrome 4 und Safari 3.1 unterstützt. Viele Jahre sind vergangen, seit diese Browser weit verbreitet waren. Vor allem der IE hält sich hier und da aber noch auf.
Modernizr kann so konfiguriert werden, dass es auf teilweise Unterstützung testet – aber es wird chaotisch. Dies führt dazu, dass mehr CSS-Fallbacks geschrieben werden, die eine Reihe verschiedener Situationen berücksichtigen. Es ist nicht sehr effizient. Daher suchen wir in unseren Tests nach Alles-oder-Nichts-Unterstützung.
Werfen wir einen Blick auf unsere Demo in IE 10 (über einen Browser-Testdienst) und sehen, was passiert.
Nicht zu schäbig. Unsere dritte Spalte wird in die nächste Zeile verschoben, die angepasst werden kann. Aber was ist mit der Flexbox-Unterstützung?
Ein kurzer Blick auf die Entwicklertools von IE zeigt, dass unser <HTML> -Element eine Klasse von no-flexbox . Das bedeutet, dass Flexbox hier nicht unterstützt wird und der CSS-Fallback verwendet wird.
Korrigieren des Layouts für CSS-Floats
Unsere Fallback-CSS-Floats kooperieren nicht mit den visuellen Verbesserungen, die wir vorgenommen haben. Die dritte Spalte wird auf eine zweite Reihe heruntergeschoben, was nicht sehr schön aussieht.
Das liegt daran, dass Floats der Spaltenbreite, die wir zuvor im Stylesheet festgelegt haben, Auffüllung und Rahmen hinzufügen . Flexbox hingegen kann sich an diese Elemente anpassen, ohne die Gesamtspaltenbreite zu erhöhen. Daher der Unterschied in den Ergebnissen.
Es gibt ein paar verschiedene Dinge, die wir tun könnten, um die Situation zu korrigieren. Wir könnten die Breite der Spalten verringern oder sogar den Rand zwischen den Spalten verkleinern. Versuchen wir, die Spaltenbreite von 30.66% auf 28.66% zu reduzieren.
Es funktionierte! Unsere Spalten werden jetzt fröhlich angezeigt und sind den Flexbox-Versionen einigermaßen ähnlich. Abgesehen von einigen Abstandsunterschieden ist dies zumindest in einem alten Browser verwendbar. Wir könnten hineingehen und weitere Änderungen vornehmen, um dem Original noch näher zu kommen.
Browserfunktionen erkennen und entsprechend anpassen
Während sich unsere Demonstration auf die Erkennung von CSS Flexbox konzentrierte, kann Modernizr so viel mehr. Es kann nach anderen gemeinsamen Funktionen wie HTML Canvas, SVG-Unterstützung, CSS Grid und einer Reihe anderer nützlicher Leckerbissen suchen.
Die Idee ist, dass Sie, sobald Sie wissen, wozu der Browser eines Benutzers in der Lage ist, Ihren Code entsprechend anpassen können. Dies macht beispielsweise die Übernahme neuerer CSS-Spezifikationen zu einem viel weniger besorgniserregenden Prozess.
Vielleicht müssen Sie nicht in jedem Fall Fallbacks verwenden. Aber es ist schön zu wissen, dass die Implementierung mit Hilfe von Modernizr einfach ist.