Advanced Checkbox Styling CSS Gridillä
CSS Grid Layout Module ei voi ratkaista pelkästään mammuttia ulkoasuongelmasta, vaan myös hyviä vanhoja mulish-asioita, joita olemme olleet käsitellään jo pitkään, kuten valintaruudun etiketti.
Vaikka on olemassa melko suoraviivaista menetelmää, jolla tarroja tyylitellään, kun se näkyy jälkeen valintaruutu, se ei ole niin helppoa, kun tarra näkyy ennen se.
Valintaruudun muotoilu ilman CSS-ruudukkoa
Tarran muotoilu jälkeen valintaruutu on jotain, jonka kehittäjät ovat tehneet siitä lähtien, kun luimme siitä jostain. Tämä tekniikka on yksi tärkeimmistä ja vanhoista esimerkkeistä voimakkaasta dynamiikasta, jota CSS voi hallita.
Tässä on koodi, jonka olet jo tuntenut tyylit leima jälkeen valintaruutu:
input: check + label / * style me * /
tyylistä etikettiä jälkeen valintaruutu saattaa näyttää siltä (voit käyttää myös muita tyylisääntöjä):
Edellä mainittu CSS-koodi käyttää vierekkäisen sisaruksen yhdistin merkitty + näppäintä. Kun valintaruutu on : tarkistettu osavaltio, elementti jälkeen se (yleensä tarra) voidaan muotoilla tällä menetelmällä.
Tällainen yksinkertainen ja tehokas tekniikka! Mitä voisi mahdollisesti mene vikaan? Mitään - kunnes haluat näyttää tarran ennen valintaruutu.
Viereinen sisar-yhdistin valitsee seuraavan elementin; tämä tarkoittaa, että etiketti on tullut jälkeen HTML-lähdekoodin valintaruutu.
Niin, että etiketti tulee näkyviin ennen -valintaruutu näytössä, emme voi siirtää sitä ennen lähdekoodin valintaruutua, kuten a edellinen sisarevalitsin ei ole CSS: ssä.
Mikä jättää vain yhden vaihtoehdon: valintaruudun ja etiketin sijoittaminen uudelleen käyttämällä muuttaa tai asento tai marginaali tai jokin muu CSS-ominaisuus, jolla on jonkinlainen telekinetinen voima, niin että tarra näkyy ruudun vasemmalla puolella.
Perinteisen menetelmän ongelmat
Siellä ei ole mitään aikuinen väärin edellä mainitulla tekniikalla, mutta se voi olla tehottomia joissakin tapauksissa. Tarkoitan tapauksia, joissa valintaruudun ja etiketin uudelleenjärjestetyt sijainnit eivät enää toimi.
Ajattele reagoivaa, esimerkiksi. Sinun on ehkä muutettava tai vaihdettava valintaruutu sen mukaan, mitä laitetta se näyttää. Kun näin tapahtuu, aiotte tarve sijoittaa etiketti uudelleen, koska etikettiin ei ole tehty automaattista uudelleenohjausta vastauksena valintaruudun sijoitteluun / koon muuttamiseen.
Voimme poistaa tämän haitan, jos voisimme vain anna jonkin verran kiinteää asettelua valintaruutuun ja etikettiin, sen sijaan, että ne asetettaisiin karkeasti sivulle.
Mutta lähes kaikki asettelujärjestelmät, kuten taulukot tai sarakkeet, vaativat sinua lisää etiketti ennen lähdekoodin valintaruutua jotta se näkyy samalla tavalla näytöllä. Emme halua tehdä sitä, koska etiketin seuraava elementinvalitsin lakkaa toimimasta.
CSS Grid puolestaan on asettelujärjestelmä ei riippuu lähdekoodin elementtien sijoittelusta / järjestyksestä.
Ruudukon järjestelyn uudelleenjärjestelymahdollisuudet vaikuttavat tahallisesti vain visuaalinen, puhejärjestyksen ja navigoinnin jättäminen lähteen järjestyksen perusteella. Tämä antaa tekijöille mahdollisuuden käsitellä visuaalista esitystä ja jättää lähdekoodin koskemattomaksi… - CSS Grid Layout Module Level 1, W3C
Näin ollen CSS-verkko on ihanteellinen ratkaisu muotoile näkyviin tulevaa tarraa ennen valintaruutu.
Valintaruudun muotoilu CSS Gridillä
Aloitetaan HTML-koodista. Valintaruudun ja tarran järjestys säilyy ennallaan. Lisäämme ne molemmat verkkoon.
Mukana oleva CSS on seuraava:
#cbgrid näyttö: ruudukko; grid-template-alueet: "vasen oikea"; leveys: 150px; input [type = valintaruutu] grid-area: right; etiketti grid-area: left;
En mene syvälle, miten CSS-verkko toimii, kuten jo kirjoitin yksityiskohtainen artikkeli aiheesta, voit lukea tästä. Jotkut perusasiat kuitenkin: näyttö: ruudukko ominaisuus muuttaa elementin ruudukon säiliöön, grid-alue tunnistaa ruudukon alueen, johon elementti kuuluu, ja grid-template-alueilla muodostaa ristikkorakenteen, joka koostuu eri verkkoalueista.
Yllä olevassa koodissa on kaksi verkkoaluetta: "Left" ja "Oikea". Ne muodostavat kaksi rivirivin saraketta. Valintaruutu kuuluu "Oikea" alue ja etiketti "Left". tässä miten he näyttävät ruudulta:
Koska emme voi muuttaa valintaruudun ja etiketin suhteellista sijaintia lähdekoodissa, voimme silti käyttää vierekkäistä sisar-yhdistelmää:
input: check + label / * style me * /
Huomaa, että ruudukko on aina estetty; se näkyy ympäröivän laatikon nimellä ruudukon laatikko. Jos et halua sitä, esimerkiksi etiketissä, aseta kääre tähän kohtaan (kääri se toiseen elementtiin) ja käännä kääre ruudukon alueelle.
Se on se, ihmiset. CSS-ruudukko toivottavasti auttaa sinua naarmuttamaan näiden röyhkeä valintaruudut.
