Floats sind eines der grundlegendsten Werkzeuge zur Strukturierung einer Webseite mithilfe von CSS. Sie sind beide eines der ersten Dinge, über die wir lernen, und eines der letzten Dinge, die wir wirklich meistern.
Der heutige Artikel untersucht einige der Gründe, aus denen Floats ziemlich lahm sind, und betrachtet einige alternative Layoutsysteme, von denen einige noch in der Entwicklung sind, aber eines Tages den Standard für CSS-basiertes Layout darstellen können.
Eine Geschichte von Tabellen
Früher verwendeten Webdesigner HTML-Tabellen, um komplexe Seitenlayouts durchzuführen. Obwohl es ein unordentlicher, nicht semantischer Prozess war, wurde versucht, aus der verfügbaren Technologie das Beste herauszuholen, um bessere Designs zu erstellen.
Für Neulinge, wenn ich nicht-semantisch sage Ich meine, das tabellenbasierte Layout ist eine Bastardisierung des Tabellenelements. Es soll tatsächliche Informationstabellen auf einer Seite enthalten und nicht als Struktur für die Seite selbst dienen.
Floats: Die neuen Tische?
Heute spotteten wir über diese Praxis. Was für ein dummer Weg, um eine Website zu gestalten! CSS ist zu unserer Rettung gekommen und hat uns mehrere Werkzeuge zur Verfügung gestellt, mit denen viel semantischere Layouts erstellt werden können, mit denen alles, was mit einer Tabelle erstellt wurde, problemlos erreicht werden kann.
Heutzutage haben wir unsere tischabhängigen Methoden vor allem durch die Verwendung von Floats für das Layout ersetzt. Standardmäßig werden sequenzielle HTML-Elemente vertikal gestapelt angezeigt. Floats dienen dazu, Elemente horizontal auszurichten. Schweben Sie eine Liste von li-Elementen nach links und Sie haben ein kleines horizontales Navigationsmenü.
Obwohl sich viele von uns einfach daran gewöhnt haben, sind Schwimmer alles andere als ideal. Sie sind unbeholfen, fehlerhaft und schwer zu erlernen. Wenn Sie zurückdenken, wann Sie mit dem CSS-basierten Layout begonnen haben, war die Sache, bei der Sie sich stundenlang den Kopf kratzten und die Problembehandlung stundenlang war, wahrscheinlich ein Fehler.
Die Clearfix-Bandhilfe
Der Fluch der Float-basierten Layouts (abgesehen von den Randmargen des IE6) ist natürlich die Tatsache, dass sie einfach nicht gut mit ihren Containerelementen spielen. Damit das übergeordnete Element so aussieht, als ob es schwebende Elemente enthält, wird in der Regel ein gelöschtes Element als letztes in den Container eingefügt, und zwar mit "clear: both".
Ist das Erstellen eines leeren Containers zum Hacken eines beschädigten Layouts eine bewährte Methode? Wahrscheinlich nicht. Funktioniert es? Sie wetten
Ein besserer Clearfix
Vordenker haben entschieden, dass das Hinzufügen von zusätzlichem HTML-Markup nicht sinnvoll ist. Die aktuelle bevorzugte Methode zum Löschen eines Floats ist das Einfügen des neuen Elements mit CSS?: After? Pseudoklasse.
Dies ist wieder akzeptabel, da wir uns daran gewöhnen, mit Schwimmern herumzumachen, um sie unserem Willen zu unterwerfen. Versuchen Sie jedoch einen Schritt zurück und schauen Sie sich wirklich an, was hier los ist. Das ist ein Chaos! Wir verwenden CSS, um ein unsichtbares Element in den HTML-Code einzufügen, sodass unsere Layoutprobleme auf magische Weise verschwinden, wenn wir bei dem Gedanken an die Verwendung tabellenbasierter Layouts zittern, weil sie nicht semantisch sind.
Ich verteidige kein tabellenbasiertes Layout, es ist tot und muss so bleiben, aber ich kann mich nicht wundern, ob zukünftige Webdesigner über unsere Verwendung von Floats so lachen werden, wie wir jetzt über den Gedanken an ein Web lachen Seite auf einer Tabelle aufgebaut.
Die Zukunft
Sie müssen zugeben, wenn Sie wirklich darüber nachdenken, sind Floats eine ziemlich komplizierte und komplizierte Art, das Seitenlayout zu handhaben. Ich sehe nicht, dass Floats in naher Zukunft komplett verschwinden werden. Sie werden wahrscheinlich trotzdem nützlich sein, auch wenn wir alle einen neuen Layoutprozess akzeptieren.
Es gibt jedoch einige interessante Layout-Tools am Horizont, die Floats als primären Weg zur Strukturierung von Webseiten sehr gut ersetzen könnten. Werfen wir einen Blick auf einige dieser Ideen und Konstrukte und schauen wir uns an, wie die Zukunft des CSS-Layouts aussehen wird.
Inline-Block
Bevor wir in futuristische experimentelle Layouttechniken eintauchen, lohnt es sich zu diskutieren Inline-Block als interessante Alternative zu Float-basierten Layouts. Betrachten Sie den Ausschnitt unten:
Dies führt dazu, dass unsere Listenelemente unter Beibehaltung ihrer Blockattribute eingeblendet werden, was wirklich erstaunlich ist! Wir bekommen das Beste aus beiden Welten.
Untergang des Inline-Blocks
Andrew Tetlaw von Sitepoint hat kürzlich einen fantastischen Artikel veröffentlicht, der die Verwendung hoch lobt Inline-Block über schwimmt. Er weist zu Recht darauf hin, dass diese Methode auf allen modernen Browsern effektiv ist, einschließlich IE8 und höher, was ungefähr derselbe ist, wie Sie es von dem pseudo-klassengetriebenen Clearfix von oben erwarten können.
Wie Robert Nyman in einem ähnlichen Artikel hervorhebt, ist diese Methode leider nicht ohne Probleme.
Neben den IE-Problemen (er hat einen cleveren Hack, um Unterstützung in IE7 zu bekommen), zeigt Nyman dies Inline-Block bewirkt, dass Ihr Layout in Bezug auf Ihren HTML-Code etwas von dem Leerzeichen abhängig ist. Das von ihm verwendete Beispiel ist die folgende ungeordnete Liste:
Ob Sie es glauben oder nicht, die Zeilenrückgabe führt automatisch dazu, dass den Listenelementen ein leichter Rand hinzugefügt wird! Die einzige Möglichkeit, dies zu beheben, besteht darin, sie in derselben Zeile zu platzieren:
Zugegebenermaßen ist dies eine ziemlich einfache Lösung, aber wenn Sie ein Fan von ordentlich organisiertem Code sind, kann dies zu einer Erschöpfung führen. Im Vergleich zu den Problemen, denen wir mit Floats gegenüberstehen, hat Tetlaw insgesamt den Punkt, dass dies eine bessere Lösung ist, die Sie jetzt mit einer akzeptablen Menge an Browser-Unterstützung tatsächlich verwenden können.
Flexbox
Eine der neuen Möglichkeiten, mit denen CSS3 die Layoutpraktiken ändert, ist das Flexible Box Module oder kurz Flexbox. Hier ist ein Zitat aus der Flexbox w3-Zusammenfassung.
[Flexbox] bietet ein zusätzliches Layoutsystem neben den bereits in CSS vorhandenen. [CSS21] In diesem neuen Boxmodell werden die untergeordneten Elemente einer Box entweder horizontal oder vertikal angeordnet, und ungenutzter Speicherplatz kann einem bestimmten untergeordneten Element zugewiesen werden. an die Kinder, die sich erweitern sollten. Das Schachteln dieser Boxen (horizontal innerhalb vertikal oder vertikal innen horizontal) kann zum Erstellen von Layouts in zwei Dimensionen verwendet werden.
Flexbox ist eine völlig neue Art, Websites zu gestalten. Sie haben vielleicht in letzter Zeit davon gehört, aber die Syntax ändert sich ein bisschen. Stellen Sie also sicher, dass Sie die funktionale Spezifikation im Auge behalten, um auf dem neuesten Stand zu bleiben (ich glaube, dass sich die Box in den meisten Fällen in Flex oder Flexbox ändert.) . Die aktuelle funktionierende CSS-Syntax zum Anwenden von Flexbox lautet wie folgt:
Um zu sehen, wie es funktioniert, springen wir gleich in ein Beispiel. Grundsätzlich sobald Sie sich bewerben Vitrine In das übergeordnete Element können die untergeordneten Elemente basierend auf der einfachen relativen Größenänderung automatisch umverteilt werden.
Stellen Sie sich vor, wir haben drei Absatz-Tags (diese dienen als Spalten) in einem übergeordneten Container mit Vitrine angewendet und wir möchten, dass die mittlere Spalte doppelt so breit ist wie die beiden anderen. Folgendes tun wir:
Mit diesem kleinen Code (und etwas überflüssigem visuellem Styling) können wir folgendes Ergebnis erzielen.
Beachten Sie, dass der Standardwert? 0? zum Box-Flex. Ändern der zweiten Box auf? 2? löste den Befehl aus, um die Breite auszufüllen, während das zweite Feld breiter als die anderen beiden wurde. Lassen Sie uns einige weitere Beispiele betrachten, damit Sie wirklich ein Gefühl dafür bekommen, wie es funktioniert.
Wie Sie sehen, hat Flexbox dramatische Auswirkungen auf die Art und Weise, wie wir Websites mit CSS strukturieren. Dies hat nicht nur das Potenzial, die mit Floats verbundenen Probleme zu lösen, sondern macht auch mehrspaltige gitterbasierte Layouts unendlich einfacher!
Grab tiefer
Dieser Artikel ist lediglich als Einführung in neue Layoutmethoden gedacht und erhebt keinen Anspruch auf Vollständigkeit. Ich habe die Oberfläche von Flexbox kaum zerkratzt. Sie können zum Beispiel dasselbe wie zuvor mit vertikal gestapelten Elementen erreichen und die Boxen nur mit CSS neu anordnen.
Weitere Informationen über die Möglichkeiten von Flexbox erhalten Sie hier höchst Es wird empfohlen, mit Flexie The Flexbox Playground zu spielen. Dadurch erhalten Sie praktische Erfahrungen mit dem neuen Layout-System und können jede Einstellung ausprobieren, um ein Gefühl für das Ergebnis zu erhalten.
Das Vorlagenlayout-Modul
Eine andere vorgeschlagene Idee für das CSS-Layout ist das Template Layout Module. Hier ist ein Zitat aus der offiziellen Spezifikation.
Die Eigenschaften in dieser Spezifikation funktionieren, indem einem Element eine Layoutrichtlinie zugeordnet wird. Anstatt ein Element seine Nachkommen in ihrer normalen Reihenfolge als Inline-Text oder als Textblöcke (die in CSS Level 1 verfügbaren Richtlinien) anzeigen zu lassen, gibt die in diesem Modul definierte Richtlinie, die als vorlagenbasierte Positionierung bezeichnet wird, einem Element ein unsichtbares Raster zum Ausrichten von Nachkommenelementen.
Das Template Layout Module verwendet eine eigenartige, aber unkomplizierte Syntax, die das Layout zu einem Kinderspiel macht. Als Erstes müssen Sie einen Container mit einigen untergeordneten Elementen erstellen. Für jedes untergeordnete Element weisen Sie einen beliebigen Buchstaben zu (es ist egal, welcher Buchstabe, stellen Sie sicher, dass sie eindeutig sind).
Als Nächstes wenden Sie einen Anzeigewert auf das übergeordnete Element an, indem Sie diese Buchstaben verwenden, um Ihre Proportionen zu definieren. Wenn Sie beispielsweise drei gleiche Spalten erstellen möchten, geben Sie sie einfach alle in einer Zeile ein:
Dadurch erhalten Sie das folgende Ergebnis:
Wenn Sie die Boxen neu anordnen möchten, ordnen Sie einfach die Buchstaben in Ihrem CSS an. Anstatt "abc" einzugeben, geben Sie "bca" ein.
Erstellen Sie einen neuen Satz von Anführungszeichen, um eine neue Zeile zu erstellen. Sie können Buchstaben wiederholen, um ein angemessenes Verhältnis zu erhalten. Zum Beispiel setzen wir hier die erste Zeile auf? Ab? und das zweite zu? cc ?, was? c? wird die doppelte Breite von? a? oder? b?
Jeder Abschnitt (a, b, c) wird als "Schlitz" bezeichnet. Um einen leeren Steckplatz zu erstellen, verwenden Sie einfach einen Punkt:? A.b.c? erstellt zwei leere Slots in unserer Zeile. Verwenden Sie das Slot-Pseudo-Element, um einen Steckplatz für zusätzliches Styling auszuwählen:
Grab tiefer
Wie im vorherigen Beispiel kann hier noch viel mehr getan werden, z. B. das Einstellen von Höhen und Breiten mithilfe von genauen Abmessungen oder Prozentangaben. Momentan ist nichts davon in jedem Browser einsatzbereit. Sie können jedoch ein jQuery-Plugin installieren, um es auszuprobieren! Auf den Demo-Seiten des Plugins finden Sie einige fantastische codierte Beispiele, wie Sie mit dem Template Layout Module ein beliebiges Layout erstellen.
Zurück zu den Tabellen?
Der bereits erwähnte Andrew Tetlaw Sitepoint-Artikel bietet eine weitere interessante Option für das Layout.
Interessanterweise das Einstellen der? Anzeige? Eigenschaft zu? Tisch? erlaubt uns, unser Layout so zu strukturieren, als wären sie Tabellen. Sofort weiß ich, dass das eine Menge Leute ausflippen wird. Zurück zum tabellenbasierten Layout !? Bist du verrückt? Der verrückte Teil ist jedoch, dass dies tatsächlich eine völlig andere Praxis ist, als buchstäblich ein Tabellenelement zu verwenden. Hier fordern Sie das CSS einfach auf, Elemente zu positionieren ähnlich wie Tabellenzellen und Zeilen positioniert werden.
Ich persönlich mag die neuen ausgefallenen CSS3-Methoden, die wir gerade viel besser behandelt haben, und es fällt mir schwer, sich vorzustellen, wie sie sich allgemein durchsetzen, aber es lohnt sich, sie zu prüfen und zu diskutieren. Wenn Sie interessiert sind, lesen Sie unbedingt die Erklärung von Tetlaw.
Fazit
Der Zweck dieses Artikels bestand darin, Sie dazu zu bringen, darüber nachzudenken, wie Floats Websites nicht unbedingt die beste Struktur bieten. Obwohl sie eine der besten Lösungen sind, die wir derzeit in Live-Client-Projekten einsetzen können, stellen sie ein ziemlich schlampiges und kaputtes System dar, das alles andere als ideal ist.
Es gibt eine Reihe von Möglichkeiten, um den Untergang von Schwimmern zu beheben. Fürs Erste könnten Sie auschecken? Anzeige: Inline-Block? als eine Option oder sogar in? Anzeige: Tabelle? wenn Sie besonders mutig sind.
Die Assistenten, die all diese Technologie zum Laufen bringen, erkennen, dass das System kaputt ist und arbeiten hart daran, Probleme mit Layoutmodulen zu lösen, die sich in der Zukunft als äußerst nützlich erweisen können. Erwarten Sie in Zukunft mehr über die Module Flexbox und Vorlagenlayout. Wer weiß, eines oder beide davon könnten die Standardmethode sein, mit der zukünftige Entwickler Weblayouts erstellen!
Hinterlassen Sie einen Kommentar und teilen Sie uns Ihre Meinung dazu mit. Halten Sie Floats für ein fehlerhaftes Layoutsystem? Scheinen einige der vorgeschlagenen Layoutmodule als solide Lösung für diese Probleme?