Advanced Checkbox Styling koos CSS Grid'iga
The CSS Grid Layout Module ei saa lahendada ainult mammuti paigutusprobleemist, vaid ka mõningaid häid vanu mulish-küsimusi tegelevad pikka aega, nagu näiteks märkige märkeruutu.
Kuigi on olemas suhteliselt lihtne meetod etiketi kujundamiseks, kui see ilmub pärast seda märkeruut, see pole nii lihtne, kui silt ilmub enne seda.
Märkeruudu kujundus ilma CSS-võrguta
Etiketi kujundamine pärast seda ruut on midagi, mida meie arendajad on teinud sellest ajast, kui me sellest kusagilt lugesime. See meetod on üks peamisi ja vanu näiteid CSS-i võimsa dünaamika kohta.
Siin on kood, mida sa juba tunned stiilid pärast seda kontrollitud märkeruut:
sisend: märgitud + silt / * stiil mulle * /
A stiilis silt pärast seda märkeruut võib tunduda selline (aga võite kasutada ka teisi stiilireegleid):
Ülaltoodud CSS-kood kasutab külgnev õde-kombineerija tähisega + võti. Kui märkeruut on : kontrollitud olekus, element pärast seda seda (tavaliselt silt) saab selle meetodi abil kujundada.
Selline lihtne ja tõhus tehnika! Mis võiks võimalik minna valesti? Mitte midagi, kuni soovite märgist kuvada enne märkeruut.
Kõrvuti asuv vend valib järgmise elemendi; see tähendab, et etikett peab tulema pärast seda HTML-lähtekoodi märkeruut.
Nii et etikett ilmuks enne ruudul asuvasse ruutu, ei saa me seda lihtsalt enne lähtekoodi ruutu liigutada kui a CSS-is ei ole eelmist vennalülitit.
Mis jätab ainult ühe variandi: märkeruudu ja sildi ümberpaigutamine kasutades teisendada või positsiooni või marginaal või mõni muu CSS-vara, millel on mingisugune telekinetiline jõud, nii et silt ilmub ekraanil olevast ruudust vasakule.
Probleemid traditsioonilise meetodiga
Seal pole midagi põhiliselt ebaõigesti ülalnimetatud tehnikaga, kuid see võib olla teatud juhtudel ebatõhus. Ma mõtlen juhtumeid, kus ruudu ja märgistuse ümberpaigutatud positsioonid enam ei tööta.
Mõtle tundlikule, näiteks. Võimalik, et peate märkeruudu suuruse muutma või ümber paigutama vastavalt seadmele, mida see kuvatakse. Kui see juhtub, siis saad ka vajadus märgise ümberpaigutamiseks, kuna märkeruudu ümberpaigutamise / suuruse muutmise järel ei toimu sildile automaatset ümberkorraldamist.
Me võime selle puuduse kõrvaldada, kui me võiksime seda lihtsalt teha märkige ruudule ja sildile kindel paigutus, selle asemel, et need lehele ligikaudselt paigutada.
Kuid peaaegu kõik paigutussüsteemid, näiteks tabelid või veerud, nõuavad teid lisage silt enne lähtekoodi märkeruutu et see kuvatakse ekraanil samal viisil. Seda me ei taha teha, sest järgmine elemendi valija etiketil lakkab töötamast.
CSS Grid on seevastu paigutuse süsteem mitte sõltub lähtekoodi elementide paigutusest / järjestusest.
Võrgu paigutuse ümberkorraldamise võimalused mõjutavad tahtlikult ainult visuaalne visualiseerimine, kõnekorralduse ja navigeerimise lahkumine lähtekorralduse alusel. See võimaldab autoritel visuaalset esitlust manipuleerida, jättes lähtekorralduse terveks ... - CSS Grid Layout Module Level 1, W3C
Seega on CSS-võrk ideaalne lahendus kujundage ilmuv silt enne märkeruut.
Märkeruudu vormimine CSS Grid'iga
Alustame HTML-koodiga. Märkeruudu ja sildi järjekord jääb samaks nagu varem. Lisame need mõlemad võrku.
Lisatud CSS on järgmine:
#cbgrid kuva: võrk; grid-malli-piirkonnad: "vasakule paremale"; laius: 150 px; sisend [tüüp = märkeruut] grid-area: right; etikett grid-area: left;
Ma ei lähe põhjalikult läbi, kuidas CSS-i võrk toimib, nagu ma juba kirjutasin üksikasjalik artikkel, lugege siit. Mõned põhitõed aga: kuva: võrk Omadus muudab elemendi võrgukonteineriks, võrgupiirkond identifitseerib ruudustiku, kuhu element kuulub, ja grid-mall-alad moodustab ruudustiku, mis koosneb erinevatest võrgupiirkondadest.
Ülaltoodud koodis on kaks võrgupiirkonda: "vasak" ja "õige". Nad moodustavad kaks rida rida. Märkeruut kuulub "õige" sildi ja sildi "vasak". Siin on kuidas nad ekraanil näevad:
Kuna me ei muutnud lähtekoodi märkeruutu ja sildi suhtelist paigutust, saame seda teha endiselt kasutada külgnevat õde-kombainerit:
sisend: märgitud + silt / * stiil mulle * /
Pange tähele, et ruudustik on alati blokeeritud; see ilmub ümbritseva kastiga võrgutaseme kast. Kui sa ei taha seda, näiteks etiketti, pane see üksus ümbrisesse (murdke see teise elemendiga) ja keerake see ümbris võrgupiirkonda.
See on see, inimesed. Loodetavasti aitab CSS-i võrk nende lõbusate märkeruutude paigutusega lüüa.
