Hemsida » Kodning » Avancerad kryssrutan Styling med CSS Grid

    Avancerad kryssrutan Styling med CSS Grid

    De CSS Grid Layout Module kan inte bara lösa en mammut av ett layout problem men också några bra gamla mulish problem vi har varit hantera länge, som styling en kryssruta etikett.

    Medan det finns en relativt enkel metod att ställa in etiketten när den visas efter kryssrutan, det är inte så lätt när etiketten visas innan Det.

    Checkbox styling utan CSS Grid

    Styling en etikett efter en kryssruta är något vi utvecklare har gjort någonsin sedan vi läser om det någonstans. Denna teknik är ett av de främsta och gamla exemplen på den kraftfulla dynamiken som CSS kan ha.

    Här är koden du redan känner till, det utformar en etikett efter en kryssrutan markerad:

       
     inmatning: kontrollerad + etikett / * stil mig * / 

    en formad etikett efter en kryssruta kan se ut så här (men du kan också använda andra stilregler):

    Ovanstående CSS-kod använder intilliggande syskonkombination markerad av + nyckel. När en kryssruta är i :kontrollerade stat, ett element efter Det (vanligtvis en etikett) kan stylas med den här metoden.

    En sådan enkel och effektiv teknik! Vad skulle eventuellt gå fel med det? Ingenting - tills du vill visa etiketten innan kryssrutan.

    Den intilliggande syskonkombinationen väljer nästa element; det betyder att etiketten måste komma efter kryssrutan i HTML-källkoden.

    Så, för att få en etikett att visas innan den tillhörande kryssrutan på skärmen, kan vi inte bara flytta den före kryssrutan i källkoden, som en föregående syskonväljare finns inte i CSS.

    Vilket lämnar bara ett alternativ: omplacera kryssrutan och etiketten använder sig av omvandla eller placera eller marginal eller annan CSS-egenskap med någon typ av telekinetisk kraft, så att etiketten visas till vänster om kryssrutan på skärmen.

    Problem med den traditionella metoden

    Det finns ingenting majorly fel med ovannämnda teknik men det kan vara ineffektiv i vissa fall. Jag menar fall där de omplacerade positionerna i kryssrutan och etiketten inte fungerar längre.

    Tänk dig lyhörd, till exempel. Du kanske måste ändra storlek eller omplacera kryssrutan beroende på vilken enhet den visas på. När det händer, kommer du måste också omplacera etiketten, eftersom det inte kommer någon automatisk justering gjord på etiketten som svar på ompositionering / resizing av kryssrutan.

    Vi kan eliminera denna nackdel om vi bara kunde Ge en viss solid layout för kryssrutan och etiketten, istället för att placera dem grovt på sidan.

    Men nästan alla layoutsystem, som tabeller eller kolumner, kräver att du lägg till etiketten före kryssrutan i källkoden för att få det att visas på samma sätt på skärmen. Det är något vi inte vill göra eftersom nästa elementväljare på etiketten kommer sluta fungera.

    CSS-nätet är å andra sidan ett layoutsystem som är inte beroende på placering / ordning av element i källkoden.

    Omstruktureringsförmågan hos rutnätet påverkar avsiktligt endast den visuella återgivningen, lämnar talordning och navigering baserat på källordern. Detta tillåter författare att manipulera den visuella presentationen samtidigt som källordern är intakt ... - CSS Grid Layout Module Level 1, W3C

    CSS-nätet är sålunda en idealisk lösning på stil etiketten som visas innan kryssrutan.

    Checkbox styling med CSS Grid

    Låt oss börja med HTML-koden. Orderrutan för kryssrutan och etiketten kommer att förbli densamma som tidigare. Vi lägger bara till dem båda i ett rutnät.

     

    Den medföljande CSS är som följer:

     #cbgrid display: rutnät; galler-mall-områden: "vänster höger"; bredd: 150px;  inmatning [typ = kryssrutan] rutnätområde: höger;  etikett rutnätområde: vänster;  

    Jag kommer inte att gå djupt på hur CSS-nätet fungerar, som jag redan skrev en detaljerad artikel om ämnet, att du kan läsa här. Några grunder, dock: display: rutnät egendom förvandlar ett element till en nätbehållare, grid-område identifierar det rutnätområde ett element tillhör, och grid-template-områden bildar en rutnätlayout som består av olika rutnät.

    I ovanstående kod finns det två rutnätområden: "vänster" och "höger". De sminkar upp två kolumner i en rasterrad. Kryssrutan hör till "höger" område och etiketten till "vänster". här är hur de ser på skärmen:

    Eftersom vi inte ändrade den relativa placeringen av kryssrutan och etiketten i källkoden, kan vi Använd fortfarande den närliggande syskonkombinationen:

     inmatning: kontrollerad + etikett / * stil mig * / 

    Observera att ett rutnät är alltid blockerade; det verkar med en omgivande låda känd som rutnivån. Om du inte vill ha det, till exempel för en etikett, lägg en omslag på det objektet (linda den i ett annat element) och vänd det omslaget i gallerområdet.

    Det är det, folk. CSS-nätet hjälper dig förhoppningsvis att spika ner layouterna hos de fräcka kryssrutorna.