Avansert boks Styling med CSS Grid
De CSS Grid Layout Module kan ikke bare løse en mammut av et layout problem, men også noen gode gamle mulish problemer vi har vært håndterer i lang tid, som for eksempel styler en avkrysningsboksetikett.
Mens det er en relativt enkel metode for å stile etiketten når den vises etter avkrysningsruten, det er ikke så lett når etiketten vises før den.
Kryssboks styling uten CSS Grid
Styling en etikett etter en avkrysningsboks er noe vi utviklere har gjort helt siden vi leser om det et sted. Denne teknikken er et av de fremste og gamle eksemplene på den kraftige dynamikken CSS kan eie.
Her er koden du allerede er kjent med, det stiler en etikett etter en merket avkrysningsboks:
Inngang: Kontrollert + Etikett / * Stil meg * /
EN formet etikett etter en avkrysningsboks kan se slik ut (men du kan også bruke andre stilregler):
Ovenstående CSS-kode bruker tilstøtende søskenkombinator merket av + nøkkel. Når en avkrysningsboks er i :sjekket stat, et element etter den (vanligvis en etikett) kan styles ved hjelp av denne metoden.
En slik enkel og effektiv teknikk! Hva kunne muligens gå galt med det? Ingenting - til du vil vise etiketten før i avkrysningsruten.
Den tilstøtende søskenkombinatoren velger neste element; Dette betyr at etiketten må komme etter merk av i HTML kildekoden.
Så, for å lage en etikett vises før den tilhørende boksen på skjermen, kan vi ikke bare flytte den før avkrysningsboksen i kildekoden, som en forrige søskenvelger finnes ikke i CSS.
Som etterlater bare ett alternativ: reposisjonere avmerkingsboksen og etiketten ved hjelp av forvandle eller stilling eller margin eller en annen CSS-egenskap med en slags telekinetisk kraft, slik at etiketten vises til venstre for avkrysningsruten på skjermen.
Problemer med den tradisjonelle metoden
Det er ingenting majorly feil med den nevnte teknikken, men det kan være ineffektiv i visse tilfeller. Jeg mener tilfeller der de omarrangerte stillingene i avmerkingsboksen og etiketten ikke virker lenger.
Tenk lydhør, for eksempel. Du må kanskje endre størrelsen eller plassere avmerkingsboksen i henhold til enheten den vises på. Når det skjer, vil du må også plassere etiketten, da det ikke blir noen automatisk justering gjort på etiketten som svar på reposisjonering / resizing av avmerkingsboksen.
Vi kan eliminere denne ulempen hvis vi bare kunne gi noe solid oppsett for avmerkingsboksen og etiketten, i stedet for å plassere dem grovt på siden.
Men, nesten alle layoutsystemer, for eksempel tabeller eller kolonner, krever at du legg til etiketten før avkrysningsruten i kildekoden for å få det til å vises på samme måte på skjermen. Det er noe vi ikke vil gjøre fordi den neste elementvelgeren på etiketten vil slutte å fungere.
CSS Grid, derimot, er et layoutsystem som er ikke avhengig av plasseringen / rekkefølgen av elementene i kildekoden.
Omstillingsegenskapene til nettoppsettet påvirker med vilje bare den visuelle gjengivelsen, forlater taleordre og navigering basert på kildeordren. Dette gjør at forfattere kan manipulere den visuelle presentasjonen mens du forlater kildeordren intakt ... - CSS Grid Layout Module Level 1, W3C
Dermed er CSS-nettverket en ideell løsning på stil etiketten som vises før i avkrysningsruten.
Kryssboks styling med CSS Grid
La oss starte med HTML-koden. Ordren i avmerkingsboksen og etiketten vil forbli den samme som før. Vi legger bare til begge av dem til et rutenett.
Den medfølgende CSS er som følger:
#cbgrid display: grid; grid-template-områder: "left right"; bredde: 150px; skriv inn [type = boks] grid-område: høyre; label grid-area: left;
Jeg vil ikke gå i dybden om hvordan CSS-nettverket fungerer, som jeg allerede skrev en detaljert artikkel om emnet, at du kan lese her. Noen grunnleggende, men: skjerm: rutenettet Egenskapen gjør et element til en gitterbeholder, gitter-området identifiserer gridområdet et element tilhører, og grid-template-områder danner et gridoppsett som består av forskjellige gridområder.
I ovennevnte kode er det to gridområder: "venstre" og "Ikke sant". De gjør opp to kolonner av en rutenett. Avkrysningsruten tilhører "Ikke sant" område og etiketten til "venstre". her er hvordan de ser på skjermen:
Siden vi ikke endret den relative plasseringen av avmerkingsboksen og etiketten i kildekoden, kan vi Bruk fortsatt tilstøtende søskenkombinatoren:
Inngang: Kontrollert + Etikett / * Stil meg * /
Legg merke til at et rutenettelement er alltid blokkert; det vises med en omliggende boks kjent som grid-nivå boks. Hvis du ikke vil ha det, for eksempel for en etikett, sett et innpakning på det aktuelle elementet (pakk den inn i et annet element) og Vri den pakningen inn i rutenettet.
Det er det, folkens. CSS-nettverket forhåpentligvis hjelper deg å spikre ned layoutene til de fritte boksene.
