Geavanceerde checkbox-styling met CSS-raster
De CSS grid lay-outmodule kan niet alleen een mammoet van een lay-out probleem oplossen, maar ook enkele goede oude mulische problemen die we zijn geweest het omgaan met voor een lange tijd, zoals een selectievakje label.
Hoewel er een relatief eenvoudige methode is om het label te stijlen wanneer het verschijnt na het selectievakje is niet zo eenvoudig als het label wordt weergegeven voor het.
Selectievakje stylen zonder CSS-raster
Een label stylen na een selectievakje is iets dat wij als ontwikkelaars al hebben gedaan sinds we er ergens over hebben gelezen. Deze techniek is een van de belangrijkste en oude voorbeelden van de krachtige dynamiek die CSS kan bezitten.
Hier is de code die je misschien al kent, die stijlen een label na een aangevinkt selectievakje:
invoer: aangevinkt + label / * style me * /
EEN gestileerd label na een selectievakje ziet er misschien zo uit (u kunt echter ook andere stijlregels gebruiken):
De bovenstaande CSS-code gebruikt de aangrenzende broer of zus combinator gemarkeerd door de + sleutel. Wanneer een selectievakje in de : aangevinkt staat, een element na het (meestal een label) kan met deze methode worden gestileerd.
Zo'n simpele en effectieve techniek! Wat zou kunnen mogelijk er verkeerd mee doen? Niets, totdat u het label wilt weergeven voor het selectievakje.
De aangrenzende broer / zus-combinator selecteert het volgende element; dit betekent dat het label moet komen na het selectievakje in de HTML-broncode.
Dus om een label te laten verschijnen voor het bijbehorende selectievakje op het scherm, kunnen we het niet gewoon verplaatsen vóór het selectievakje in de broncode, als een vorige sibling-kiezer bestaat niet in CSS.
Welke slechts één optie laat: het verplaatsen van het selectievakje en het label gebruik makend van transformeren of positie of marge of een andere CSS-eigenschap met een soort telekinetische kracht, zodat het label links van het selectievakje op het scherm verschijnt.
Problemen met de traditionele methode
Er is niets majorly verkeerd met de bovengenoemde techniek, maar het kan zijn in bepaalde gevallen inefficiënt. Ik bedoel gevallen waarin de herschikte posities van het selectievakje en het label niet meer werken.
Denk ontvankelijk, bijvoorbeeld. U moet mogelijk het formaat van het selectievakje wijzigen of het verplaatsen van het vakje op basis van het apparaat waarop het wordt weergegeven. Als dat gebeurt, zul je het doen moet het label ook opnieuw worden geplaatst, omdat er geen automatische aanpassing aan het label plaatsvindt in reactie op het opnieuw positioneren / vergroten of verkleinen van het selectievakje.
We kunnen dit nadeel wegnemen als we het gewoon kunnen zorg voor een stevige lay-out voor het selectievakje en het label, in plaats van ze ruwweg op de pagina te plaatsen.
Maar bijna alle indelingssystemen, zoals tabellen of kolommen, vereisen dat voeg het label toe vóór het selectievakje in de broncode om het op dezelfde manier op het scherm te laten lijken. Dat is iets wat we niet willen doen omdat de volgende elementselector op het label niet meer werkt.
CSS Grid, aan de andere kant, is een opmaaksysteem dat dat wel is niet afhankelijk van de plaatsing / volgorde van elementen in de broncode.
De herordeningsmogelijkheden van de lay-out van het raster zijn opzettelijk van invloed alleen de visuele weergave, de spraakvolgorde en navigatie verlaten op basis van de bronvolgorde. Hierdoor kunnen auteurs de visuele presentatie manipuleren terwijl de bronvolgorde intact blijft ... - CSS Grid Layout Module Level 1, W3C
CSS-raster is dus een ideale oplossing voor style het label dat verschijnt voor het selectievakje.
Checkbox-styling met CSS Grid
Laten we beginnen met de HTML-code. De volgorde van het selectievakje en label blijft ongewijzigd. We voegen ze gewoon toe aan een raster.
De bijbehorende CSS is als volgt:
#cbgrid weergave: raster; rooster-sjabloon-gebieden: "links rechts"; breedte: 150 px; invoer [type = selectievakje] grid-area: right; label grid-area: left;
Ik zal niet ingaan op de manier waarop het CSS-raster werkt, zoals ik al schreef gedetailleerd artikel over het onderwerp, die je hier kunt lezen. Enkele basisprincipes echter: de weergeven: raster eigenschap verandert een element in een rastercontainer, roostervormige area geeft het rastergebied aan waartoe een element behoort, en roostervormige template-gebieden vormt een rasterlay-out, bestaande uit verschillende rastergebieden.
In de bovenstaande code zijn er twee rastergebieden: "links" en "rechts". Ze verzinnen het twee kolommen van een rasterrij. Het selectievakje is van de "rechts" gebied en het label voor de "links". hier is hoe ze eruitzien op het scherm:
Omdat we de relatieve plaatsing van het selectievakje en het label in de broncode niet hebben gewijzigd, kunnen we dit gebruik nog steeds de aangrenzende broer / zus-combinator:
invoer: aangevinkt + label / * style me * /
Merk op dat een roosteritem is altijd geblokkeerd; het verschijnt met een omringende doos die bekend staat als de vak op rasterniveau. Als je dat niet wilt, bijvoorbeeld voor een label, zet een wrapper op dat item (verpak het in een ander element) en zet die verpakking in het rastergebied.
Dat is het, mensen. CSS-grid helpt je hopelijk om de lay-outs van die brutale selectievakjes te bepalen.
