Pokročilé štýlovanie štítkov pomocou mriežky CSS
Modul rozloženia siete CSS môže nielen vyriešiť mamuta z rozloženia problém, ale aj niektoré dobré staré mulish problémy sme boli dlho sa zaoberajú, ako napr styling štítok začiarkavacieho políčka.
Zatiaľ čo existuje pomerne jednoduchá metóda štýlu štítku, keď sa objaví po zaškrtávacie políčko, nie je to tak jednoduché, keď sa objaví štítok pred to.
Štýl zaškrtávacieho políčka bez mriežky CSS
Stylovanie štítku po zaškrtávacie políčko je niečo, čo nás vývojári robili od chvíle, keď o ňom niekto čítal. Táto technika je jedným z hlavných a starých príkladov silnej dynamiky, ktorú môže CSS vlastniť.
Tu je kód, s ktorým by ste už mohli byť oboznámení štýlov štítok po začiarknuté políčko:
vstup: začiarknuté + štítok / * štýl me * /
štýlový štítok po začiarkavacie políčko môže vyzerať takto (môžete však použiť aj iné pravidlá štýlu):
Vyššie uvedený kód CSS používa priľahlý kombinátor súrodencov označené značkou + Kľúč. Ak je začiarknuté políčko : zaškrtnuté stáť, prvkom po to (zvyčajne štítok) s touto metódou.
Taká jednoduchá a účinná technika! Čo mohlo možná s tým? Nič - až kým nechcete zobraziť štítok pred začiarkavacie políčko.
Priľahlý kombinátor súrodencov vyberie ďalší prvok; znamená to, že štítok musí prísť po zaškrtávacie políčko v zdrojovom kóde HTML.
Takže, aby sa objavil štítok pred príslušné začiarkavacie políčko na obrazovke nemôžeme presunúť pred zaškrtávacím políčkom vo zdrojovom kóde ako predchádzajúci výber súrodenca neexistuje v systéme CSS.
Čo ponecháva iba jednu možnosť: premiestnenie políčka a štítka použitím premeniť alebo pozície alebo okraj alebo iného vlastníctva CSS s nejakým telekinetickým napätím, aby sa štítok objavil vľavo od začiarkavacieho políčka na obrazovke.
Problémy s tradičnou metódou
Nic tam nie je majorly zle s vyššie uvedenou technikou, ale to môže byť neefektívne v niektorých prípadoch. Mám na mysli prípady, v ktorých už prestavené pozície odškrtávacieho políčka a štítku už nefungujú.
Myslite na to, napríklad. Možno budete musieť zmeniť veľkosť alebo premiestniť začiarkavacie políčko podľa zariadenia, na ktorom je zobrazené. Keď k tomu dôjde, budete je potrebné zmeniť aj označenie, pretože v dôsledku premiestnenia / zmenšenia veľkosti zaškrtávacieho políčka nebude vykonané žiadne automatické vyrovnanie.
Túto nevýhodu môžeme odstrániť, ak by sme mohli len tak poskytnite nejaké pevné usporiadanie pre začiarkavacie políčko a štítok, namiesto zhruba ich umiestnenia na stránke.
Ale takmer všetky systémy usporiadania, ako sú tabuľky alebo stĺpce, vyžadujú od vás pridajte štítok pred zaškrtávacím políčkom vo zdrojovom kóde aby sa to zobrazilo na obrazovke rovnakým spôsobom. To je niečo, čo nechceme robiť, pretože ďalší selektor prvkov na štítku prestane pracovať.
CSS Grid, na druhej strane, je rozloženie systému, ktorý je nie v závislosti od umiestnenia / poradia prvkov v zdrojovom kóde.
Možnosti preradenia rozloženia siete zámerne ovplyvňujú iba vizuálne vykresľovanie, opustenie poradia reči a navigácia na základe poradia zdrojov. Umožňuje autorom manipulovať s vizuálnou prezentáciou, zatiaľ čo zdrojový poriadok zostane neporušený ... - Modul CSS Grid Layout Layer 1, W3C
Preto je CSS grid ideálnym riešením štýlu štítku, ktorý sa zobrazí pred začiarkavacie políčko.
Štýl schránky s CSS Gridom
Začnime s kódom HTML. Poradie začiarkavacieho políčka a štítka zostane rovnaké ako predtým. Stačí ich pridať do mriežky.
Sprievodný CSS je nasledovný:
#cbgrid zobrazenie: mriežka; grid-template-areas: "left right"; šírka: 150 pixlov; vstup [typ = začiarkavacie políčko] oblasť mriežky: vpravo; štítok oblasť mriežky: vľavo;
Nebudem hlboko skúmať, ako funguje sieť CSS, ako som už napísal a podrobný článok k tejto téme, že tu môžete čítať. Niektoré základy však: zobrazenie: mriežka Vlastnosť zmení prvok na mriežkovú kontajner, grid-area identifikuje oblasť mriežky, do ktorej patrí určitý prvok, a grid-template-oblasti tvorí rozloženie mriežky, ktoré pozostáva z rôznych oblastí mriežky.
Vo vyššie uvedenom kóde sú dve oblasti mriežky: "Left" a "správny". Vytvárajú dva stĺpce riadku mriežky. Začiarkavacie políčko patrí k "správny" oblasť a štítok na "Left". tady ako vyzerajú na obrazovke:
Keďže sme nezmenili relatívne umiestnenie zaškrtávacieho políčka a štítku v zdrojovom kóde, môžeme ešte používať priľahlý kombinovaný súrodenec:
vstup: začiarknuté + štítok / * štýl me * /
Upozorňujeme, že položka mriežky je vždy blokované; objaví sa s obklopujúcou skriňou známa ako rámček na úrovni siete. Ak to nechcete, napríklad pre označenie, položte obal na túto položku (zabaliť do iného prvku) a otočte obal do oblasti mriežky.
To je, ľudia. CSS mriežka dúfajme, že vám pomôže nasadiť rozloženie týchto drzé zaškrtávacie políčka.
