Clearfix: Eine Lektion in der Web-Entwicklung-Evolution

0
39

Die web-community hat, zum größten Teil, war ein spektakulär offene Stelle. Als solche, viele der besten Weiterentwicklung Techniken zufällig genau in der freien Natur, auf blogs und in Foren, das sich als Sie weitergereicht und verbessert werden. Ich dachte, es könnte Spaß machen (und faszinierende) tatsächlich Folgen Sie diesem kreativen Austausch, den ganzen Weg durch. Ein Blick auf eine beliebte CSS-trick, der clearfix, und genau herauszufinden, wie man eine web-design Technik kommt.

Die clearfix, für diejenigen, die nicht bewusst, ist ein CSS-hack, der löst einen hartnäckigen Fehler, der Auftritt, wenn zwei gefloateten Elemente werden gestapelt, nebeneinander. Wenn Elemente, die ausgerichtet sind auf diese Weise der übergeordnete container landet mit einer Höhe von 0, und es kann leicht Wrack Chaos auf einem layout. Alles, was Sie versuchen zu tun ist, ist die position einer sidebar auf der linken Seite der Haupt-content-block, aber das Ergebnis wäre zwei Elemente, die sich überschneiden und reduzieren auf einander. Um die Dinge zu komplizieren weiter, der Fehler ist nicht konsistent in allen Browsern. Die clearfix erfunden wurde das ganze zu lösen.

Eine frühe Darstellung der Problematik aus-Position ist Alles

Um aber zu verstehen, die clearfix, Sie gehen sogar noch weiter zurück, auf das Jahr 2004 und durch eine Besondere Technik namens Holly hack.

2004: Der Holly-Hack und die Herkunft von Clearfix

Der Holly hack ist benannt nach seinem Schöpfer, Holly Begevin, ein Entwickler und blogger auf CommunityMX. Der Holly hack kombiniert zwei verschiedene CSS-Techniken, arbeitete in den Tagen von Netscape Navigator und Internet Explorer (IE) 4 zu lösen, einige layout-Probleme. Begevin bemerkt, dass, wenn Sie eine Höhe von nur 1% auf jeden der gefloateten Elemente in das oben beschriebene Szenario würde das problem tatsächlich zu beheben selbst (und nur, weil es aktiviert einen ganz anderen bug) im Internet Explorer für Windows.

Leider ist die 1% – trick hat nicht funktioniert auf einem Mac. Für, die, Begevin Hinzugefügt ein conditional comment, das einen umgekehrten Schrägstrich in Ihr CSS, die seltsam genug, blockiert die einzelnen CSS-Regeln vom IE für den Mac in den alten Tagen. Das Ergebnis war ein CSS-trick, der wie folgt aussah:

/* Hides from IE5-mac */
* html .buggybox { height: 1%; }
/* End hide from IE5-mac */

Seltsam, ich weiß, aber es wird nur komplizierter.

Im selben Jahr, im Mai, gab es ein paar mehr Browsern zu beschäftigen, und nicht alle von Ihnen konnten geflickt werden, mit einer Zeile CSS. Tony Aslett veröffentlicht einen neuen thread auf seinem message-board, CSS Schöpfer, schlägt Sie einen neuen Ansatz. Er nannte den trick ein clearfix, weil es zentriert um die Klärung der gefloateten Elemente, um das Problem zu beheben.

Aslett Ansatz nutzten, was waren damals noch sehr neue CSS pseudo-Selektoren (genauer :vor) automatisch zu löschen, die aus zwei gefloateten Elemente. Es war eine ziemlich massive Nachteil in Aslett die erste version des clearfix. Nie gehört, den Holly Hack, Aslett code benötigt ein wenig JavaScript-Probleme lösen, die speziell aufspringen auf IE für Mac. In jenen Tagen wurde JavaScript ein relativ ungetestete Technologie, und unter Berufung auf ihn, in einer so fundamentalen Art und Weise war weniger als ideal.

Zum Glück ist das web ein Ort der iteration, und einem message-board-user wies Aslett in die Richtung der oben genannten Holly Hack. Durch das streuen in Begevin die bedingte Kommentar, Aslett war in der Lage, seinen code funktioniert in fast jedem browser ohne JavaScript.

.floatcontainer:after {
content: “.”;
display: block;
Höhe: 0;
clear: both;
visibility: hidden;
}

/* Mark Hadley ‘ s fix für IE-Mac */
.floatcontainer {
display: inline-block;
}

/* Hides from IE-Mac */
* html .floatcontainer { height: 1%; }
.floatcontainer { display:block; }
/* Ende-Hack */

Wenn Sie möchten, Holen außer ein wichtiges Stück web-Geschichte und innovation, die Diskussion, die folgten, Aslett die post über clearfix ist ein großartiger Ort zu starten. Eins nach dem anderen, begannen die Menschen zu Experimentieren mit der neuen Technik, die Tests in obskuren Browser und Geräte. Als Sie fertig waren, würden Sie veröffentlichen Ihre Ergebnisse auf den Nachrichten-thread, manchmal zusammen mit ein hilfreicher tweak.

Zum Beispiel, der Benutzer zulaica wies darauf hin, dass in Mozilla-Browsern, die untere Grenze der gefloateten Elemente hatte explizit definiert werden. Benutzer pepejeria aufgefallen, die könnte man weglassen, den Punkt von Inhalt und Benutzer-co2 getestet, die clearfix in der ersten version von Apple ‘ s Safari browser. Jedes mal, Aslett aktualisiert seinen code ein wenig, bis, nach mehr als ein paar schnelle Iterationen, die clearfix bereit war und, Dank der community, so ziemlich bulletproof.

2006: Clearfix ein update bekommt

Aber Browser gehalten auf die Weiterentwicklung. Einige der schrulligen bits der clearfix-code funktioniert, weil der Fehler, die gebaut wurden in älteren Browsern. Als Browser gepatcht jene bugs, die in brandneuen Versionen, die clearfix aufgehört zu arbeiten. Wenn der IE 7 kam Ende 2006, ein paar Anpassungen der Technik nötig waren, damit es funktioniert.

Zum Glück, John “Big John” Gallant war die Aufrechterhaltung einer Seite auf seinem blog Position ist Alles mit einer up-to-date-version von der clearfix. Nachdem wir einige Rückmeldungen von seinen Lesern, Gallant aktualisiert seinen blog zu reflektieren, ein paar neue fixes für den IE 7 über eine neue Art der bedingten Kommentar, dass würde die Arbeit innerhalb von Internet Explorer.

<style type=”text/css”>

.clearfix:after {
content: “.”;
display: block;
Höhe: 0;
clear: both;
visibility: hidden;
}

</style><!– Haupt-stylesheet endet, CC mit dem neuen stylesheet unten… –>

<!–[if IE]>
<style type=”text/css”>
.clearfix {
zoom: 1; /* Trigger hasLayout */
} /* Nur IE sehen können, im inneren der bedingte Kommentar
und Lesen Sie diese CSS-Regel. Nicht immer mit einem normalen HTML
Kommentar innerhalb des CC-oder es wird zu schließen vorzeitig. */
</style>
<![endif]–>

Und wieder einmal, Benutzer haben, um Ihren eigenen Browser zu testen, den neuesten code, um sicherzustellen, dass es überall funktioniert. Und noch einmal, für eine Zeit, hat es getan.

2010: Clearfix Reloaded

In der Tat, diese iteration der clearfix dauern würde, bis etwa 2010, als das team von Yahoo! User Interface Library (YUI) bemerkte ein paar Probleme mit dem clearfix. Der Holly Hack, zum Beispiel, war nun schon lange nicht mehr (IE 5 war aber eine Ferne Erinnerung), und nach dem einschalten der box model, Ränder umgeschlagen wurden etwas anders, mit modernen Browsern.

Aber die Leute bei YUI noch benötigt wird, um ein element neben anderen. In der Tat, die Notwendigkeit hatte, nur erhöht wird, wie die Designer experimentierten mit erweiterten grid-layouts. Im Jahr 2010 gab es sehr wenig Möglichkeiten für grid-layout, so clearfix arbeiten musste. Sie kam schließlich mit ein paar zusätzliche Optimierungen, um den CSS-Regelsatz, der vor allem durch die Einnahme von Vorteil, beide pseudo-Selektoren (:before und :after), zu löschen Margen. Sie veröffentlicht Ihre neue nehmen Sie Ihren eigenen blog und nannte es “clearfix reloaded”.

.clearfix:before,
.clearfix:after {
content: “.”;
display: block;
Höhe: 0;
overflow: hidden;
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1 ;} /* IE < 8 */

2011: Die Mikro Clearfix

Aber selbst wenn es war veröffentlicht in 2010, clearfix reloaded brachte einige unnötige Gepäck von älteren Browsern. Die Höhe ist gleich 0 trick war nicht wirklich eine Anforderung nicht mehr, und in der Tat, der trick war viel zuverlässiger, wenn Sie display: table stattdessen verwendet wurde. Die Menschen begannen, tauschen verschiedene Variationen über die Technik auf und auf blogs. Über ein Jahr nach der Veröffentlichung des clearfix reloaded-Entwickler Nicolas Gallagher kompiliert diese Variationen in eine viel kompaktere version der hack, die er entsprechend beschriftet die Mikro clearfix.

Nach Jahren des hin und her, und leichte Anpassungen, die klar jetzt fix benötigt nur vier CSS-Regeln:

/*
* Für moderne Browser
* 1. Der Raum Inhalt ist ein Weg, um zu vermeiden, ein Opera-bug, wenn der
* contenteditable-Attribut enthalten ist, sonst nirgends in dem Dokument.
* Andernfalls es bewirkt, dass Leerraum am oberen und unteren Elemente
* das clearfixed.
* 2. Die Verwendung von `Tabelle` statt `block` ist nur erforderlich, wenn mit
* `:vor` enthält die top-Margen von Kind-Elementen.
*/
.cf:before,
.cf:after {
content:” “; /* 1 */
display: table; /* 2 */
}

.cf:after {
clear: both;
}

/*
* Für IE 6/7 nur
* Diese Regel trigger hasLayout und enthalten schwebt.
*/
.cf {
zoom: 1;
}

Ende Clearfix?

In diesen Tagen, fast 15 Jahre nach es wurde zuerst vorgeschlagen, die clearfix verliert ein wenig von Relevanz. CSS-Grid-und Flexbox-füllen Sie die Lücken für fortgeschrittene layout im web. Im Januar 2017, Rachel Andrew schrieb einen Artikel für Ihren blog mit dem Titel “das Ende Der clearfix-hack?” In ihm beschreibt Sie einen Weg, Sie zu ersetzen die clearfix-hack mit einer einzigen Zeile code mit einem neuen Anzeige-Modus-Regel, bekannt als flow-root.

.container {
Anzeige: flow-root;
}

Wir nähern uns dem Tag, wenn clearfix nicht mehr nötig.

Auch ohne flow-root, es gibt viele Möglichkeiten, um ein Netz in diesen Tagen. Wenn Sie gerade erst anfangen über das Internet, gäbe es wenig Grund, selbst etwas darüber erfahren. Das ist eine gute Sache! Es war von Anfang an immer gedacht, als workaround, um das beste aus dem machen, was verfügbar war. Die Ironie sein, dass ohne das Engagement und die Experimentierfreudigkeit der Entwickler gehackt Weg auf die clearfix seit so vielen Jahren, hätten wir nicht die Werkzeuge von heute nie verlassen es wieder.

Genießen Sie das lernen über web-Geschichte, mit Geschichten wie diesen? Jay Hoffmann hat einen wöchentlichen newsletter namens Die Geschichte des Web können Sie melden Sie sich für hier.