Išplėstinė žymės langelio formavimas su CSS tinkleliu
The CSS tinklelio išdėstymo modulis gali ne tik išspręsti maketavimo problemą, bet ir geras senas mulish problemas ilgą laiką, toks kaip pažymėkite žymės langelį.
Nors yra gana paprastas būdas stiliaus etiketę, kai ji atrodo po to žymės langelį, tai nėra taip paprasta, kai atsiranda etiketė anksčiau ji.
Dėžutės stilius be CSS Grid
Etiketės formavimas po to langelis yra kažkas, ką mes sukūrėme nuo to laiko, kai mes apie tai kažką skaitome. Šis metodas yra vienas iš svarbiausių ir seniausių galingų dinamikos pavyzdžių, kuriuos gali turėti CSS.
Štai kodas, kurį jau žinote, kad stilius etiketėje po to pažymėtas žymimasis langelis:
įėjimas: pažymėtas + etiketė / * stilius man * /
A stiliaus etiketė po to langelis gali atrodyti taip (tačiau galite naudoti ir kitas stiliaus taisykles):
Pirmiau minėtas CSS kodas naudojamas gretimas brolio seseris pažymėtas + Raktas. Kai žymės langelis yra : patikrinta būsena, elementas po to ji (paprastai etiketė) gali būti sukurta naudojant šį metodą.
Tokia paprasta ir veiksminga technika! Kas gali galbūt eiti su juo? Nieko, kol norite rodyti etiketę anksčiau langelį.
Greta esantis brolio seseris pasirenka kitą elementą; tai reiškia, kad etiketė turi ateiti po to žymimasis laukelis HTML šaltinio kode.
Taigi, kad būtų rodoma etiketė anksčiau žymimasis langelis, esantis ekrane, mes negalime tiesiog perkelti jo į pradinio kodo žymės langelį kaip a ankstesnis brolio selektorius CSS nėra.
Tai palieka tik vieną parinktį: žymimąjį langelį ir etiketę naudojant transformuoti arba poziciją arba marža arba kita CSS nuosavybė, turinti tam tikrą telekinetinę galią, kad etiketė būtų rodoma kairėje ekrano žymės langelio pusėje.
Problemos, susijusios su tradiciniu metodu
Nieko nėra iš esmės neteisinga minėta technika, bet ji gali būti tam tikrais atvejais neefektyvus. Aš turiu omenyje atvejus, kai pakeistos žymės langelio ir etiketės pozicijos nebeveikia.
Pagalvokite apie reagavimą, pavyzdžiui. Gali tekti pakeisti žymimąjį laukelį arba pakeisti jo padėtį pagal įrenginį, kuris rodomas. Kai taip atsitiks, jūs taip pat reikia pakeisti etiketę, kadangi nebus pakeista etiketė automatiškai, atsakydama į žymės langelio pakeitimą / dydį.
Mes galime pašalinti šį trūkumą, jei galėtume pateikti tam tikrą patikimą langelio ir etiketės išdėstymą, vietoj jų apytiksliai padėties puslapyje.
Tačiau beveik visos išdėstymo sistemos, pvz., Lentelės ar stulpeliai, reikalauja jums pridėkite etiketę prieš žymės langelį šaltinio kode kad jis būtų rodomas taip pat ekrane. Štai ką mes nenorime daryti, nes kitas elemento selektorius ant etiketės nustos veikti.
Kita vertus, CSS Grid yra išdėstymo sistema ne priklauso nuo šaltinio kodo elementų išdėstymo / tvarkos.
Tinklinio maketo pertvarkymo galimybės sąmoningai veikia tik vizualinis atvaizdavimas, paliekant kalbos tvarką ir navigaciją pagal šaltinio tvarką. Tai leidžia autoriams manipuliuoti vaizdiniu pateikimu, paliekant šaltinio užsakymą nepažeistą… - CSS Grid Layout Module Level 1, W3C
Taigi CSS tinklas yra idealus sprendimas pažymėkite rodomą etiketę anksčiau langelį.
Dėžutės stilius su CSS tinkleliu
Pradėkime nuo HTML kodo. Žymės langelio ir etiketės tvarka išliks tokia pati kaip ir anksčiau. Mes tik pridėjome abu juos į tinklelį.
Pridedamas CSS yra toks:
#cbgrid ekranas: tinklelis; tinklo šablonų sritys: „kairėn dešinė“; plotis: 150px; įvestis [type = checkbox] grid-area: right; etiketė tinklelis: kairėje;
Aš nesiruošsiu išsamiai, kaip veikia CSS tinklas, kaip jau parašiau išsamus straipsnis šiuo klausimu, galite skaityti čia. Tačiau kai kurie pagrindai: ekranas: tinklelis nuosavybė paverčia elementą į tinklelį, tinklo plotas atpažįsta tinklo sritį, kuriai priklauso elementas, ir tinklo šablonų sritys sudaro tinklelį, sudarytą iš skirtingų tinklo zonų.
Minėtame kode yra dvi tinklo zonos: „kairė“ ir „teisė“. Jie sudaro dvi stulpelių tinklelio eilutės. Žymės langelis priklauso „teisė“ plotas ir etiketė „kairė“. Štai kaip jie atrodo ekrane:
Kadangi negalime pakeisti santykinės žymės langelio vietos ir etiketės šaltinio kode, galime vis dar naudokite gretimą brolio seserį:
įėjimas: pažymėtas + etiketė / * stilius man * /
Atkreipkite dėmesį, kad tinklelis yra visada blokuojama; jis pasirodo su aplinkine dėže, žinoma kaip langelio lygio langelis. Jei nenorite, kad, pavyzdžiui, etiketėje, įdėkite pakuotę ant šio elemento (apvyniokite jį į kitą elementą) ir pasukite tą pakuotę į tinklelį.
Taip, žmonės. Tikimasi, kad CSS tinklelis padės jums nubrėžti šių nekaltų čekių langelius.
