Clearfix: En Leksjon i Web Utvikling, Evolusjon

0
33

Web-samfunnet har for det meste vært en svært åpen plass. Som sådan, er mye av den beste utviklingen teknikker skje rett ut i det åpne, på blogger og i fora, utvikler seg som de gikk rundt og forbedret. Tenkte jeg det kunne være morsomt (og fascinerende) til å faktisk følge denne kreative exchange hele veien gjennom. Ta en titt på en populær CSS lure, clearfix, og finne ut nøyaktig hvordan en web design teknikken kommer til å bli.

Den clearfix, for de uvitende, er en CSS-hack som løser en vedvarende feil som oppstår når to flyte-elementer er stablet ved siden av hverandre. Når elementene er innrettet på denne måten, foreldrene beholder ender opp med en høyde av 0, og det kan lett vraket ødeleggelse på en layout. Alt du prøver kanskje å gjøre er å plassere en sidepanelet til venstre av hovedinnhold kvartal, men resultatet ville være to elementer som overlapper og kollaps på hverandre. For å komplisere ting ytterligere, feilen er i strid på tvers av nettlesere. Den clearfix ble oppfunnet for å løse alle som.

En tidlig illustrasjon av problemet fra Posisjon er Alt

Men for å forstå clearfix, du har å gå enda lenger tilbake, til 2004, og en spesiell teknikk som kalles the Holly hack.

2004: Holly Hack og opprinnelsen til Clearfix

Holly hack er oppkalt etter sin skaper, Holly Begevin, en utvikler og blogger på CommunityMX. Holly hack kombinerer to forskjellige CSS-teknikker som jobbet i dagene av Netscape Navigator og Internet Explorer (IE) 4 å løse noen layout problemer. Begevin lagt merke til at hvis du bruker en høyde på bare 1% til hver av de andre elementene i scenariet ovenfor, problemet faktisk ville fikse seg selv (og bare fordi det aktivert en helt annen bug) i Internet Explorer for Windows.

Dessverre, 1% trikset fungerte ikke på en Mac. For at Begevin lagt til en betinget kommentar som brukte en omvendt skråstrek på innsiden av hennes CSS, som merkelig nok, blokkert enkelte CSS-regler fra IE for Mac i gamle dager. Resultatet ble en CSS trikset som så ut som dette:

/* Skjuler fra IE5-mac/
* html .buggybox { height: 1%; }
/* End skjule fra IE5-mac/

Merkelig, jeg vet, men det blir bare mer komplisert.

Samme året, i Mai, var det noen flere nettlesere for å håndtere, og ikke alle av dem kan bli oppdatert med en linje av CSS. Tony Aslett lagt ut en ny tråd til sin oppslagstavle, CSS Skaperen, foreslår en ny tilnærming. Han kalte lure clearfix fordi det sentrert rundt fjerne den flyte-elementer for å løse problemet.

Aslett tilnærming tok nytte av det som var, på den tiden, fortsatt veldig ny CSS pseudo-velgere (spesielt :før) til automatisk å tømme ut to flyte-elementer. Det var en ganske massiv ulempe i Aslett er første versjon av clearfix. Har aldri hørt om Holly Hack, Aslett koden kreves litt JavaScript for å løse problemer som var spesielt dukker opp på IE for Mac. I disse dager, JavaScript var en relativt uprøvd teknologi, og stole på den i en slik fundamental måte var mindre enn ideell.

Heldigvis, internett er et sted for iterasjon, og en oppslagstavle bruker pekte Aslett i retning av de nevnte Holly Hack. Ved å strø i Begevin er betinget kommentar, Aslett var i stand til å gjøre koden hans arbeid i omtrent hver nettleser uten JavaScript i det hele tatt.

.floatcontainer:etter {
innhold: “.”;
display: block;
høyde: 0;
clear: both;
visibility: hidden;
}

/* Merk Hadley ‘ s fix for IE Mac */
.floatcontainer {
display: inline-block;
}

/* Skjuler fra IE Mac */
* html .floatcontainer { height: 1%; }
.floatcontainer { display:block; }
/* End Hack */

Hvis du ønsker å plukke fra hverandre en viktig bit av web historie og innovasjon, og diskusjonen som fulgte Aslett innlegg om clearfix er et flott sted å starte. Én etter én, folk begynte å eksperimentere med den nye teknikken, teste det i obskure nettlesere og enheter. Når de var ferdig, ville de legge inn sine resultater til meldingen tråden, noen ganger sammen med en nyttig tweak.

For eksempel, kan brukeren zulaica påpekt at i Mozilla nettlesere, den nederste grensen av flyte-elementer som måtte være eksplisitt definert. Brukeren pepejeria lagt merke til at du kan la ut dot fra innhold, og bruker co2 testet clearfix i den aller første versjonen av Apples Safari-nettleser. Hver gang, Aslett vil oppdatere sin kode litt til, etter mer enn et par raske iterasjoner, clearfix var klar og, takk til fellesskapet, ganske darn skuddsikkert.

2006: Clearfix får en oppdatering

Men nettlesere holdt på fremmarsj. Noen av de mer sære biter av clearfix koden arbeidet på grunn av feil som ble bygget i eldre nettlesere. Som nettlesere lappet dem feil, i helt nye versjoner, clearfix sluttet å fungere. Når IE 7 kom ut på slutten av 2006, og et par justeringer på den teknikk som var nødvendig for å gjøre det arbeidet.

Heldigvis, Jon “Big John” Gallant var å opprettholde en side på bloggen sin Posisjon er Alt med en oppdatert versjon av clearfix. Etter å ha fått noen tilbakemeldinger fra sine lesere, Gallant oppdatert bloggen sin til å gjenspeile et par nye hurtigreparasjoner for IE 7 ved hjelp av en ny type betinget kommentar som ville fungere innsiden av Internet Explorer.

<style type=”text/css”>

.clearfix:etter {
innhold: “.”;
display: block;
høyde: 0;
clear: both;
visibility: hidden;
}

</style><!– viktigste stylesheet ender, CC med nye stylesheet nedenfor… –>

<!–[if IE]>
<style type=”text/css”>
.clearfix {
zoom: 1; /* utløser hasLayout */
} /* Bare IE kan se inni betinget kommentar
og les denne CSS-regel. Ikke bruk en vanlig HTML
kommentar inne på CC eller det vil lukkes for tidlig. */
</style>
<![endif]–>

Og igjen, brukere tok til sine egne nettlesere for å teste ut den nyeste koden for å sikre at det fungerte overalt. Og igjen, for en tid, gjorde det.

2010: Clearfix Reloaded

Faktisk, denne utgaven av clearfix skulle vare fram til 2010, da laget på Yahoo! Brukergrensesnittet Bibliotek (YUI) la merke til noen problemer med clearfix. Holly Hack, for eksempel, nå var lenge borte (IE 5 var, men en avstand minne), og etter bytte boksen modell, marginene var håndteres litt forskjellig av moderne nettlesere.

Men folk på YUI fortsatt behov for å stille opp ett element ved siden av en annen. Faktisk, de trenger bare hadde økt, noe som designere eksperimentert med mer avanserte grid layout. I 2010 var det svært lite valg for grid layout, så clearfix måtte jobbe. De til slutt kom opp med et par ekstra tilpasninger til CSS-regelsett, særlig ved å ta for seg av både tilgjengelig pseudo-velgere (:før :etter), til å tømme ut noen marginer. De lagt ut sine nye ta til sin egen blogg, og kalte det “clearfix på nytt.”

.clearfix:før,
.clearfix:etter {
innhold: “.”;
display: block;
høyde: 0;
overflow: hidden;
}
.clearfix:etter { clear: both; }
.clearfix { zoom: 1 ;} /* IE < 8 */

2011: Micro Clearfix

Men selv når den ble publisert i 2010, clearfix reloaded førte med seg noen unødvendig bagasje fra eldre nettlesere. Høyden er lik 0 trikset var egentlig ikke et krav lenger, og faktisk trikset var en mye mer pålitelig når display: table ble brukt i stedet. Folk begynte å bytte ulike varianter på teknikken på og på blogger. Omtrent et år etter utgivelsen av clearfix reloaded, utvikler Nicolas Gallagher utarbeidet disse variasjonene til en mye mer kompakt versjon av den hack, som han korrekt merket micro clearfix.

Etter år med fram og tilbake og små justeringer, den klare fix nå må bare fire CSS-regler:

/*
* For moderne nettlesere
* 1. Plassen innhold er en måte å unngå en Opera bug når den
* contenteditable attributtet er inkludert andre steder i dokumentet.
* Ellers er det forårsaker plass til å dukke opp på toppen og bunnen av elementer
* det er clearfixed.
* 2. Bruk av `tabell` heller enn `blokk` er bare nødvendig hvis du bruker
* `:før` inneholder topp-marginer på barn elementer.
*/
.jf:før,
.jf:etter {
innhold: “”; /* 1 */
skjerm: tabellen; /* 2 */
}

.jf:etter {
clear: both;
}

/*
* For IE bare 6/7
* Inkluderer denne regelen til å utløse hasLayout og inneholder flyter.
*/
.jf {
zoom: 1;
}

Slutten av Clearfix?

I disse dager, nesten 15 år etter at det først ble foreslått, clearfix er å miste en bit av relevans. CSS Rutenett og Flexbox er å fylle i hullene for avansert oppsett på web. I januar 2017, Rachel Andrew skrev en artikkel for hennes blogg med tittelen “slutten av clearfix hack?” I det hun beskriver en måte å erstatte clearfix hack med en enkelt linje med kode ved hjelp av en ny skjerm modus regel kjent som flyt-rot.

.beholder {
skjerm: flow-rot;
}

Vi nærmer oss den dagen da clearfix vil ikke lenger være nødvendig i det hele tatt.

Selv uten flyt-rot, det er mange måter å lage et rutenett i disse dager. Hvis du var bare starter ut på internett, det ville være liten grunn til å selv lære om det. Det er en god ting! Fra begynnelsen er det alltid var ment som en midlertidig løsning for å gjøre det beste ut av det som var tilgjengelig. Det ironiske er at uten engasjement og eksperimentering av utviklere som hacket unna på clearfix i så mange år, ville vi ikke har verktøy i dag for å aldri ha til å stole på det igjen.

Liker å lære om web historie med historier, akkurat som dette? Jay Hoffmann har et ukentlig nyhetsbrev, kalt Historien av Internett kan du registrere deg her.