Advanced Checkbox Styling med CSS Grid
Det CSS Grid Layout Module kan ikke kun løse en mammut af et layout problem, men også nogle gode gamle mulish problemer vi har været beskæftiger sig med i lang tid, såsom styling en afkrydsningsfelt etiket.
Mens der er en forholdsvis enkel metode til at style etiketten, når den vises efter afkrydsningsfeltet, det er ikke så nemt, når etiketten vises Før det.
Checkbox styling uden CSS Grid
Styling en etiket efter en afkrydsningsfelt er noget, vi udviklere har lavet lige siden vi læser om det et eller andet sted. Denne teknik er et af de primære og gamle eksempler på den kraftige dynamik, som CSS kan besidde.
Her er koden du allerede er bekendt med, det Stiler en etiket efter en markeret afkrydsningsfelt:
input: checked + label / * style me * /
EN formet etiket efter en afkrydsningsfelt kan se sådan ud (men du kan også bruge andre stilregler):
Ovenstående CSS-kode anvender tilstødende søskendekombination markeret af + nøgle. Når en afkrydsningsfelt er i : kontrolleret stat, et element efter det (normalt en etiket) kan styles ved hjælp af denne metode.
Sådan en simpel og effektiv teknik! Hvad kunne eventuelt gå galt med det? Intet - indtil du vil vise etiketten Før afkrydsningsfeltet.
Den tilstødende søskendekombination vælger det næste element; det betyder, at etiketten skal komme efter afkrydsningsfeltet i HTML kildekoden.
Så for at få en etiket frem Før den tilhørende afkrydsningsfelt på skærmen, kan vi ikke bare flytte den før afkrydsningsfeltet i kildekoden, som en tidligere søskendevælger findes ikke i CSS.
Hvilket efterlader kun en mulighed: genplacering af afkrydsningsfeltet og etiketten ved brug af omdanne eller position eller margen eller en anden CSS-ejendom med en slags telekinetisk strøm, så etiketten vises til venstre for afkrydsningsfeltet på skærmen.
Problemer med den traditionelle metode
Der er ingenting majorly forkert med ovennævnte teknik, men det kan være ineffektiv i visse tilfælde. Jeg mener tilfælde, hvor de omlejrede positioner i afkrydsningsfeltet og etiketten ikke virker længere.
Tænk lydhør, for eksempel. Du skal muligvis ændre størrelse eller genplacere afkrydsningsfeltet i henhold til den enhed, den vises på. Når det sker, vil du skal også omplacere etiketten, da der ikke sker nogen automatisk justering til etiketten som reaktion på genplacering / resizing af afkrydsningsfeltet.
Vi kan fjerne denne ulempe, hvis vi bare kunne Giv et vist solid layout til afkrydsningsfeltet og etiketten, i stedet for at placere dem groft på siden.
Men næsten alle layoutsystemer, som f.eks. Tabeller eller kolonner, kræver dig Tilføj etiketten før afkrydsningsfeltet i kildekoden for at få det til at vises på samme måde på skærmen. Det er noget, vi ikke ønsker at gøre, fordi den næste elementvelger på etiketten vil stoppe med at arbejde.
CSS-nettet er derimod et layoutsystem, der er ikke afhængig af placeringen / rækkefølgen af elementer i kildekoden.
Omstillingsfunktionerne i gitterlayout påvirker med vilje kun den visuelle gengivelse, forlader taleordre og navigation baseret på kildeordren. Dette giver authors mulighed for at manipulere den visuelle præsentation, mens de forlader kildeordren intakt ... - CSS Grid Layout Module Level 1, W3C
CSS-net er således en ideel løsning på stil etiketten, der vises Før afkrydsningsfeltet.
Checkbox styling med CSS Gitter
Lad os starte med HTML-koden. Ordren i afkrydsningsfeltet og etiketten forbliver den samme som før. Vi tilføjer blot dem begge til et gitter.
Den medfølgende CSS er som følger:
#cbgrid display: gitter; Gitter-skabelon-områder: "venstre højre"; bredde: 150px; input [type = afkrydsningsfelt] gitterområde: højre; label grid-area: left;
Jeg vil ikke gå i dybde om, hvordan CSS-nettet fungerer, som jeg allerede skrev en detaljeret artikel om emnet, at du kan læse her. Nogle grundlæggende ting, dog: display: gitter ejendom gør et element til en gitterbeholder, grid-område identificerer det netområde, et element tilhører, og grid-skabelon-områder danner et gitterlayout, der består af forskellige gitterområder.
I ovenstående kode er der to gitterområder: "venstre" og "ret". De udgør to søjlerørets kolonner. Afkrydsningsfeltet tilhører "ret" område og etiketten til "venstre". Her er hvordan de ser på skærmen:
Da vi ikke ændrede den relative placering af afkrydsningsfeltet og etiketten i kildekoden, kan vi Brug stadig den tilstødende søskendekombination:
input: checked + label / * style me * /
Bemærk, at et gitterelement er altid blokeret; det vises med en omgivende kasse kendt som ruteplan. Hvis du ikke vil have det, for eksempel til en etiket, læg en omslag på den pågældende vare (indpak det i et andet element) og drej det omslag ind i gitterområdet.
Det er det, folkens. CSS grid forhåbentlig hjælper dig med at søm ned layouterne af disse frække afkrydsningsfelter.
