Avansată cu stilul de control al casetei de verificare cu grila CSS
Modul de configurare a rețelei CSS nu poate rezolva doar un mamut de o problemă de aspect, dar și unele probleme vechi vechi mulish am fost care se ocupă de mult timp, precum modelarea unei etichete din caseta de selectare.
Deși există o metodă relativ simplă de a modela eticheta când apare după caseta de selectare, nu este atât de ușor atunci când apare eticheta inainte de aceasta.
Stratul pentru caseta de verificare fără grila CSS
Etichetarea unei etichete după o casetă de bifare este ceva de care dezvoltatorii au făcut de când am citit despre asta undeva. Această tehnică este unul dintre exemplele prime și vechi ale dinamicii puternice pe care o poate avea CSS.
Iată codul pe care deja ți-l cunoști, asta stiluri o etichetă după o casetă de selectare bifată:
intrare: verificat + etichetă / * stil me * /
A etichetă etichetă după o casetă de selectare ar putea să arate așa (cu toate acestea, puteți utiliza și alte reguli de stil):
Codul CSS de mai sus utilizează adiacent combinator frate marcate de + cheie. Atunci când o casetă de selectare este în : verificat stat, un element după aceasta (de obicei, o etichetă) pot fi folosite utilizând această metodă.
O astfel de tehnică simplă și eficientă! Ce ar putea eventual du-te în neregulă cu ea? Nimic - până când doriți să afișați eticheta inainte de caseta de selectare.
Combinatorul de frate adiacent selectează următorul element; aceasta înseamnă că eticheta trebuie să vină după caseta de selectare din codul sursă HTML.
Deci, să apară o etichetă inainte de caseta de selectare a aparatului de pe ecran, nu o putem muta doar în fața casetei de selectare din codul sursă, ca a selectorul anterior de frate nu există în CSS.
Ceea ce lasă doar o singură opțiune: repoziționați caseta de selectare și eticheta utilizând transforma sau poziţie sau margine sau o altă proprietate CSS cu un fel de putere telekinetică, astfel încât eticheta să apară în partea stângă a casetei de selectare de pe ecran.
Probleme cu metoda tradițională
Nu e nimic majorly greșit cu tehnica menționată mai sus, dar poate fi ineficientă în anumite cazuri. Vreau să spun cazuri în care pozițiile rearanjate ale casetei de control și ale etichetei nu mai funcționează.
Gândiți-vă receptiv, de exemplu. Este posibil să trebuiască să redimensionați sau să repoziționați caseta de selectare în funcție de dispozitivul pe care este afișat. Când se întâmplă acest lucru, veți face asta trebuie să repoziționați și eticheta, deoarece nu va fi efectuată o realignare automată a etichetei ca răspuns la repoziționarea / redimensionarea casetei de selectare.
Putem elimina acest dezavantaj dacă am putea oferiți un aspect solid pentru caseta de selectare și etichetă, în loc să le poziționați pe pagină.
Dar, aproape toate sistemele de aspect, cum ar fi tabelele sau coloanele, vă cer să faceți asta adăugați eticheta în fața casetei de selectare din codul sursă pentru a face să apară în același mod pe ecran. Nu este ceva ce nu vrem să facem deoarece selectorul de elemente de pe etichetă nu mai funcționează.
CSS Grid, pe de altă parte, este un sistem de aspect care este nu în funcție de plasarea / ordonarea elementelor din codul sursă.
Capacitățile de rearanjare a aspectului rețelei afectează în mod intenționat numai redarea vizuală, ieșirea din ordinea vocală și navigarea pe baza ordinului sursă. Acest lucru permite autorilor să manipuleze prezentarea vizuală în timp ce părăsesc ordinea sursă intactă ... - modul CSS Grid Layout Layer 1, W3C
Astfel, grila CSS este o soluție ideală pentru stilul etichetei care apare inainte de caseta de selectare.
Verificarea stilului cu box CSS
Să începem cu codul HTML. Ordinea casetei de selectare și a etichetei va rămâne aceeași ca înainte. Doar le adaugam pe o grilă.
CSS însoțitor este după cum urmează:
#cbgrid display: grilă; grilă-șablon-zone: "stânga dreapta"; lățime: 150px; intrare [tip = casetă de selectare] zona grilă: dreapta; etichetă zona grilă: stânga;
Nu voi merge în profunzime cu privire la modul în care funcționează rețeaua CSS, așa cum am scris deja articol detaliat pe această temă, pe care le puteți citi aici. Unele lucruri de bază, cu toate acestea: afișare: grilă proprietatea transformă un element într-un container de rețea, grid-area identifică zona de rețea din care face parte un element și grid-șablon-zone formează o structură a grilei, formată din diferite zone de rețea.
În codul de mai sus, există două zone de rețea: "stânga" și "dreapta". Se compun două coloane ale unui rând de grilă. Caseta de selectare aparține "dreapta" zona și eticheta la "stânga". Iată cum arată pe ecran:
Deoarece nu am schimbat amplasarea relativă a casetei de selectare și a etichetei în codul sursă, putem încă utilizați combinatorul de fiziologie adiacent:
intrare: verificat + etichetă / * stil me * /
Rețineți că un element din rețea este întotdeauna blocat; apare cu o cutie înconjurătoare cunoscută sub numele de grid-level box. Dacă nu doriți acest lucru, de exemplu pentru o etichetă, puneți un înveliș pe elementul respectiv (înfășurați-l într-un alt element) și întoarceți ambalajul în zona grilajului.
Asta este, oameni buni. CSS grid hopefully vă ajută să cui în jos layouts de aceste cheeky checkboxes.
