Advanced Checkbox Styling a CSS Grid-el
A CSS Grid Layout Module nem csak egy elrendezési probléma mamutját tudja megoldani, hanem néhány jó öreg mulish problémát is sokáig foglalkozik, mint például jelölje be a jelölőnégyzetet.
Míg viszonylag egyszerű módszer a címke stílusának megjelenítéséhez, amikor megjelenik után jelölőnégyzetet, ez nem olyan egyszerű, ha megjelenik a címke előtt azt.
Jelölőnégyzet stílusa CSS Grid nélkül
Címke formázása után egy jelölőnégyzet van, amit a fejlesztők csináltak, mióta olvastunk róla. Ez a technika az egyik legfontosabb és régi példája annak, hogy a CSS milyen erős dinamikával rendelkezik.
Itt van a kód, amit már ismerhetsz stílusok egy címkét után jelölőnégyzetet:
bemenet: bejelölve + címke / * style me * /
A stílusú címke után jelölőnégyzetet így nézhet ki (azonban más stílusszabályokat is használhat):
A fenti CSS kód a szomszédos testvér kombinátor a + kulcs. Ha egy jelölőnégyzet van a : ellenőrzött állapot, egy elem után azt (általában címke) ezt a módszert felhasználva lehet kialakítani.
Egy ilyen egyszerű és hatékony technika! Mi lehet esetleg tévedsz vele? Semmi, amíg nem szeretné megjeleníteni a címkét előtt jelölje be a jelölőnégyzetet.
A szomszédos testvér kombinátor kiválasztja a következő elemet; ez azt jelenti, hogy a címke jön után jelölje be a HTML forráskódban található jelölőnégyzetet.
Tehát egy címke megjelenítéséhez előtt a hozzátartozó jelölőnégyzetet a képernyőn nem tudjuk csak a forráskódban lévő jelölőnégyzet előtt mozgatni, mint a az előző testvérválasztó nem létezik a CSS-ben.
Amely csak egy lehetőséget kínál: jelölje be a jelölőnégyzetet és a címkét használva átalakít vagy pozíció vagy margó vagy egy másik CSS-tulajdonság, amely valamilyen telekinetikus erővel rendelkezik, úgyhogy a címke a képernyőn lévő jelölőnégyzet bal oldalán jelenik meg.
Problémák a hagyományos módszerrel
Nincs semmi majorly rossz a fent említett technikával, de lehet bizonyos esetekben nem hatékony. Olyan eseteket értem, amikor a jelölőnégyzet és a címke átrendeződött pozíciói már nem működnek.
Gondolkodjon érzékeny, például. Lehet, hogy átméretezheti vagy áthelyezheti a jelölőnégyzetet a megjelenített eszköz szerint. Amikor ez megtörténik, akkor szükség van a címke áthelyezésére is, mivel a jelölőnégyzet áthelyezésére / átméretezésére adott válasz nem lesz automatikusan végrehajtva.
Ezt a hátrányt kiküszöbölhetjük, ha csak tudnánk biztosítson néhány szilárd elrendezést a jelölőnégyzet és a címke számára, ahelyett, hogy nagyjából elhelyezné őket az oldalon.
De szinte minden elrendezési rendszer, például táblázatok vagy oszlopok megkövetelik Önt add hozzá a címkét a forráskód jelölőnégyzete előtt ugyanolyan módon jelenik meg a képernyőn. Ezt nem akarjuk csinálni, mert a következő elemválasztó a címkén leáll.
A CSS Grid viszont egy olyan elrendezési rendszer nem függ a forráskód elemeinek elrendezésétől / sorrendjétől.
A rácselrendezés átrendező képessége szándékosan befolyásolja csak a vizuális megjelenítés, a beszédrendelés és a navigáció elhagyása a forrásrendelés alapján. Ez lehetővé teszi a szerzők számára, hogy manipulálják a vizuális prezentációt, miközben a forrásrendet érintetlenül hagyják… - CSS Grid Layout Module Level 1, W3C
Így a CSS rács ideális megoldás stílusban adja meg a megjelenő címkét előtt jelölje be a jelölőnégyzetet.
Jelölőnégyzet stílusa a CSS Grid segítségével
Kezdjük a HTML kóddal. A jelölőnégyzet és a címke sorrendje ugyanaz marad, mint korábban. Mindkettőt csak egy rácshoz adjuk.
A kísérő CSS a következő:
#cbgrid kijelző: rács; rács-sablonterületek: "jobbra"; szélesség: 150px; bemenet [type = jelölőnégyzet] grid-area: right; címke grid-area: left;
Nem megyek alaposan a CSS-hálózat működésére, ahogy már írtam a részletes cikk a témáról, amit itt olvashat. Néhány alapja azonban: a kijelző: rács a tulajdonság egy rácstartályba helyezi az elemet, grid-terület azonosítja a rácsterületet, és egy elemet grid-template-nak különböző rácsterületekből álló rács elrendezést alkot.
A fenti kódban vannak két rácsterület: "balra" és "jobb". Ők alkotják két rácsos oszlop. A jelölőnégyzet a "jobb" terület és a címke a "balra". Íme hogyan néz ki a képernyőn:
Mivel nem változtattuk meg a jelölőnégyzet és a címke relatív elhelyezését a forráskódban még mindig használja a szomszédos testvér kombinátort:
bemenet: bejelölve + címke / * style me * /
Ne feledje, hogy egy rácselem van mindig blokkolt; úgy tűnik, hogy egy környező doboz néven ismert rácsszintű doboz. Ha nem akarod ezt, például egy címkét, tegyen egy csomagolást az elemre (tekerje be egy másik elembe) és kapcsolja be ezt a burkolatot a rács területére.
Ez az, emberek. A CSS rács remélhetőleg segíti az ilyen pimasz jelölőnégyzetek elrendezésének beillesztését.
