Mennyiségi sorrend css-ben
Ha csak két cellát találunk a táblában, akkor speciális elemünk a második, de ha több, mint három, akkor elfoglalja az utolsó cellát a táblázat első sorában.
Számláló a tiszta CSS-en
Nemrégiben teljesen beakasztottam magam a flexibilis dobozba, és a tartalom áramlásával együtt tanítottam az úszó tulajdonság használatával. Ezeket a módszereket a HackerYou kis projektünk elrendezésében használtuk. Azt tapasztalták, hogy a diákok gyorsan megértik ezt a témát. A flexbox-specifikáció olyan tulajdonságokkal rendelkezik, amelyek lehetővé teszik számunkra, hogy új módon változtassuk meg a jelölést. Az egyik ilyen módszer a rendelési tulajdonság, amely lehetővé teszi a tartalom vizuális sorrendjének megváltoztatását anélkül, hogy befolyásolná a jelölést.
A média kérésekkel együtt rendkívül hasznos a megrendelés, a böngészőablak méretétől függően megváltoztathatjuk a tartalom sorrendjét. És arra gondoltam, hogy miért nem változtathatjuk meg az elemek sorrendjét a tartalom mennyiségétől függően?
Gyakorlati kurzus az adaptív leszállásról a semmiből!
Tanuljon meg a semmiből, hogy adaptálódjon a HTML5 és CSS3 alkalmazásokhoz a következő 6 napban
Kvantitatív lekérdezések
A Lea Verou, André Luis és Heydon Pickering által javasolt ötlet az, hogy ezek a lekérdezések számolják a szomszédos elemek számát, és számukra alkalmazzák a stílusokat, ha egy bizonyos számot beírnak. Mi a teendő, ha a mennyiségi lekérdezéseket kombináljuk a rendelés tulajdonsággal, hogy megváltoztassuk a tartalom sorrendjét, a számától függően?
Flexbox alapú módszer
A flexbox egyik legfontosabb változása az asszociatív tulajdonságok és értékek elnevezésének szintaxisa. Mivel a specifikáció az egész idő alatt fejlődik, a böngészőgyártók a jelenleg rendelkezésre álló szintaxist használják. Ezért az elavult böngészők támogatásához kereskedelmi előtagokat kell használnia.
Hogyan lehet megérteni a rend lényegét?
Mielőtt mennyiségi lekérdezésekbe merülne, és megértenék munkájukat, meg kell értenie, hogyan kell dolgozni a rendelés tulajdonságával. Először be kell csomagolnia a tartalmat a szülőelemre, és hozzá kell adnia a megjelenítést: a flex stílusokat ehhez a csomaghoz.
Alapértelmezés szerint az elemek rendezése a jelölés által megadott sorrendben történik. A szülő flexboxjának minden gyermekének rendelési értéke 1.
Ennek az értéknek nincs mérési egysége, és egyszerűen összehasonlítható az elem szekvenciaszámával a többi elem körül. Az egyedi elem értékét azonban megváltoztathatjuk a rendelési tulajdonság segítségével.
A fenti példában a p.itemOne sorrendjét 2 értékre módosítottuk, és ez a sor megjelenik a p.itemTwo után. Így megváltoztatjuk az elemek vizuális megjelenítését a felhasználó számára. Ne feledje, hogy az elrendezés ugyanaz maradt.
Számlálók a CSS-ben
A média kérései, igaz? Olyan nagyszerű eszköz a CSS-ben néhány esetben. Ilyen esetek lehetnek az eszköz típusát, a képernyő méretét, színét stb. - elég erős. De ezek a lekérdezések csak a felhasználó eszközére vonatkoznak; Nincs olyan konkrét módszer a CSS-re, amely kiszámítja az elem tartalom tartalmát.
Ha kreatív és gondosan kezeljük a meglévő CSS pszeudoosztályokat, létrehozhatunk egy eszköztárat a gyermekek számának megszámolásához és a megfelelő stílusok alkalmazásához. Például használjuk a szokásos számozott listát:
Minden varázslat a szomszédos elemek számozásával az alábbi kódban. Ezeket a stílusokat elemekre kell alkalmazni, ha 4 vagy több van.
Várjon, nem lehet!
Pontosan ez a választó. Oroszul ezt a következőképpen lehet lefordítani: "Ha a gyermek elemei a 4 vagy annál több listán szerepelnek, akkor egy másik lista elemeit kapjuk az első gyermekhez". Nézzünk részletesebben. Először a számlálóval kezdjük:
Fordítva: "Menj az utolsó gyermeke és számolj vissza 4 elemet". Stílusokat alkalmaznak a negyedik elemre és mindazokra, akik előtte vannak. (A számlálás fordított sorrendben történik!). Folytassa és kísérelje meg a kódot, hozzárendelhessen szelektort más értékekhez.
Ezek a számlálók. Ha a szomszédos elemek kevesebb mint négy, akkor a stílusok nem lesznek alkalmazva. Most megváltoztatjuk ezt a választót úgy, hogy az univerzális szelektor segítségével kiválasztja az összes li-et a listáról.
A probléma az, hogy ebben az esetben az első gyermekelem nem kerül kiválasztásra. Hozzáadhatunk még egy választót:
Természetesen a szelekció függetlenségét egyszerűbbé teheti, ha egyszerűen meghatározza a szülőelemet, és megadja, hogy kiválassza a gyerekeket. Ezt a választógomb segítségével * tesszük.
Rendelés az elemek számán alapulva
Most, hogy kitaláltuk, hogyan számoljuk az elemeket a CSS használatával és hogyan használjuk a flexbox-ot a tartalom sorrendjének megváltoztatásához, kombináljuk őket, és létrehozzunk egy eszközkészletet az elemek számuk alapján történő rendezéséhez.
Ismét meg kívánjuk tenni az utolsó elemet a listán szereplő harmadik csoportból (azaz, hogy az utolsó elem az utolsóként szerepel az első sorban), ha több mint három elem van.
Gyakorlati kurzus az adaptív leszállásról a semmiből!
Tanuljon meg a semmiből, hogy adaptálódjon a HTML5 és CSS3 alkalmazásokhoz a következő 6 napban
Adjuk hozzá néhány stílust. A szülő tartályhoz adjon hozzá a megjelenítést: flex, ez a tulajdonság lehetővé teszi számunkra, hogy a rendelési tulajdonságot a gyermek elemekre alkalmazzuk. Ezenkívül az elemek egymástól való megkülönböztetése érdekében néhány alapértelmezett stílust adunk hozzá a .target elemhez.
Most, hogy rendelkezünk az alapvető stílusokkal, létrehozhatunk logikát, hogy az elemeket bizonyos módon rendezzük el. Ismét alapértelmezés szerint minden tételnek rendelési értéke 1, és megjelenik abban a sorrendben, amelyben az elrendezésben szerepel. Kvantitatív lekérdezések segítségével kiszámíthatjuk az elemek számát. Több mint három elem van.
Ezután, ha a feltétel teljesül, kiválaszthatjuk a kívánt .target elemet. A rendelés tulajdonságának -1 értékét használtuk, most ez az elem a lista tetején jelenik meg.
Voila! Csak elemeztük az elemet az elemek számának számozásával. Ezzel a kóddal egy elemet helyezhetünk el a másik elé. És mi van akkor, ha két elem között kell elemet tenni?
Néhány logikai reflexió
Három ismeretlennél van probléma:
Alapértelmezés szerint a listában szereplő összes elem rendelkezik az értékrenddel: 1. Biztosítani kell, hogy ez az érték ne változzon az első két elemnél.
A különleges elemünket az első sor végén kell elhelyezni. Tehát meg kell növelnünk a rend értékét, és meg kell növelnünk az első két elemet, vagyis az első két elemet. 2.
Minden elem, a harmadiktól kezdve, rendelési értékének magasabbnak kell lennie, mint a célelemünk. Ezért a többi elem esetében a megbízás értéke 3.
Hogy vagy? Mivel minden elemnek alapértelmezés szerint 1 értéke van, ezért nem kell deklarálnunk. Állítsuk be speciális elemünket a megbízás értékére: 2 kvantitatív lekérdezések segítségével, végül is hatékonyan.
Ezután egy másik kvantitatív lekérdezést alkalmazva nth-child () -re, elkezdjük számolni a tételeket a lista elejéről, és nem a végéről. Mivel korábban írtunk egy .targetre vonatkozó kérelmet, ezt az elemet figyelmen kívül hagyjuk, de a harmadik és a következő elemek megváltoztatják sorrendjüket.
Vesszük még egyszer!
A gyermekelemek listájának végétől számolunk, hogy megnézzük, megfelel-e egy bizonyos számnak. Ha az elemek száma megfelel az állapotnak, stílusokat alkalmazunk a kiválasztott elemekre. Ezután kezdjük el a számlálást a lista kezdetétől, és a stílusokat alkalmazzuk egy adott, speciális elem összes elemére. A legfontosabb elem az, hogy ha eltávolítjuk az elemeket, akkor a célelem a kívánt helyen marad.
A végső cél
Az első gondolat, amikor ezt a feladatot állítottam, programozási nyelveket használt. Mivel használtam a WordPress-ot, megváltoztathattam a hurkot, és az elemek számának kiszámítása után helyezze el a célelemet a megfelelő helyre.
Azóta azonban, hogy létrehoztam egy helyszínt az iskola számára a front-end fejlesztés során, ezt a tiszta CSS-en szeretném csinálni, és ki kellett volna tennem a flexbox rendelési tulajdonságokat. Az alábbiakban egy példa a végeredményre, amelyet teljes egészében a CSS-ben végeztünk.
Alkalmazás a gyakorlatban
A kvantitatív lekérdezések koncepciója meglehetősen új, ezért a szelektorképzés nehézkes lehet. Mindazonáltal a fejlesztő közösség lelkesen elfogadta ezt a koncepciót, és már írja a Sass mixin'y-t, ami segíteni fog nekünk a vizsgálatok hatékonyabbá tételében. Az ilyen könyvtárak, mint például a Daniel Guillan mennyiségi lekérdezések mixinek könyvtára, lehetővé teszik számunkra, hogy a médiakérdeket egyszerű kapcsolatként írjuk le.
Ez a koncepció és a benne rejlő erő is számos cikkből származik. James Steinbach figyelemre méltó cikket írt "A Sass alkalmazása kvantitatív lekérdezésekben".
Böngésző támogatás
Jelenleg a CSS ál-osztályok és a flexbox a modern böngészőkben jól működnek. Ha a projekt figyelembe veszi az IE10-nél alacsonyabb felhasználókat, akkor a mennyiségi lekérdezéseket használhatja a flexbox-szal együtt.
Hol használható
Webhelyek létrehozásakor gyakran használunk olyan programozási nyelveket, amelyek lehetővé teszik számunkra, hogy szükség esetén számítsunk és módosítsunk tartalmat. A CSS azonban sokkal jobbá vált, és a programozási nyelvektől a fejlett CSS tulajdonságokig mentünk.
A mennyiségi rendelés lehetővé teszi számunkra, hogy eltávolítsuk a kódokat olyan ciklusokkal, amelyek felelősek az elemek számlálásáért és beillesztéséért a helyes sorrendben, és tartalmainkat szemantikailag tiszta formává tesszük.
következtetés
A mennyiségi lekérdezések és a megrendelések fejlett koncepciók, és megijeszthetik a kezdőket. Mindazonáltal, minél tovább növeljük a prezentáció stilizációját a programozási nyelvekről CSS felé, annál inkább használjuk ezt az eszközt. A közösségünk egyre többen keresnek tartalmat maguk számára, és most kvantitatív lekérdezéseket használhatunk a tartalom sorrendjének egyszerű megváltoztatására számlálók segítségével.
Kiadás: A webformyself parancs.
Gyakorlati kurzus az adaptív leszállásról a semmiből!
Tanuljon meg a semmiből, hogy adaptálódjon a HTML5 és CSS3 alkalmazásokhoz a következő 6 napban
A legfrissebb hírek az informatikai és webfejlesztésről a Telegram csatornán
