Clearfix: En Lektion i webbutveckling Evolution

0
25

På webben har, för det mesta, varit ett spektakulärt öppen plats. Som sådan, en hel del av de bästa tekniker för utveckling hända rätt ut i det fria, på bloggar och i forum, utvecklas i takt med att de gått runt och förbättras. Jag tänkte att det kunde vara kul (och intressant) att faktiskt följa denna kreativt utbyte hela vägen igenom. Ta en titt på en populär CSS-trick, clearfix, och ta reda på exakt hur en webbdesign teknik kommer att vara.

Den clearfix, för de ovetande, är en CSS-hack som löser ett ihållande bugg som uppstår när två flöt element är staplade bredvid varandra. När elementen är anpassade för detta sätt, den överordnade behållare slutar med en höjd av 0, och det kan lätt vraket förödelse på en layout. Allt du kan försöka att göra är att placera en sidofältet till vänster om din huvudsakliga innehåll block, men resultatet skulle vara två delar som överlappar och kollaps på varandra. För att komplicera saker och ting ytterligare, felet är inkonsekvent i olika webbläsare. Den clearfix uppfanns för att lösa allt detta.

Tidig bild av frågan från en Position är Allt

Men för att förstå clearfix, du har att gå ännu längre tillbaka, till 2004 och en särskild teknik som kallas Holly hack.

2004: Holly Hacka och ursprung Clearfix

Den Holly hack är uppkallad efter dess skapare, Holly Begevin, en utvecklare och bloggare på CommunityMX. Den Holly hacka kombinerar två olika CSS-tekniker som arbetat i dagar av Netscape Navigator och Internet Explorer (IE) 4 för att lösa en del layout. Begevin märkt att om du tillämpar en höjd av bara 1% till var och en av de flöt delar i ovanstående scenario, skulle problemet faktiskt fixa själv (och bara för att det aktiveras en helt annan bugg i Internet Explorer för Windows.

Tyvärr, 1% tricket inte fungerar på en Mac. För att Begevin lagt till en villkorlig kommentar som används ett omvänt snedstreck på insidan av hennes CSS, som konstigt nog, blockerade enskilda CSS-regler från IE för Mac i gamla dagar. Resultatet var en CSS-trick som såg ut så här:

/* Hudar från IE5-mac */
* html .buggybox { height: 1%; }
/* Slut gömma sig från IE5-mac */

Konstigt, jag vet, men det blir bara mer komplicerat.

Samma år, i Maj, det fanns några fler webbläsare för att ta itu med, och inte alla av dem kan lagas med en rad i CSS. Tony Aslett publicerat en ny tråd till sin anslagstavla, CSS Skapare, föreslår en ny strategi. Han kallade knep en clearfix eftersom det centrerad kring att rensa flöt element för att åtgärda problemet.

Aslett strategi tog fördel av vad som fanns på den tiden fortfarande mycket nytt CSS pseudo-omkopplare (specifikt :innan) för att automatiskt rensa ut två flöt element. Det var en ganska massiv nackdelen i Aslett första versionen av clearfix. Har aldrig hört talas om den Holly Hacka, Aslett kod krävs en bit av JavaScript för att åtgärda problem som var särskilt poppar upp på IE för Mac. I dessa dagar, JavaScript, var en relativt oprövad teknik, och förlitar sig på det på ett grundläggande sätt var mindre än idealisk.

Tack och lov, webben är en plats för iteration, och en anslagstavla användaren pekade Aslett i riktning mot ovannämnda Holly Hack. Genom att strö i Begevin s villkorade kommentar, Aslett kunde göra sin kod fungerar på nästan alla webbläsare utan JavaScript.

.floatcontainer:efter {
content: “.”;
display: block;
höjd: 0;
clear: both;
visibility: hidden;
}

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

/* Hudar från IE Mac */
* html .floatcontainer { height: 1%; }
.floatcontainer { display:block; }
/* Slut Hack */

Om du vill plocka isär en viktig del av webbhistorik och innovation, den diskussion som följde Aslett s inlägg om clearfix är ett bra ställe att börja. En efter en började folk att experimentera med ny teknik testar det i obskyra webbläsare och enheter. När de var gjort, skulle de skicka sina resultat till meddelandet tråd, ibland tillsammans med en bra tweak.

Användaren kan till exempel zulaica påpekade att i Mozilla, webbläsare, på den nedre kanten av flöt delar tvungen att vara tydligt definierade. Användaren pepejeria märkt att man skulle lämna ut den punkt från innehåll, och användaren co2 testat clearfix i den allra första versionen av Apples webbläsare Safari. Varje gång, Aslett skulle uppdatera sin kod lite tills, efter mer än ett par snabba iterationer, clearfix var redo, och tack vare gemenskapen, ganska bulletproof.

2006: Clearfix får en uppdatering

Men webbläsare fortsatt att avancera. Några av de mer udda bitar av clearfix koden fungerade på grund av buggar som byggdes i äldre webbläsare. Som webbläsare lappade dem fel, i helt nya versioner, clearfix slutat att fungera. När IE 7 kom ut i slutet av 2006, ett par justeringar för att den teknik som behövdes för att få det att fungera.

Lyckligtvis, John “Big John” Gallant var att upprätthålla en sida på sin blogg Position är Allt med en uppdaterad version av clearfix. Efter att få lite feedback från sina läsare, Galant, uppdaterade sin blogg för att återspegla ett par nya buggfixar för IE 7 med en ny typ av villkorlig kommentar som skulle fungera insidan av Internet Explorer.

<style type=”text/css”>

.clearfix:efter {
content: “.”;
display: block;
höjd: 0;
clear: both;
visibility: hidden;
}

</style><!– huvudsakliga stilmall slutar, CC med ny stilmall nedan… –>

<!–[if IE]>
<style type=”text/css”>
.clearfix {
zoom: 1; /* triggers hasLayout */
} /* Endast IE kan man se i den villkorliga kommentar
och läs den här CSS-regel. Använd aldrig en vanlig HTML –
kommentar inne CC eller att det kommer att stänga i förtid. */
</style>
<![endif]–>

Och återigen, användare tog till sin egen webbläsare för att testa den senaste koden för att säkerställa att det fungerade överallt. Och återigen, för en tid, det gjorde det.

2010: Clearfix Reloaded

I själva verket är denna iteration av clearfix skulle pågå fram till ca 2010, när laget på Yahoo! User Interface Library (YUI) märkt några problem med clearfix. Den Holly Hack, till exempel, var länge sedan nu (IE 5 var men en bit minne), och efter byte av box modell, marginaler hanteras på ett lite annorlunda sätt av moderna webbläsare.

Men folket på YUI fortfarande behövs för att rada upp ett element bredvid varandra. I själva verket behöver bara hade ökat, designers experimenterat med mer avancerade nätet layouter. År 2010 fanns det mycket lite alternativ för grid layout, så clearfix tvungen att arbeta. De kom så småningom upp med ytterligare några ändringar i CSS-reglerna, främst genom att ta fördel av båda tillgängliga pseudo-omkopplare (:före och efter), för att rensa ut alla marginaler. De skrivit sin nya ta med till sin egen blogg och kallade det för “clearfix reloaded.”

.clearfix:före,
.clearfix:efter {
content: “.”;
display: block;
höjd: 0;
overflow: hidden;
}
.clearfix:efter { clear: both; }
.clearfix { zoom: 1 ;} /* IE < 8 */

2011: Micro Clearfix

Men även när den publicerades 2010, clearfix reloaded fört med sig några onödiga bagage från äldre webbläsare. Höjden är lika med 0 trick var verkligen inte ett krav längre, och i själva verket, tricket var en mycket mer tillförlitlig när display: table användes istället. Människor började byta olika varianter på tekniken och på bloggar. Ungefär ett år efter utgivningen av clearfix reloaded, utvecklare Nicolas Gallagher sammanställt dessa variationer i en mycket mer kompakt version av hack, som han lämpligt märkta micro clearfix.

Efter år av fram och tillbaka och smärre justeringar, klart fixa nu krävs bara fyra CSS-regler:

/*
* För moderna webbläsare
* 1. Utrymmet innehåll är ett sätt att undvika en Opera bugg när
* attributet contenteditable är inbegripna någon annanstans i dokumentet.
* Annars är det som orsakar utrymme att visas i toppen och botten av element
* som är clearfixed.
* 2. Användningen av `tabell` snarare än `block` är endast nödvändigt om du använder
* `:` att innehålla de högsta marginalerna i child-element.
*/
.cf:före,
.cf:efter {
innehåll: “”; /* 1 */
display: table; /* 2 */
}

.cf:efter {
clear: both;
}

/*
* För IE 6/7 bara
* Har denna regel för att utlösa hasLayout och innehåller flyter.
*/
.jfr {
zoom: 1;
}

Slutet av Clearfix?

Dessa dagar, nästan 15 år efter att den först föreslogs, clearfix är att förlora en bit av relevans. CSS Nätet och Flexbox, är att fylla i luckorna för avancerad layout på webben. I januari 2017, Rachel Andrew skrev en artikel i sin blogg med titeln “slutet av clearfix hacka?” I det beskriver hon ett sätt att ersätta den clearfix hacka med en enda rad kod med ett nytt visningsläge regel kallad flow-rot.

.container {
display: flow-roten.
}

Vi närmar oss dagen när clearfix kommer inte längre att vara nödvändigt på alla.

Även utan flow-rot, det finns massor av sätt att göra ett rutnät i dessa dagar. Om du börjar bara ut på nätet, skulle det inte finnas någon anledning till att ens veta om det. Det är en bra sak! Från början var det ju tänkt som en lösning för att göra det bästa av vad som fanns tillgängligt. Det ironiska är att utan engagemang och utforskande av utvecklare som hackade bort på clearfix i så många år, skulle vi inte ha de verktyg idag för att aldrig förlita sig på det igen.

Njut av att lära sig om web historia med berättelser precis som denna? Jay Hoffmann har ett veckobrev som kallas Historia av Webben som du kan anmäla dig till här.