Style de case à cocher avancé avec CSS Grid

Le module CSS Grid Layout Module peut non seulement résoudre un mammouth d'un problème de mise en page, mais aussi quelques bons vieux problèmes de mulass auxquels nous avons eu affaire depuis longtemps, tels que le stylisation d'une étiquette de case à cocher .

Bien qu'il existe une méthode relativement simple pour styler l'étiquette lorsqu'elle apparaît après la case à cocher, ce n'est pas si simple lorsque l'étiquette apparaît devant elle .

Style de case à cocher sans CSS Grid

Styling une étiquette après une case à cocher est quelque chose que nous les développeurs ont fait depuis que nous avons lu à ce sujet quelque part. Cette technique est l'un des principaux exemples de la puissante dynamique que CSS peut posséder.

Voici le code que vous connaissez peut-être, qui code une étiquette après une case cochée :

 étiquette pour la case à cocher 

 entrée: cochée + libellé {/ * style me * /} 

Une étiquette stylisée après une case à cocher peut ressembler à ceci (cependant, vous pouvez également utiliser d'autres règles de style):

Le code CSS ci-dessus utilise le combinateur frère / sœur adjacent marqué par la touche + . Quand une case est dans l'état :checked, un élément après (généralement une étiquette) peut être stylé en utilisant cette méthode.

Une technique aussi simple et efficace! Qu'est-ce qui pourrait mal tourner avec? Rien - jusqu'à ce que vous vouliez afficher l'étiquette avant la case à cocher .

Le combinateur frère / sœur adjacent sélectionne l'élément suivant ; cela signifie que l'étiquette doit venir après la case à cocher dans le code source HTML.

Ainsi, pour faire apparaître une étiquette avant la case à cocher d'appartenance à l'écran, nous ne pouvons pas la déplacer avant la case à cocher dans le code source, car un sélecteur de frère précédent n'existe pas en CSS .

Ce qui ne laisse qu'une seule option: repositionner la case à cocher et l'étiquette en utilisant transform ou position ou margin ou une autre propriété CSS avec une sorte de puissance télékinésique, de sorte que l'étiquette apparaisse à gauche de la case à cocher sur l'écran.

Problèmes avec la méthode traditionnelle

Il n'y a rien de mal majeur dans la technique ci-dessus, mais il peut être inefficace dans certains cas . Je veux dire les cas où les positions réarrangées de la case à cocher et de l'étiquette ne fonctionnent plus.

Pensez réactif, par exemple. Vous devrez peut-être redimensionner ou repositionner la case en fonction de l'appareil sur lequel elle est affichée. Lorsque cela se produit, vous devez également repositionner l'étiquette, car 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 simplement 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 de mise en page, tels que les tables ou les colonnes, vous obligent à ajouter 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, d'autre part, est un système de mise en page qui ne dépend pas de l'emplacement / l'ordre des éléments dans le code source .

Les capacités de réorganisation de la disposition de la grille n'affectent intentionnellement que le rendu visuel, laissant l'ordre de la parole et la navigation en fonction de l'ordre de la source. Cela permet aux auteurs de manipuler la présentation visuelle tout en laissant l'ordre de la source intacte ... - CSS Grid Layout Module Level 1, W3C

Ainsi, CSS grid est une solution idéale pour styler l'étiquette qui apparaît avant la case à cocher .

Style de case à cocher avec CSS Grid

Commençons par le code HTML. L'ordre de la case à cocher et de l'étiquette restera le même que précédemment. Nous ajoutons simplement les deux à une grille.

 étiquette pour la case à cocher 

Le CSS qui l'accompagne est le suivant:

 #cbgrid {display: grid; zones de gabarit de grille: "left right"; largeur: 150px; } input [type = checkbox] {zone de grille: droite; } label {zone de grille: gauche; } 

Je ne vais pas approfondir sur la façon dont la grille CSS fonctionne, comme j'ai déjà écrit un article détaillé sur le sujet, que vous pouvez lire ici. Quelques bases, cependant: la propriété display: grid transforme un élément en conteneur de grille, grid-area identifie la zone de grille à laquelle un élément appartient et grid-template-areas grille forment une disposition de grille composée de différentes zones de grille.

Dans le code ci-dessus, il y a deux zones de grille : "left" et "right" . Ils forment deux colonnes d'une rangée de grille . La case à cocher appartient à la zone "right" et l'étiquette à la "left" . Voici comment ils apparaissent à l'écran :

Puisque nous n'avons pas modifié le placement relatif de la case à cocher et de l'étiquette dans le code source, nous pouvons toujours utiliser le combinateur frère / sœur adjacent :

 entrée: cochée + libellé {/ * style me * /} 

Notez qu'un élément de la grille est toujours bloqué ; il apparaît avec une boîte entourant connue sous le nom de boîte au niveau de la grille . Si vous ne le souhaitez pas, par exemple pour une étiquette, placez un wrapper sur cet élément (enveloppez-le dans un autre élément) et placez ce wrapper dans la zone de la grille .

C'est tout, les amis. La grille CSS vous aidera, espérons-le, à définir les dispositions de ces cases à cocher effrontées.