A CSS úszókkal magyarázható mozgólépcsőn

Ha valaha is felugrott egy mozgólépcsőn, akkor gyorsan megértheti az úszókat.

A

szinte tökéletes. Úgy dönt, hogy bevezet néhány úszót, hogy rögzítse a néhány elem közötti kapcsolatot.

A következő dolog, amit tudsz, az újonnan lebegő elemei kiugrik a gondosan választott sorrendből, és mint mágnesek ragaszkodnak a div oldalához. A „nem szándékos viselkedés” kifejezés eszébe jut.

Személyesen órákat töltöttem azzal, hogy teljes mértékben megértsem az úszókat. Elolvastam egy cikket, és azt mondtam: „Ó, ennek van értelme!” Aztán visszatértem a kódomhoz, kipróbáltam és… kudarcot valltam. Vissza a rajztáblához.

Mindent megteszek, hogy megkíméljem neked ezt a sorsot.

Az úszók váltakozó áramlást hoznak létre. Ez a legnehezebb megérteni. Miután bemutatta őket, el kell írnia a kódot, hogy legfeljebb három folyamatot tudjon számolni: normál, bal és jobb. Ez egy teljesen új szabálykészlet, szemben az elemek szélességének manipulálásával vagy elhelyezkedésével.

Valójában az úszók nagyon hasonlítanak a mozgólépcsők mozgásának dinamikájához, és megmutatom, hogy miként használhatók fel a tiszta tulajdonság mellett kristálytiszta kapcsolatok létrehozására a divs-on belül. Ilyen módon, amikor legközelebb megkísérel úszókat használni a kódjában, nem fog meglepni a meglepetés.

Tiszteletben kell tartanom az áthaladási sávot

Az alapértelmezett elemek áramlása olyan, mint a fenti kép. Valaki srác áll a közepén, a kezével a korláton. Megöli az egész mozgólépcsőt. Senki sem haladhatja meg. Nagyon rossz mozgólépcső-illemtan, tényleg.

Egy csomó más ember mögött áll, akik ugyanazt csinálják, így senki sem tudja átadni őket. Nincs fogalom a sávokról vagy az alapvető emberi tisztességről.

Ez a forgatókönyv, amikor egyáltalán nem használ úszót.

Rendben, most beszélünk! Az emberek mutatják valamilyen szintű tudatosságot. Szeretem ezt látni.

Egy sáv van kialakítva a bal oldalon, és egy másik sáv alakult ki a jobb oldalon. Mások könnyedén mozoghatnak az álló két ember körül, és ha akarják, gyorsabban léphetnek fel a mozgólépcsőn. Senki sem akadályozza meg az áramlást a közepén állva.

Ez a forgatókönyv, amikor úszásokat használ a div. Van egy bal és egy jobb áramlás, és a nem lebegő elemek könnyen kitölthetik azt a helyet, amelyet a lebegő elemek nem vesznek fel.

Úszók: Bal és jobb

Az úszók használata akár két új áramlást vezet be: bal és jobb.

És ez lehetővé teszi az elemek normál áramlását, az úszóérték nélküli elemeknél, hogy kitöltsék az ezen elemek körüli teret.

Az úszók lehetővé teszik ezen új kapcsolatok létrehozását az áramlatok között.

Ha egy sor ember állna a lift közepén, akkor korlátozott lehetőségek állnak rendelkezésre az új építmények számára. De ha van bal és jobb oszlop, hirtelen megadhatja, hogy egyes emberek jobb oldalon állnak, mások balra maradnak, és egy másik csoport kitölti a hiányosságokat.

Ez lehetővé teszi az olvashatóbb és érthetőbb kód létrehozását, mivel az úszó tulajdonság jelzi az elem kapcsolatát a környező elemekkel.

A tiszta ingatlan

Van még egy ránc, amelyet még nem tárgyaltunk: az tiszta tulajdonság. A „Törlés” lehetővé teszi az elemek számára, hogy meghatározzák, hol kell igazodniuk az úszó elemekhez képest.

A „Lebegő” szakasz első képén a két mozgólépcsővezető udvariasan állt a mozgólépcső mindkét oldalán. Ez lehetővé teszi mások számára, hogy áthaladjanak és szabadon mozoghassanak, ahogy akarják.

Tegyük fel, hogy ahelyett, hogy egy lebegő bal és egy lebegő jobb elem lenne, ahelyett 3 lebegő bal és egy a jobb oldalon volt. A három úszó bal elem egy sorba rakódna a bal oldalon, ha megadnánk nekik a „tiszta: bal” tulajdonságot. De ha vízszintesen igazodnak a jobb úszó elemhez, akkor nagyon megnehezítheti vagy akár lehetetlenné teszi az elemek normál áramlását:

„Tiszta: balra” azt mondja, hogy mindenki balra lebegő személynek igazodjon az első bal oldalon lebegő elem mögé. Az alsó két ember méretétől függően bármely normál elem kihívást jelenthet a jobb felső sarokban lévő rész átnyomására és elfoglalására. Tehát még a helyes mozgólépcső gyakorlatok is akadályokat eredményezhetnek.

A tiszta tulajdonság egyik leggyakoribb felhasználása a „tiszta: mindkettő”. Ez lehetővé teszi az elemek áramlásának visszaállítását, szemben a jobb, bal és a normál áramlás fenntartásával. Olyan, mint egy fickó a mozgólépcsőn, aki az egész helyet foglalja el, mert hozta a bőröndjét.

A „tiszta: mindkettő” mellett nem számít, hol áll az egyik srác a bőröndjéhez képest. Nem számít, ki áll balra vagy jobbra fölötte. Még mindig blokkolja az egész mozgólépcsőt. Azoknak, akik utána lépnek fel, új elemáramot kell indítaniuk, amely magában foglalhatja a három áramlás bármelyikét: bal, jobb vagy normál.

Megmenekült a háromáramú rendszertől és visszaállította a szabályokat. Rossz azok számára, akik fel akarják futtatni a mozgólépcsőt? Biztos. De jó, ha meg akarja akadályozni, hogy bárki elhaladjon.

Figyelje meg, hogy ez miért különbözik az elején egy úriembertől, aki a mozgólépcső közepén állt, egy vonal mögött, aki ugyanazt csinálta. Ez egy egyáramú rendszer volt. „Tiszta: mindkettő” felismeri, hogy akár három áramlás is lehet, és blokkolja az azt követő elemek áthaladását.

Ha tetszett neki ez a bejegyzés, élvezheti a kihívásokkal teli CSS és JavaScript témák egyéb magyarázatait is, például a pozicionálás, a Model-View-Controller és a visszahívások.

És ha úgy gondolja, hogy ez más embereknek segíthet, mint te, ugyanolyan helyzetben, adj neki egy „szívet”!

Ez a bejegyzés eredetileg a CodeAnalogies blogban jelent meg.