CSS-kellukset selitetyt ajamalla liukuportaita

Jos olet joskus hypännyt liukuportaille, ymmärrät nopeasti kellukset.

on melkein täydellinen. Päätät ottaa käyttöön joitain kelluvia korjaamaan muutaman elementin välisen suhteen.

Seuraava asia, jonka tiedät, äskettäin kelluvat elementit hyppäävät huolellisesti valitusta järjestyksestäsi ja pysyvät divisioonasi kuin magneetti. Lause ”tahaton käyttäytyminen” tulee mieleen.

Olen henkilökohtaisesti viettänyt tunteja yrittäessään ymmärtää täysin kelluvia. Luin artikkelin ja sanoin: "Voi, tämä on järkevää!" Sitten palaan koodini, kokeile sitä ja ... epäonnistuu. Takaisin piirustuspöydän ääreen.

Aion tehdä parhaani säästäksesi sinulle tämän kohtalon.

Kelluvat luovat vaihtoehtoisia virtauksia. Tämä on vaikein osa ymmärtää. Ja kun esität ne, sinun on kirjoitettava koodisi niin, että se vastaa enintään kolmea virtausta: normaalia, vasenta ja oikeaa. Tämä on kokonaan uusi sääntöjoukko, toisin kuin elementtien leveyden tai niiden sijainnin manipulointi.

Itse asiassa kellukset ovat melko samanlaisia ​​liukuportaiden ajamisen dynamiikan kanssa, ja aion näyttää, kuinka niitä voidaan käyttää selkeän ominaisuuden rinnalla kristallinkirkasten suhteiden luomiseen. Tällä tavoin, kun seuraavan kerran yrität käyttää kelluvia koodeja, et kohtaa yllätyksiä.

Täytyy kunnioittaa ohituskaistaa

Elementtien oletusvirtaus on sellainen kuin yllä olevassa kuvassa. Joku kaveri seisoo keskellä kädellä kaiteella. Hän haastaa koko liukuportaiden. Kukaan ei voi ohittaa häntä. Melko huono liukuportaiden etiketti, todella.

Hän seisoo joukon muita ihmisiä, jotka tekevät samaa asiaa, joten kukaan ei voi ohittaa heitä. Ei ole olemassa käsitettä kaistaista tai ihmisen perustason kunnollisuudesta.

Tämä on tilanne, kun et käytä kelluvia lainkaan.

Hyvä on, nyt puhumme! Ihmiset, joilla on jonkinlainen tietoisuus. Rakkaus nähdä se.

Yksi kaista on muodostettu vasemmalle ja toinen kaista muodostettu oikealle. Muut ihmiset voivat helposti liikkua paikallaan olevien kahden ihmisen ympärillä ja kävellä nopeammin liukuportaiden ylös, jos he haluavat. Kukaan ei estä virtausta seisomalla keskellä.

Tämä on tilanne, kun käytät kelluksia divisioonasi. Virtausta on vasen ja oikea, ja elementit, joita ei ole kellua, voivat helposti täyttää tilan, jota kelluvat elementit eivät ota huomioon.

Kelluu: Vasen ja oikea

Kelluvien käyttö voi tuoda esiin jopa kaksi uutta virtausta: vasen ja oikea.

Ja tämä sallii normaalin elementtien virtauksen, ilman kelluvuusarvoa, täyttää näiden elementtien ympärillä olevat tilat.

Kelluvien avulla voit luoda nämä uudet suhteet virtausten välillä.

Jos sinulla olisi yksi rivi ihmisiä seisomassa hissin keskellä, sinulla olisi rajoitetusti vaihtoehtoja uusille rakenteille. Mutta kun sinulla on vasen ja oikea sarake, voit yhtäkkiä määrittää, että tietyt ihmiset seisovat oikealla, muut pysyvät vasemmalla ja toinen ryhmä voi täyttää aukot.

Tämän avulla voit luoda paremmin luettavan ja ymmärrettävän koodin, koska kelluva ominaisuus antaa myös osoituksen elementin suhteesta ympäröiviin elementteihin.

Selkeä omaisuus

On vielä yksi ryppy, josta emme ole vielä keskustelleet: selkeä omaisuus. ”Tyhjennä” antaa elementeille määrittää, mihin niiden tulisi kohdistua kelluviin elementteihin nähden.

”Kelluvat” -osan ensimmäisessä kuvassa kaksi liukuportaiden ajajaa seisoivat kohteliaasti liukuportaiden molemmilla puolilla. Tämän avulla muut voivat ohittaa ne ja liikkua vapaasti haluamallaan tavalla.

Oletetaan, että sen sijaan, että meillä olisi yksi kelluva vasen elementti ja yksi kelluva oikea elementti, meillä oli sen sijaan 3 kelluvaa vasenta elementtiä ja yksi oikealla. Kolme kelluvaa vasenta elementtiä pinoutuisi vasemmalla olevaan riviin, jos annamme heille myös ”tyhjä: vasen” ominaisuuden. Mutta jos ne suuntautuvat vaakatasossa kelluvan oikean elementin kanssa, se voi tehdä erittäin vaikeaksi tai jopa mahdottomaksi normaalin elementtivirtauksen kulkemisen:

”Tyhjä: vasen” kertoo jokaiselle vasemmalla kelluvalle henkilölle, että heidän tulee kohdistua ensimmäisen vasemmalle kelluvan elementin taakse. Kahden alareunan koosta riippuen normaalien elementtien puristaminen ja miehittäminen oikeassa yläkulmassa voi olla haastava. Joten jopa hyvät liukuportaiden käytännöt voivat silti johtaa tukkeisiin.

Yksi yleisimmistä selkeän ominaisuuden käyttötavoista on ”selvä: molemmat”. Tämän avulla voit nollata elementtien virtauksen, toisin kuin oikean, vasemman ja normaalin virtauksen ylläpitämisen. Se on kuin se liukuportaiden kaveri, joka vie koko tilan, koska hän toi matkalaukunsa.

Kun ”selkeä: molemmat”, sillä ei ole väliä missä yksi kaveri seisoo matkalaukkuunsa suunnassa. Ei ole väliä kuka seisoo vasemmalla tai oikealla hänen yläpuolellaan. Hän estää edelleen koko liukuportaiden. Hänen jälkeen tulevien ihmisten on aloitettava uusi elementtivirta, joka voi sisältää minkä tahansa kolmesta virtauksesta: vasemman, oikean tai normaalin.

Hän on päässyt kolmen virtauksen järjestelmään ja palauttanut säännöt. Huono ihmisille, jotka haluavat ajaa liukuportaita? Varma. Mutta on hyvä, jos haluat estää ketään ohittamasta.

Huomaa, miten tämä eroaa alussa yhdestä herrasmiehestä, joka seisoi liukuportaiden keskellä saman rinnalla ihmisiä, jotka tekivät samoin. Se oli yhden virtauksen järjestelmä. ”Tyhjennä: molemmat” myöntää, että virtauksia voi olla jopa kolme, ja estää seuraavien elementtien kulun.

Jos pidit tästä viestistä, voit nauttia myös muista selityksistä haastavista CSS- ja JavaScript-aiheista, kuten paikannus, Model-View-Controller ja takaisinsoitot.

Ja jos luulet tämän auttavan muita ihmisiä, jotka ovat samassa asemassa kuin sinä, anna sille "sydän"!

Tämä viesti ilmestyi alun perin CodeAnalogies-blogissa.