Dave Rupert avec un peu de magie CSS moderne qui s'attaque à l'une de ces énigmes classiques : que se passe-t-il lorsque le CSS pour le composant est incapable de gérer le contenu que nous lui lançons ?
La situation spécifique est lorsqu'une grille de mise en page attend un nombre pair d'éléments, mais est fournie avec un nombre impair à la place. Nous nous retrouvons avec un élément "pendu" à la fin qui perturbe la mise en page. On dirait que ce qu'il faut, c'est un peu CSS défensif et Dave l'accomplit.
Il atteint pour :has() pour écrire un sélecteur astucieux qui renifle le dernier élément d'une grille contenant un nombre impair d'éléments :
.items:has(.item:last-of-type:nth-of-type(odd)) .item:first-of-type { }Décomposer cela :
- Nous avons un conteneur parent de
.items. - Si le conteneur
:has()an.itemenfant qui est le dernier de son espèce, - …et cela
.itemse trouve être une instance impaire, - … puis sélectionnez le premier
.itemélément de ce type et stylisez-le !
Dans ce cas, ce dernier .item peut être réglé sur toute la largeur pour éviter les trous dans la mise en page.
Si… alors… CSS a des pouvoirs logiques conditionnels ! Nous ne parlons que de la prise en charge de Safari TP et Edge/Chrome Canary pour le moment, mais c'est plutôt génial.
Par chance, Temani Afif a récemment partagé des astuces qu'il a apprises en expérimenter des grilles implicites. En tirant parti de l'algorithme de placement automatique de CSS Grid, nous n'avons même pas besoin de déclarer explicitement un nombre fixe de colonnes et de lignes pour une grille - CSS les créera pour nous si nécessaire !
Non, les techniques de Temani ne sont pas des solutions alternatives au dilemme du « dangler » de Dave. Mais en combinant l'approche de Temani aux modèles de mise en page de grille reproductibles avec l'utilisation défensive CSS de Dave de :has(), nous obtenons une grille assez puissante et complexe, légère et capable de gérer n'importe quel nombre d'éléments tout en conservant un modèle équilibré et reproductible.
