Pokročilé zaškrtávací políčko Styling s CSS Grid
CSS Grid Layout Module Dokáže vyřešit nejen mamut z rozložení problému, ale také některé staré dobré věci, které jsme měli dlouhodobě, jako stylingový štítek.
I když existuje poměrně přímá metoda, jak styl popisovat, když se objeví po zaškrtávací políčko, není to tak snadné, když se objeví štítek před to.
Zaškrtávací políčko bez CSS Grid
Styling label po zaškrtávací políčko je něco, co vývojáři dělají od té doby, co jsme o tom někde četli. Tato technika je jedním z prvořadých a starých příkladů silné dynamiky, kterou CSS může mít.
Tady je kód, o kterém už víte, že styly po zaškrtnuté políčko:
input: checked + label / * style me * /
A stylizovaný štítek po zaškrtávací políčko může vypadat takto (můžete však použít i jiná pravidla stylu):
Výše uvedený kód CSS používá sousední sourozenecký kombinátor označené znakem + klíč. Pokud je zaškrtávací políčko v :kontrolovány Stát, prvek po to (obvykle štítek) lze stylizovat pomocí této metody.
Taková jednoduchá a účinná technika! Co by mohlo možná špatně s tím? Nic - dokud nechcete zobrazit štítek před zaškrtávací políčko.
Sousední kombinátor sourozenců vybere další prvek; to znamená, že štítek musí přijít po zaškrtněte políčko ve zdrojovém kódu HTML.
Takže, aby se objevil štítek před zaškrtávací políčko na obrazovce, nemůžeme jej přesunout před zaškrtávací políčko ve zdrojovém kódu, jako předchozí volič sourozenců neexistuje v CSS.
Která ponechává pouze jednu možnost: přemístění políčka a štítku použitím přeměnit nebo pozice nebo okraj nebo jinou vlastnost CSS s nějakým druhem telekinetické síly, takže štítek se zobrazí vlevo od zaškrtávacího políčka na obrazovce.
Problémy s tradiční metodou
Nic tam není převážně špatně s výše uvedenou technikou, ale může to být v některých případech neefektivní. Mám na mysli případy, kdy přeskupené pozice zaškrtávacího políčka a štítku již nefungují.
Myslíš, že je vnímavý, například. Je možné, že bude nutné změnit velikost nebo změnit umístění políčka podle zařízení, na kterém je zobrazena. Když se to stane, budete je třeba změnit umístění etikety, vzhledem k tomu, že v návaznosti na přemístění / změnu velikosti zaškrtávacího políčka nebude na štítku provedeno automatické přeřazení.
Tuto nevýhodu můžeme eliminovat, kdybychom mohli poskytnout nějaké pevné rozvržení pro zaškrtávací políčko a štítek, místo toho, aby byly na stránce zhruba umístěny.
Ale téměř všechny systémy rozvržení, jako jsou tabulky nebo sloupce, vás vyžadují přidat označení před zaškrtávací políčko ve zdrojovém kódu aby se na obrazovce zobrazoval stejně. To je něco, co nechceme dělat, protože další volič prvků na štítku přestane fungovat.
CSS Grid je na druhé straně systém rozložení, který je ne závisí na umístění / pořadí prvků ve zdrojovém kódu.
Možnosti přesměrování rozložení sítě záměrně ovlivňují pouze vizuální vykreslování, opuštění pořadí řeči a navigace na základě zdrojového pořadí. To umožňuje autorům manipulovat s vizuální prezentací při zachování výchozího pořadí zdroje… - CSS Grid Layout Module Level 1, W3C
CSS mřížka je tedy ideálním řešením styl, který se objeví před zaškrtávací políčko.
Zaškrtávací políčko s CSS Grid
Začněme s HTML kódem. Pořadí zaškrtávacího políčka a štítku zůstane stejné jako dříve. Oba přidáme do mřížky.
Doprovodný CSS je následující:
#cbgrid display: grid; oblasti mřížkové šablony: "vlevo vpravo"; šířka: 150px; input [type = zaškrtávací políčko] grid-area: right; label grid-area: vlevo;
Nebudu se hlouběji zabývat tím, jak funguje síť CSS, jak jsem již napsal podrobný článek na toto téma, můžete číst zde. Některé základy, nicméně: zobrazení: mřížka vlastnost změní prvek na kontejner mřížky, oblasti mřížky identifikuje oblast mřížky, ke které prvek patří, a oblasti šablony mřížek tvoří rozložení mřížky, sestávající z různých oblastí mřížky.
Ve výše uvedeném kódu jsou dvě oblasti mřížky: "vlevo, odjet" a "že jo". Tvoří to dva sloupce mřížky. Zaškrtávací políčko patří k "že jo" oblast a štítek "vlevo, odjet". Tady je jak vypadají na obrazovce:
Protože jsme nezměnili relativní umístění zaškrtávacího políčka a označení ve zdrojovém kódu, můžeme stále používat sousední sourozenecký kombinátor:
input: checked + label / * style me * /
Všimněte si, že položka mřížky je vždy blokován; to se objeví s obklopujícím rámečkem známým jako pole na úrovni sítě. Pokud to nechcete, například pro štítek, dát na tuto položku obal (zabalte do jiného prvku) a otočte tento obal do oblasti mřížky.
To je ono, lidi. CSS mřížka snad vám pomůže přiblížit rozvržení těchto drzých políček.
