Napredno potrditveno polje s stilom CSS Grid
The Modul za postavitev mreže CSS ne more rešiti samo mamuta problema postavitve, ampak tudi nekaj dobrih starih vprašanj, ki smo jih bili dolgo časa, kot naprimer styling potrditvenega polja.
Medtem ko obstaja relativno preprosta metoda za oblikovanje sloga, ko se pojavi po Potrditveno polje ni tako enostavno, ko se oznaka prikaže prej to.
Styling potrditvenega polja brez CSS Grid
Oblikovanje etikete po potrditveno polje je nekaj, kar počnemo razvijalci odkar smo nekje prebrali. Ta tehnika je eden glavnih in starih primerov močne dinamike, ki jo lahko ima CSS.
Tukaj je koda, ki bi jo morda že poznali stilizira oznako po označeno potrditveno polje:
input: označeno + oznaka / * style me * /
A nalepko po potrditveno polje morda izgleda tako (lahko uporabite tudi druga pravila za slog):
Zgornja koda CSS uporablja oznako sosednji kombinator označeno z + tipko. Ko je potrditveno polje v : označeno država, element po to (običajno oznaka) lahko uporabite to metodo.
Tako preprosta in učinkovita tehnika! Kaj bi lahko mogoče gre kaj narobe? Nič - dokler ne želite prikazati oznake prej potrditveno polje.
Sosednji kombinator sester izbere naslednji element; to pomeni, da mora oznaka priti po potrditveno polje v izvorni kodi HTML.
Torej, da se prikaže etiketa prej Če ne izberemo potrditvenega polja na zaslonu, ga ne moremo samo premakniti pred potrditvenim poljem v izvorni kodi, kot prejšnji izbirnik za sestre ne obstaja v CSS.
Kar pušča samo eno možnost: ponovno postavite potrditveno polje in oznako uporabo transform ali položaj ali marže ali drugo lastnost CSS z nekakšno telekinetično močjo, tako da se oznaka prikaže levo od potrditvenega polja na zaslonu.
Težave s tradicionalno metodo
Ničesar ni Majorly narobe z omenjeno tehniko, vendar je lahko v nekaterih primerih neučinkovita. Mislim na primere, v katerih preurejene pozicije potrditvenega polja in nalepke ne delujejo več.
Misli na odziv, na primer. Morda boste morali spremeniti velikost ali premakniti potrditveno polje glede na napravo, na kateri je prikazana. Ko se to zgodi, boste premakniti etiketo, zato, ker na nalepki ne bo samodejne ponovne poravnave kot odgovor na ponovno postavitev / spreminjanje potrditvenega polja.
To pomanjkljivost lahko odpravimo, če bi le lahko zagotovite trdno postavitev za potrditveno polje in oznako, namesto da jih grobo postavite na stran.
Toda skoraj vsi sistemi postavitve, kot so tabele ali stolpci, zahtevajo, da to storite dodajte oznako pred potrditvenim poljem v izvorni kodi da se na zaslonu prikaže na enak način. To ne želimo storiti, ker naslednji izbirnik elementov na etiketi ne bo več deloval.
Na drugi strani pa je CSS Grid sistem postavitve, ki je ne odvisno od umestitve / vrstnega reda elementov v izvorni kodi.
Možnosti spreminjanja vrstnega reda mreže namerno vplivajo samo vizualno upodabljanje, zapuščanje vrstnega reda govora in navigacijo na podlagi izvornega vrstnega reda. To omogoča avtorjem, da manipulirajo z vizualno predstavitvijo, medtem ko zapustijo izvorno zaporedje nedotaknjeno ... - CSS Grid Layout Module Level 1, W3C
Tako je CSS mreža idealna rešitev za vnesite oznako, ki se pojavi prej potrditveno polje.
Styling potrditvenega polja s sistemom CSS Grid
Začnimo s kodo HTML. Vrstica potrditvenega polja in oznake ostane enaka kot prej. Samo dodamo oba v mrežo.
Spremljevalni CSS je naslednji:
#cbgrid display: grid; grid-template-areas: "levo desno"; širina: 150px; input [type = checkbox] grid-area: desno; oznaka grid-area: left;
Ne bom se poglobil v to, kako deluje mreža CSS, kot sem že napisal podroben članek o tej temi, ki jih lahko preberete tukaj. Nekaj osnov, vendar: prikaz: mreža lastnost spremeni element v mrežni vsebnik, omrežje opredeljuje mrežno območje, kateremu pripada element, in omrežja-predloge oblikuje mrežo, ki jo sestavljajo različna področja omrežja.
V zgornji kodi so dvema mrežama: »levo« in "prav". Nadoknadijo dva stolpca mrežne vrstice. Potrditveno polje pripada "prav" in oznako na »levo«. Tukaj je kako izgledajo na zaslonu:
Ker nismo spremenili relativne umestitve potrditvenega polja in oznake v izvorni kodi, lahko še vedno uporabljate sosednji kombinator:
input: označeno + oznaka / * style me * /
Upoštevajte, da je element omrežja vedno blokirana; pojavi se z obkroženo polje, znano kot polje na ravni mreže. Če tega ne želite, na primer za oznako, na to postavko položite ovoj (zavijte v drug element) in obrnite ta ovoj v mrežnem območju.
To je to, ljudje. Upamo, da vam bo CSS mreža pomagala pri urejanju postavitev teh prednaravnih potrditvenih polj.
