Style de case à cocher avancé avec grille CSS
le Module de disposition de grille CSS peut résoudre non seulement un problème gigantesque de mise en page, mais aussi de bons vieux problèmes mulish que nous avons connus traiter pendant longtemps, tel que styliser une étiquette de case à cocher.
Bien qu'il existe une méthode relativement simple pour styliser l'étiquette lorsqu'elle apparaît après la case à cocher, ce n'est pas si facile quand l'étiquette apparaît avant il.
Style de case à cocher sans grille CSS
Styler une étiquette après une case à cocher est quelque chose que nous, les développeurs, faisons depuis que nous avons lu quelque chose à ce sujet. Cette technique est l’un des exemples les plus anciens et les plus anciens de la puissante dynamique que peut posséder CSS.
Voici le code que vous connaissez peut-être déjà, qui styles une étiquette après une case à cocher:
entrée: vérifié + étiquette / * style me * /
UNE étiquette de style après une case à cocher pourrait ressembler à ceci (cependant, vous pouvez également utiliser d’autres règles de style):
Le code CSS ci-dessus utilise le combinateur de fratrie adjacent marqué par le + clé. Quand une case à cocher est dans la :vérifié Etat, un élément après il (généralement une étiquette) peut être stylé en utilisant cette méthode.
Une telle technique simple et efficace! Ce qui pourrait peut-être vous vous trompez? Rien - tant que vous ne souhaitez pas afficher l'étiquette avant la case à cocher.
Le combinateur adjacent sélectionne l'élément suivant; cela signifie que l'étiquette doit venir après la case à cocher dans le code source HTML.
Alors, pour faire apparaître une étiquette avant la case d’appartenance à l’écran, nous ne pouvons pas simplement la déplacer avant la case à cocher du code source, en tant que le sélecteur de frères précédent n'existe pas en CSS.
Ce qui ne laisse qu'une option: repositionner la case à cocher et l'étiquette en utilisant transformer ou position ou marge ou une autre propriété CSS avec une sorte de puissance télékinétique, de sorte que l'étiquette apparaisse à gauche de la case à cocher à l'écran.
Problèmes avec la méthode traditionnelle
Il n'y a rien principalement mal avec la technique susmentionnée, mais il peut être inefficace dans certains cas. Je veux dire les cas dans lesquels les positions réarrangées de la case à cocher et de l'étiquette ne fonctionnent plus.
Pense réactif, par exemple. Vous devrez peut-être redimensionner ou repositionner la case à cocher en fonction du périphérique sur lequel elle est affichée. Quand cela arrive, vous allez besoin de repositionner l'étiquette ainsi, comme il n'y aura pas de réalignement automatique sur l'étiquette en réponse au repositionnement / redimensionnement de la case à cocher.
Nous pouvons éliminer cet inconvénient si nous pouvions juste fournir une mise en page solide pour la case à cocher et l'étiquette, au lieu de les positionner grossièrement sur la page.
Mais presque tous les systèmes d’agencement, tels que les tableaux ou les colonnes, vous obligent à: ajoute l'étiquette avant la case à cocher dans le code source pour le faire apparaître de la même manière à l'écran. C'est quelque chose que nous ne voulons pas faire parce que le sélecteur d'élément suivant sur l'étiquette cessera de fonctionner.
CSS Grid, en revanche, est un système de mise en page qui est ne pas dépend de l'emplacement / de l'ordre des éléments dans le code source.
Les capacités de réorganisation de la disposition de la grille affectent intentionnellement seul le rendu visuel, quitter l'ordre de la parole et de la navigation en fonction de l'ordre source. Cela permet aux auteurs de manipuler la présentation visuelle tout en laissant l’ordre des sources intact… - Module de mise en page de grille CSS niveau 1, W3C
Ainsi, la grille CSS est une solution idéale pour style l'étiquette qui apparaît avant la case à cocher.
Style de case à cocher avec CSS Grid
Commençons par le code HTML. L'ordre des cases à cocher et de l'étiquette restera le même qu'avant. Nous venons d'ajouter les deux à une grille.
Le CSS qui l'accompagne est comme suit:
#cbgrid display: grid; grid-template-areas: "left right"; largeur: 150px; input [type = case à cocher] grid-area: right; label grid-area: left;
Je ne vais pas approfondir le fonctionnement de la grille CSS, car j’ai déjà écrit un article détaillé sur le sujet, que vous pouvez lire ici. Quelques bases cependant: le affichage: grille propriété transforme un élément en un conteneur de grille, surface de la grille identifie la zone de grille à laquelle appartient l'élément, et grille-template-zones forme une grille, composée de différentes zones de grille.
Dans le code ci-dessus, il y a deux zones de la grille: "la gauche" et "droite". Ils composent deux colonnes d'une ligne de la grille. La case à cocher appartient à la "droite" zone et l'étiquette à la "la gauche". Voici à quoi ils ressemblent à l'écran:
Puisque nous n’avons pas changé l’emplacement relatif de la case à cocher et de l’étiquette dans le code source, nous pouvons toujours utiliser le combinateur adjacent:
entrée: vérifié + étiquette / * style me * /
Notez qu'un élément de la grille est toujours bloqué; il apparaît avec une boîte entourant connu sous le nom case au niveau de la grille. Si vous ne voulez pas cela, par exemple pour une étiquette, mettre une enveloppe sur cet article (envelopper dans un autre élément) et tourner cette enveloppe dans la zone de la grille.
C'est ça, les gars. J'espère que la grille CSS vous aide à définir les dispositions de ces cases à cocher effrontées.
