Clearfix: Een Les in Web Ontwikkeling

0
32

De web-community heeft, voor het grootste deel, is een spectaculair open plaats. Als zodanig, veel van de beste ontwikkeling van technieken gebeurt in de open lucht, op blogs en forums, evolueren als ze doorgegeven rond en verbeterd. Ik dacht dat het wel leuk zou zijn (en boeiend) en het daadwerkelijk volgen van deze creatieve uitwisseling helemaal door. Om een kijkje te nemen op een populair CSS truc, de clearfix, en precies weten hoe een web design en de techniek komt.

De clearfix, voor degenen die zich niet bewust is van een CSS hack dat lost een hardnekkige bug die optreedt wanneer twee zwevende elementen op elkaar gestapeld zijn naast elkaar. Wanneer elementen zijn afgestemd op deze manier de bovenliggende container eindigt met een hoogte van 0, en het kan gemakkelijk ravage wrak op een lay-out. Alles wat je probeert te doen is de positie van een zijbalk aan de linkerkant van uw inhoud te blokkeren, maar het resultaat zou zijn twee elementen die elkaar overlappen en samenvouwen op elkaar. Om de zaken verder te compliceren, de bug is niet consistent in verschillende browsers. De clearfix werd uitgevonden op te lossen.

Een vroege illustratie van het probleem van de Positie is Alles

Maar om te begrijpen de clearfix, moet je terug gaan zelfs nog verder, naar de 2004 en een bepaalde techniek genaamd Holly hack.

2004: De Hulst Hack en de oorsprong van Clearfix

De Holly hack is vernoemd naar zijn schepper, Hulst Begevin, een ontwikkelaar en blogger op CommunityMX. De Holly hack combineert twee verschillende CSS-technieken die werkte in de dagen van Netscape Navigator en Internet Explorer (IE) 4 op te lossen een aantal lay-out problemen. Begevin gemerkt dat als je pas een hoogte van slechts 1% voor elk van de zwevende elementen in het bovenstaande scenario, het probleem daadwerkelijk oplossen zelf (en alleen omdat het geactiveerd een geheel andere bug in Internet Explorer voor Windows.

Helaas, de 1% truc werkt dus niet op een Mac. Voor dat Begevin toegevoegd een conditional comment die met een backslash binnenkant van haar CSS, die vreemd genoeg, het geblokkeerd zijn van afzonderlijke CSS-regels van IE voor de Mac in de oude dagen. Het resultaat was een CSS truc die zag er als volgt uit:

/* Huiden van IE5-mac */
* html .buggybox { height: 1%; }
/* Einde verbergen van IE5-mac */

Vreemd, ik weet het, maar het wordt alleen maar ingewikkelder.

In dat zelfde jaar, in Mei, waren er een paar meer browsers om te gaan met, en niet alle van hen kan worden hersteld met een lijn van CSS. Tony Aslett geplaatst een nieuwe thread te zijn de raad van het bericht, CSS Schepper, een voorstel voor een nieuwe aanpak. Hij noemde de truc een clearfix omdat het gecentreerd rond het opruimen van de zwevende elementen om het probleem te verhelpen.

Aslett de aanpak maakte gebruik van wat was, op het moment, nog heel nieuw CSS pseudo-kiezers (specifiek :vóór) automatisch wissen uit twee zwevende elementen. Er was een vrij massale teruggang in Aslett de eerste versie van de clearfix. We hebben nooit gehoord van de Hulst Hack, Aslett de code vereist een beetje JavaScript nodig om problemen op te lossen die specifiek zijn popping up op IE voor de Mac. In die dagen, JavaScript is een relatief niet-geteste technologie, en vertrouwen op hem in zo ‘ n fundamentele manier was het minder dan ideaal.

Gelukkig, het web is een plek van iteratie, en een message board gebruiker wees Aslett in de richting van de eerder genoemde Holly Hack. Door beregening in Begevin de conditional comment, Aslett was in staat om zijn code te werken in zowat elke browser zonder JavaScript.

.floatcontainer:after {
inhoud: “.”;
display: block;
hoogte: 0;
clear: both;
visibility: hidden;
}

/* Mark Hadley ‘ s oplossing voor IE Mac */
.floatcontainer {
display: inline-block;
}

/* Huiden van IE Mac */
* html .floatcontainer { height: 1%; }
.floatcontainer { display:block; }
/* Einde Hack */

Als u wilt op te halen naast een belangrijk deel van de web geschiedenis en innovatie, de discussie die volgde Aslett ‘ s post over clearfix is een geweldige plek om te beginnen. Één voor één, begon men te experimenteren met de nieuwe techniek, testen in obscure browsers en apparaten. Wanneer ze klaar waren, zouden ze publiceren hun resultaten naar de thread, soms naast een handige tweak.

Bijvoorbeeld, de gebruiker zulaica op gewezen dat in Mozilla-browsers, de onderste rand van zwevende elementen moest worden expliciet gedefinieerd. Gebruiker pepejeria gemerkt dat je zou kunnen achterlaten op de punt van de inhoud, en de gebruiker van de co2 getest de clearfix in de eerste versie van Apple ‘ s Safari-browser. Elke keer, Aslett zou zijn code een beetje, totdat, nadat meer dan een paar snelle iteraties, de clearfix klaar was, en is, dankzij de gemeenschap, pretty darn kogelvrij.

2006: Clearfix krijgt een update

Maar de browsers vooruit blijven gaan. Sommige van de meer eigenzinnige bits van de clearfix code werkte, want van fouten die werden gebouwd in oudere browsers. Als browsers patch die bugs, nieuwe versies, de clearfix gestopt met werken. Wanneer IE 7 kwam uit op het einde van 2006, een paar aanpassingen aan de techniek die nodig waren om het te laten werken.

Gelukkig, John “Big John” Dappere was het onderhouden van een pagina op zijn blog Positie is Alles met een up-to-date versie van de clearfix. Na het krijgen van feedback van een aantal van zijn lezers, Dappere bijgewerkt zijn blog te weerspiegelen een paar nieuwe oplossingen voor internet explorer 7 gebruik van een nieuw soort voorwaardelijke opmerking dat zou werken in Internet Explorer.

<style type=”text/css”>

.clearfix:after {
inhoud: “.”;
display: block;
hoogte: 0;
clear: both;
visibility: hidden;
}

</style><!– belangrijkste stylesheet eindigt, CC met nieuwe stylesheet hieronder… –>

<!–[if IE]>
<style type=”text/css”>
.clearfix {
zoom: 1; /* triggers hasLayout */
} /* IE alleen kunnen zien in de conditional comment
en lees dit CSS-regel. Niet ooit een normaal gebruik van HTML
reactie in de CC of sluit voortijdig. */
</style>
<![endif]–>

En nogmaals, gebruikers namen in hun eigen browsers om uit te testen van de nieuwste code om te zorgen dat het overal gewerkt. En nogmaals, voor een tijd, het deed.

2010: Clearfix Reloaded

In feite, deze iteratie van de clearfix zou duren tot circa 2010, toen het team op de Yahoo! User Interface Library (YUI) merkte een paar problemen met de clearfix. De Holly Hack, bijvoorbeeld, was nu lang voorbij (IE 5 was maar een afstand geheugen), en na het inschakelen van het box-model, de marges waren behandeld een beetje anders door de moderne browsers.

Maar de mensen bij YUI nog steeds nodig is om line-up van één element naast andere. In feite, is het nodig had, alleen maar toegenomen, als ontwerpers experimenteerden met meer geavanceerde grid lay-outs. In 2010, waren er zeer weinig opties voor grid-layout, zodat clearfix had om te werken. Ze kwam uiteindelijk met een paar extra tweaks om de CSS-regelset, met name door het nemen van voordeel van zowel beschikbaar pseudo-kiezers (:before en :after), om duidelijk uit alle marges. Zij plaatsten hun nieuwe nemen naar hun eigen blog en noemde het “clearfix reloaded.”

.clearfix:voor,
.clearfix:after {
inhoud: “.”;
display: block;
hoogte: 0;
overflow: hidden;
}
.clearfix:na { clear: both; }
.clearfix { zoom: 1 ;} /* IE < 8 */

2011: De Micro Clearfix

Maar zelfs wanneer het is gepubliceerd in 2010, clearfix reloaded gebracht met het aantal onnodige bagage uit oudere browsers. De hoogte is gelijk aan 0 truc was niet echt een vereiste meer, en in feite, de truc was een stuk betrouwbaarder wanneer het display: tabel werd gebruikt. Mensen begonnen wisselen verschillende variaties op de techniek en op blogs. Ongeveer een jaar na de release van clearfix reloaded, ontwikkelaar Nicolas Gallagher samengesteld deze variaties in een meer compacte versie van de hack, die hij de juiste label de micro clearfix.

Na jaren van heen en weer en lichte aanpassingen, de duidelijke correctie nu vereist slechts vier CSS-regels:

/*
* Voor moderne browsers
* 1. De ruimte-inhoud is een manier om te voorkomen dat een Opera-bug bij de
* kenmerk contenteditable is opgenomen ergens anders in het document.
* Anders veroorzaakt ruimte om te verschijnen aan de boven-en onderkant van de elementen
* dat zijn clearfixed.
* 2. Het gebruik van de `tafel` in plaats van `blok` is alleen nodig als u
* `:voor` bevatten de hoogste marges van de onderliggende elementen.
*/
.cf:voor,
.cf:after {
inhoud: “”; /* 1 */
display: table; /* 2 */
}

.cf:after {
clear: both;
}

/*
* Voor internet explorer 6/7 alleen
* Deze regel te activeren hasLayout en bevatten drijft.
*/
.cf {
zoom: 1;
}

Het Einde van Clearfix?

Deze dagen, bijna 15 jaar na het eerst werd voorgesteld, de clearfix is het verliezen van een beetje van relevantie. CSS Grid en Flexbox zijn lacunes op te vullen voor de geavanceerde lay-out op het web. In januari 2017, Rachel Andrew schreef een artikel voor haar blog met de titel “Het einde van de clearfix hack?” In het, zij beschrijft een methode voor het vervangen van de clearfix hack met een enkele regel code met behulp van een nieuwe weergavemodus regel bekend als flow-root.

.container {
display: flow-root;
}

We naderen de dag wanneer clearfix zal niet langer nodig zijn.

Zelfs zonder flow-root, er zijn veel manieren om een rooster voor deze dagen. Als je net begint op het web, zou er weinig reden om nog meer over weten. Dat is een goede zaak! Vanaf het begin was het altijd bedoeld als een tijdelijke oplossing om te maken het beste van wat er beschikbaar was. De ironie is dat zonder de toewijding en het experiment van de ontwikkelaars die gehackt afstand op de clearfix voor zo vele jaren, hebben we niet de tools van vandaag de dag om nooit meer te vertrouwen op het weer.

Genieten van het leren over web geschiedenis met verhalen, net zoals deze? Jay Hoffmann heeft een wekelijkse nieuwsbrief met De Geschiedenis van het Web kunt u zich aanmelden voor hier.