Migration zu Flexbox durch Schneiden des Senfes

Key Takeaways

• Der Artikel erörtert den Übergang von der Verwendung von CSS -Schwimmern zu Flexbox zum Strukturierungslayouts in CSS. Es unterstreicht die Einschränkungen der alten und Tweener -Syntax von Flexbox und empfiehlt nur auf die Tweener -Syntax- und Browser -Versionen, die die neue Syntax vollständig implementieren.
• Das Konzept des „Schneidens des Senfs“ oder der Funktionserkennung wird eingeführt, um zu identifizieren, welcher Browser/Gerät/Benutzeragent verwendet wird, und die am besten geeignete Lösung für die verfügbare Technologie bedienen. Dies kann mit einfachem JavaScript oder Modernizr.
durchgeführt werden
• Der Autor schlägt vor, SASS zu verwenden, um die Größe der CSS -Ausgabe zu verringern und die Aufrechterhaltung einfacher zu machen. Es wird auch erwähnt, dass die Implementierung von Flexbox in jedem der Erfahrungen aufgrund des Konzepts der progressiven Verbesserung nicht gleich aussieht.
• Der Artikel schließt mit Betonung, dass dieser Ansatz zur Erkennung von Funktionen angepasst und entwickelt werden kann, um zukünftige Anforderungen zu erfüllen, wenn neue Funktionen für Browser entwickelt werden. Es ermutigt die Leser, Flexbox in ihrem nächsten Projekt gut vertraut zu machen.

Als Front-End-Entwickler ist es an der Zeit, die Verwendung von CSS-Schwimmern zu entfernen und in die neue und aufregende Welt von Flexbox eintauchen zu können. CSS -Schwimmer sind ein datierter Ansatz für Styling -Layouts. Sie waren im Internet Explorer erhältlich, seit Version 4.0 und Workarounds sie formbar machen (einschließlich des ClearFix-Hacks und der Verwendung der Pseudo-Klasse der N-Child zum Wickeln von Spalten).

Das Hauptthema dieses Artikels ist die Implementierung von Flexbox in mehreren Browsern unter Berücksichtigung seiner Fragmentierung. Wenn Sie sich mit Flexbox vertraut machen möchten, stehen viele gute Ressourcen zur Verfügung, und ich empfehle Folgendes:

• Sind wir bereit, Flexbox zu verwenden? von Nick Saloum auf sitepoint
• Eine vollständige Anleitung zu Flexbox von Chris Coyier auf CSS-Tricks
• Flexible Box („Flexbox“) Layout im Internet Explorer 10 auf MSDN (optional)

Am Ende dieses Artikels sollten Sie in der Lage sein:

• Verstehen Sie, welche Versionen von Flexbox für eine reaktionsschnelle Website zum Ziel sind.
• Verwenden Sie Flexbox über die Funktionserkennung (Schneiden des Senfs) und geben Sie einen Fallback für ältere Browser.
• Beziehen Sie sich in den meisten Situationen von der Verwendung von IE -bedingten Kommentaren.
• zeigen eine praktische Verwendung für Flexbox, indem ein grundlegendes 2 × 2 -Gitter mit einem älteren Fallback erstellt wird.

Eine kurze Geschichte von Flexbox

Das flexible Box -Layout -Modul (a.k.a. flexbox) ist eine neue Möglichkeit, Layouts in CSS zu strukturieren. Es hat mehrere Überarbeitungen durchlaufen und hat sich in seiner relativ kurzen Existenz erheblich entwickelt. Zum Zeitpunkt des Schreibens ist Flexbox immer noch ein W3C -Arbeitsentwurf, aber wie andere Standards sollte dies in einer Produktionsumgebung nicht unattraktiv sein.

Es gibt drei Iterationen des Standards, die allgemein als alte Syntax, die Tweener -Syntax und die neue Syntax bezeichnet werden.

Die Einschränkungen der Flexbox sind gut dokumentiert:

• Die alte Syntax unterstützt keine Flex-Wrap.
• Die Tweener -Syntax wird nur in IE 10 (einschließlich Mobilfunk) unterstützt.
• Die neue Syntax ist in Firefox (22-27) nicht vollständig implementiert, da es die Eigenschaften von Flex-Wrap- und Flex-Flow-Eigenschaften fehlt.

Wraping (Flex-Wrap) ist ein wichtiges Merkmal der Spezifikation, das erforderlich ist, um ein reaktionsschnelles Gitter zu erstellen. Aus diesem Grund ist es am besten, nur auf die Tweener -Syntax- und Browser -Versionen zu zielen, die die neue Syntax vollständig implementieren.

Dies lässt uns die folgenden Browserversionen zurück:

• Internet Explorer 10 (Tweener -Syntax mit dem -ms- Präfix)
• Internet Explorer 11 und Edge (neue Syntax)
• Firefox 28 (neue Syntax)
• Chrom 21-28 (neue Syntax mit dem -Webkit- Präfix)
• Chrom 29 (neue Syntax)
• safari 6.1 (neue Syntax mit dem -Webkit- Präfix)
• iOS safari 7.0 (neue Syntax mit dem -Webkit -Präfix)

Da es Browser mit einem signifikanten Marktanteil gibt, die keine Flexbox unterstützen, sollten diese bei der Verwendung von CSS -Schwimmkörpern fallen. Aber wie kann dies in Code ausgedrückt werden? Was ist der beste Weg, um zwischen Browserversionen zu unterscheiden, die CSS mit Floats anstelle von Flexbox empfangen sollten? Welche Strategie kann verwendet werden, um sicherzustellen, dass Versionen von Firefox, die die neue Syntax unterstützen, aber nicht unterstützen, das Verpackung als Vermächtnis identifiziert?

Einführung: Schneiden des Senfs.

Schneiden des Senfs (Merkmalserkennung)

Wenn Sie es noch nie als technischer Begriff gehört haben, wurde das Entwicklungsteam bei BBC News "Schneiden des Senfes" geprägt. Der Begriff beruhte auf der Tatsache, dass die BBC -Website einer riesigen internationalen Publikum gerecht werden muss und die Browserversionen und -geräte ausdrücklich eine umständliche Lösung gewesen wäre.

Der Kern des Konzepts besteht darin, zu ermitteln, welcher Browser/Gerät/Benutzeragent verwendet wird, und Polyfills servieren, damit die Site funktioniert. Das Vorhandensein spezifischer Merkmale wird auf der Client -Seite erkannt und daher die am besten geeignete Lösung für die verfügbare Technologie geliefert.

Die Merkmalserkennung ist nicht neu. Der oben erwähnte BBC-Artikel wurde im März 2012 veröffentlicht. Während er immer beliebter geworden ist, ist es überraschend, dass Websites immer noch IE-spezifische bedingte Klassen implementieren, die 2008 von Paul Irish populär gemacht wurden.

Modernizr (beigetragen von Paul Irish) dreht sich alles um die Erkennung von Merkmalen:

nutzen coole neue Web -Technologien macht einen großen Spaß, bis Sie Browser unterstützen müssen, die dahinter zurückbleiben. Modernizr erleichtert es Ihnen leicht, bedingte JavaScript und CSS zu schreiben, um jede Situation zu bewältigen, unabhängig davon, ob ein Browser eine Funktion unterstützt oder nicht. Es ist perfekt für progressive Verbesserungen.

Obwohl CSS inzwischen native Funktionen erfasst, verfügt es derzeit nicht über genügend Marktanteil, um für die Verwendung der realen Welt rentabel zu sein. In dem Rest dieses Artikels wird erläutert, wie die IE -bedingten Kommentare zugunsten der Merkmalserkennung in JavaScript abgebrochen werden können.

Identifizieren von Funktionen und Browsern

Jedes Projekt erfordert eine andere Reihe von Funktionen, um zu funktionieren. Es gibt mehrere Möglichkeiten zur Erkennung von Merkmalen, die am einfachsten sind:

• Verwenden von einfacher JavaScript (wie vom BBC verwendet)
• Verwenden von Modernizr (die in diesem Artikel verwendet wird)

Der effizienteste Ansatz ist die Vanille -JavaScript -Implementierung. Es ist schnell (da der Client nicht zusätzliche Bibliotheken herunterlädt) und keine zusätzliche Verarbeitung benötigt. Dieser Ansatz ist alles andere als perfekt, da es Probleme gibt. Es gibt jedoch Möglichkeiten, um gemeinsame Probleme mit Merkmalserkennung zu überwinden.

[b] Rowser -Erkennung ist zu einem unmöglichen Gewirr geworden und ist weitgehend nicht mehr in Gebrauch gefallen, um durch etwas weitaus besseres Ersatz zu ersetzen - Feature -Erkennung.

[…] Die Erkennung von Merkmalen ist auch nicht vollständig zuverlässig - es gibt Zeiten, in denen sie fehlschlagen.

- James Edwards

Die Auswahl von Modernizr für das Schneiden des Senfs ist möglicherweise nicht so effizient (wie das Herunterladen und die Kundenverarbeitung erforderlich ist), aber die manuelle Erkennung von Flex-Wrap-Unterstützung ist keine einfache Aufgabe. Es ist auch wichtig zu beachten, dass Modernizr Version 2 zwar keine Flex-Wrap erkennt, Version 3 tut! Die Funktion ist als Flex -Line -Verpackung bezeichnet.

Obwohl die Option vorhanden ist, die von Modernizr (z. B.: html.flexwrap) erstellten CSS -Klassen zu verwenden, ist es besser, separate CSS -Dateien für jede Erfahrung zu servieren, um die Download -Größe der Site zu verringern.

.

Die BBC -Nachrichtenentwickler beziehen sich auf zwei Arten von Browsern:

Jemand im Team bezeichnete sie als „HTML4-Browser“ und „HTML5-Browser“, die wir feststellen, dass das Gefühl leichter mit technischen Menschen weitergegeben wird.

- BBC Responsive News

Diese Begründung war vollkommen gültig, wenn man das Klima der Browser -Landschaft im Jahr 2012 betrachte. Da jedoch neue Funktionen verfügbar sind, ist die Abteilung nicht unbedingt so klar. Flexbox zum Beispiel wird in allen "HTML5" -Browsern nicht vollständig unterstützt.

Ein robuster Ansatz besteht darin, zwischen „Legacy“ und „modernen“ Browserversionen zu unterscheiden. Darüber hinaus erfordern einige Projekte möglicherweise mehrere Abteilungen, in denen Browser auf halbem Weg (oder „Übergang“) identifiziert werden können.

Umsetzung des Ansatzes

Erstellen Sie mit den folgenden Dateien:

• index.html - Die Haupthtml -Datei
• Stylesheets/modern.css - Stile für moderne Browser (Medienabfragen, Flexbox mit Wraping)
• Stylesheets/Legacy.css - Stile für Legacy -Browser (keine Medienabfragen, keine Flexbox)
• Skripte/Abhängigkeiten.js - führt die Funktionserkennung
durch

Hier ist, wie unsere Index.html -Datei aussieht:

<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> class<span>="no-js"</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span>Cutting the mustard<span><span></title</span>></span>
</span>    <span><span><span><script</span> src<span>="javascripts/dependencies.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><noscript</span>></span>
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="stylesheets/legacy.css"</span>></span>
</span>    <span><span><span></noscript</span>></span>
</span>    <span><!-- ... -->
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span>
</span>    <span><span><span><div</span> class<span>="container"</span>></span>
</span>      <span><span><span><div</span> class<span>="cell cell-1"</span>></span>Cell 1<span><span></div</span>></span>
</span>      <span><span><span><div</span> class<span>="cell cell-2"</span>></span>Cell 2<span><span></div</span>></span>
</span>      <span><span><span><div</span> class<span>="cell cell-3"</span>></span>Cell 3<span><span></div</span>></span>
</span>      <span><span><span><div</span> class<span>="cell cell-4"</span>></span>Cell 4<span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>

Beachten Sie, dass es keine bedingten Kommentare gibt? Nur sauber und gültig HTML -Code. Und wenn der Browser JavaScript nicht aktiviert ist, wird er unabhängig von seiner Unterstützung zurückgeht.

.

Sie können auch feststellen, dass sich die Skript -Tags oben auf der HTML -Seite befinden. Dies liegt daran, dass Modernizr die Stylesheets verarbeiten und injizieren sollte, bevor der Browser zum ersten Mal malt. Dies reduziert das Repaint und hilft dabei, einen Blitz von unstypischen Inhalten (FOUC) zu vermeiden. Denken Sie jedoch daran, dass die meisten Skript -Tags am Ende der Seite stehen würden.

Unsere Legacy.css -Datei enthält Folgendes:

<span><span>.container</span> {
</span><span>}
</span>
<span>/* clearfix */
</span><span><span>.container:after</span> {
</span>  <span>content: "";
</span>  <span>display: table;
</span>  <span>clear: both;
</span><span>}
</span>
<span><span>.cell</span> {
</span>  <span>width: 50%;
</span>  <span>float: left;
</span><span>}
</span>
<span>/* wrapping */
</span><span><span>.cell:nth-child(<span>2n+1</span>)</span> {
</span>  <span>clear: left;
</span><span>}
</span>
<span>/* for visiblity */
</span><span><span>.cell-1</span> { background-color: #000; color: #fff; }
</span><span><span>.cell-2</span> { background-color: #666; color: #fff; }
</span><span><span>.cell-3</span> { background-color: #ccc; color: #000; }
</span><span><span>.cell-4</span> { background-color: #fff; color: #000; }</span>

Diese Implementierung enthält einen ClearFix-Hack und die: N-Child-Pseudo-Klasse zum Wickeln. Es funktioniert in den meisten Browsern; Internet Explorer 8 erfordert jedoch selektiviziert oder eine äquivalente Lösung, um den Selektor zum Laufen zu bringen.

Als nächstes unsere modern.css -Datei:

<span><span>.container</span> {
</span>  <span>/* Internet Explorer 10
</span><span>   */
</span>  <span>display: -ms-flexbox;
</span>  <span>-ms-flex-wrap: wrap;
</span>
  <span>/* Chrome 21-28
</span><span>   * Safari 6.1+
</span><span>   * Opera 15-16
</span><span>   * iOS 7.0+
</span><span>   */
</span>  <span>display: -webkit-flex;
</span>  <span>-webkit-flex-wrap: wrap;
</span>
  <span>/* Chrome 29+
</span><span>   * Firefox 28+
</span><span>   * Internet Explorer 11+
</span><span>   * Opera 12.1 & 17+
</span><span>   * Android 4.4+
</span><span>   */
</span>  <span>display: flex;
</span>  <span>flex-wrap: wrap;
</span><span>}
</span>
<span><span>.cell</span> {
</span>  <span>-webkit-flex: 1 0 50%;
</span>      <span>-ms-flex: 1 0 50%;
</span>          <span>flex: 1 0 50%;
</span><span>}
</span>
<span>/* for visiblity */
</span><span><span>.cell-1</span> { background-color: #000; color: #fff; }
</span><span><span>.cell-2</span> { background-color: #666; color: #fff; }
</span><span><span>.cell-3</span> { background-color: #ccc; color: #000; }
</span><span><span>.cell-4</span> { background-color: #fff; color: #000; }</span>

Lassen Sie sich nicht durch die Größe dieser Datei abschrecken. Die Kommentare lassen es größer erscheinen, aber diese erleichtern es in der Entwicklung zu verstehen, was jeder Abschnitt abzielt.

Als nächstes schreiben wir den Code für Abhängigkeiten.js.

Wie bereits erwähnt, müssen wir eine Version von Modernizr (Version 3) generieren, die die Unterstützung der Flex-Wrap-Eigenschaft erkennt. Fügen Sie den Code oben in der JavaScript -Datei ein.

<span>/* Include Modernizr v3 with 'Flex line wrapping' here */
</span>
<span>(function() {
</span>  <span>var isModern = Modernizr.flexwrap;
</span>
  <span>var link = document.createElement('link');
</span>  link<span>.rel = 'stylesheet';
</span>  link<span>.type = 'text/css';
</span>  link<span>.href = 'stylesheets/' + (isModern ? 'modern' : 'legacy') + '.css';
</span>
  <span>document.getElementsByTagName('head')[0].appendChild(link);
</span><span>})();</span>

Sie können die Anforderungen für eine moderne Erfahrung optional erhöhen, indem Sie den ismodernen Booleschen erweitern. Zum Beispiel:

<span>var isModern = Modernizr.flexwrap && 'querySelector' in document;</span>

SASS -Lösungen

Sie können SASS verwenden, um Ihren Ansatz zur Implementierung von Flexbox abstrahieren. Dies reduziert die Größe des CSS -Ausgangs und erleichtert die Aufrechterhaltung:

<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> class<span>="no-js"</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span>Cutting the mustard<span><span></title</span>></span>
</span>    <span><span><span><script</span> src<span>="javascripts/dependencies.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><noscript</span>></span>
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="stylesheets/legacy.css"</span>></span>
</span>    <span><span><span></noscript</span>></span>
</span>    <span><!-- ... -->
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span>
</span>    <span><span><span><div</span> class<span>="container"</span>></span>
</span>      <span><span><span><div</span> class<span>="cell cell-1"</span>></span>Cell 1<span><span></div</span>></span>
</span>      <span><span><span><div</span> class<span>="cell cell-2"</span>></span>Cell 2<span><span></div</span>></span>
</span>      <span><span><span><div</span> class<span>="cell cell-3"</span>></span>Cell 3<span><span></div</span>></span>
</span>      <span><span><span><div</span> class<span>="cell cell-4"</span>></span>Cell 4<span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>

progressive Verbesserung und Browser -Test

Es ist wichtig, die Unterschiede zwischen Flexbox- und CSS -Schwimmern zu verstehen. Ihre Implementierung sieht in jedem der Erfahrungen nicht genau gleich aus - aber der Begriff der fortschreitenden Verbesserung bedeutet, dass dies nicht unbedingt erforderlich ist.

zum Beispiel streckt Flexbox standardmäßig alle Zellen in derselben Zeile, um die gleiche Höhe zu haben. Wenn also eine Zelle 3 Linien lang ist und die benachbarte Zeile 10 Linien lang ist, erstreckt sich der Hintergrund auf beiden Zellen auf 10 Linien. Der Fallback für CSS -Schwimmer wird dies nicht tun, und beide Zellen haben ungleiche Höhen.

Testen des Layouts in mehreren Browsern ist immer noch eine Anforderung. Denken Sie jedoch daran, dass das Erzwingen des Werts von Ismodern in JavaScript dazu beitragen kann, Legacy -Lösungen in jedem Browser zu testen:

<span><span>.container</span> {
</span><span>}
</span>
<span>/* clearfix */
</span><span><span>.container:after</span> {
</span>  <span>content: "";
</span>  <span>display: table;
</span>  <span>clear: both;
</span><span>}
</span>
<span><span>.cell</span> {
</span>  <span>width: 50%;
</span>  <span>float: left;
</span><span>}
</span>
<span>/* wrapping */
</span><span><span>.cell:nth-child(<span>2n+1</span>)</span> {
</span>  <span>clear: left;
</span><span>}
</span>
<span>/* for visiblity */
</span><span><span>.cell-1</span> { background-color: #000; color: #fff; }
</span><span><span>.cell-2</span> { background-color: #666; color: #fff; }
</span><span><span>.cell-3</span> { background-color: #ccc; color: #000; }
</span><span><span>.cell-4</span> { background-color: #fff; color: #000; }</span>

Schlussfolgerung

In diesem Artikel habe ich die Grundlagen für die Verwendung der Funktionserkennung zur Verfügung gestellt, um zwei verschiedene Stylesheets auf derselben HTML -Codebasis zu erstellen. Dies ist eine äußerst effektive Methode, um den Upgrade -Prozess außerhalb der CSS -Schwimmer zu beginnen und die Abhängigkeit von IE bedingten Kommentaren zu verringern.

Obwohl es einen starken Fokus auf der Erkennung von Unterstützung für Flexbox hat, ist es wichtig zu beachten, dass dieser Ansatz zum Schneiden des Senfs, wenn neue Funktionen für Browser entwickelt werden, angepasst und entwickelt werden kann, um zukünftige Anforderungen zu erfüllen.

Sobald der Internet Explorer 10 mit dem Browser -Marktanteil in Ihrem Zielsektor nicht beliebt ist, können Sie möglicherweise die Tweener -Syntax abbrechen und schlankere Code ausschließlich über die Verwendung der neuen Syntax liefern.

Jetzt, wo Sie die ganze Theorie haben, sollten Sie Flexbox in Ihrem nächsten Projekt nicht gut kennenlernen?

häufig gestellte Fragen zur Migration zu Flexbox und zur Vermeidung von Legacy JavaScript

Welche Bedeutung hat die Bedeutung der Migration in Flexbox? Flexbox oder Flexible Box -Layout ist ein CSS3 -Web -Layout -Modell, mit dem reaktionsschnelle Elemente in einem Container je nach Bildschirmgröße automatisch angeordnet werden können. Dies bedeutet, dass sich das Layout Ihrer Webseiten leicht an verschiedene Bildschirmgrößen anpassen kann und ein nahtloses Benutzererlebnis auf verschiedenen Geräten sicherstellt. Es vereinfacht auch den Prozess des Entwerfens einer flexiblen, reaktionsschnellen Layoutstruktur ohne Verwendung von Float oder Positionierung. kann die Leistung Ihrer Website erheblich beeinflussen. Legacy JavaScript wird oft mit unnötigem Code aufgebläht, den moderne Browser nicht benötigen. Dieser zusätzliche Code kann Ihre Website verlangsamen, da der Browser sie herunterladen, analysieren, kompilieren und ausführen muss. Indem Sie modernen JavaScript für moderne Browser bedienen, können Sie die Ladezeit und die Gesamtleistung Ihrer Website verbessern.

Wie kann ich es vermeiden, modernen Browsern ein Legacy -JavaScript zu bedienen? Mit diesem Muster können Sie zwei separate Bündel Ihres JavaScript erstellen - ein modernes "Modul" -Bündel und ein Vermächtnis, ein "Nomodule" -Bündel. Moderne Browser, die das Attribut "type =" -Modul "" verstehen, wird das moderne Bundle herunterladen, während ältere Browser es ignorieren und stattdessen das Legacy -Bundle herunterladen.

Flexbox bietet mehrere Vorteile gegenüber herkömmlichen Layout -Methoden. Es ermöglicht flexible Layoutstrukturen, sodass reaktionsschnelle Websites einfacher gestaltet werden können. Es vereinfacht auch die Ausrichtung, Verteilung und Ordnung von Elementen innerhalb eines Containers. Mit Flexbox können Sie problemlos komplexe Layouts und Ausrichtungen erreichen, die mit herkömmlichen CSS schwierig sind. Prozess, insbesondere für große, vorhandene Projekte. Es ist wichtig, das Flexbox -Modell gründlich zu verstehen, bevor Sie mit der Migration beginnen. Experimentieren Sie zunächst mit einfachen Layouts und bewegen Sie sich allmählich zu komplexeren. Verwenden Sie einen Schritt-für-Schritt-Ansatz, migrieren Sie jeweils eine Komponente und testen Sie jede Änderung gründlich. > Tools wie Google Lighthouse, GTMetrix und WebPagetest können Ihnen dabei helfen, modernen Browsern ein Legacy -JavaScript zu bedienen. Diese Tools liefern detaillierte Leistungsberichte und zeigen Bereiche hervor, in denen die Leistung Ihrer Website verbessert werden kann.

Kann ich Flexbox mit älteren Browsern verwenden? der Unterstützung in älteren Browsern. Es kann jedoch einige Inkonsistenzen und Fehler geben. Es wird empfohlen, Tools wie Autoprefixer zu verwenden, mit denen die erforderlichen Anbieter -Präfixe zu Ihrem CSS hinzugefügt werden können, um die Kompatibilität mit älteren Browsern sicherzustellen. SEO. Eine reaktionsschnelle, schnellladende Website bietet eine bessere Benutzererfahrung, die ein Schlüsselfaktor für SEO ist. Darüber hinaus werden Websites, die schneller laden Neues Layoutmodell, der sich mit Browser -Inkonsistenzen befasst und die Rückwärtskompatibilität sicherstellt. Es ist wichtig, Ihre Website in verschiedenen Browsern und Geräten gründlich zu testen, um eine einheitliche Benutzererfahrung zu gewährleisten.

Wie kann ich mehr über Flexbox und Modern JavaScript erfahren? Websites wie CSS-Tricks, MDN Web Docs und SitePoint bieten umfassende Anleitungen und Tutorials. Darüber hinaus bieten Online -Codierungsplattformen wie Codecademy und FreecodeCamp interaktive Lektionen zu diesen Themen.

Das obige ist der detaillierte Inhalt vonMigration zu Flexbox durch Schneiden des Senfes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!