Grilles implicites, modèles de mise en page reproductibles et dangers

Dave Rupert utilise intelligemment le CSS moderne pour résoudre le puzzle classique: que se passe-t-il lorsque le CSS du composant ne peut pas gérer ce que nous fournissons?

Plus précisément, lorsque la grille de mise en page attend un nombre uniforme d'éléments, mais fournit en fait un nombre impair d'éléments. Le dernier élément "affamé" restant détruira la disposition. Cela nécessite un CSS défensif, Dave l'a fait.

Il a écrit un sélecteur concis en utilisant: a () pour trouver le dernier élément d'une grille contenant un nombre impair d'éléments:

 <code>.items:has(.item:last-of-type:nth-of-type(odd)) .item:first-of-type { }</code>

Décomposition comme suit:

• Nous avons un conteneur parent appelé .items.
• Si le conteneur: a () un élément enfant.
• ... et le .Item se trouve être une instance étrange,
• ... puis sélectionnez le premier élément .tem de ce type et stylisez-le!

Dans ce cas, le dernier.

Si ... alors ... CSS a des capacités logiques conditionnelles! Actuellement, nous ne parlons que de safari TP et du support Edge / Chrome Canary, mais c'est déjà génial.

Il arrive que Temani AFIF ait récemment partagé les conseils qu'il a appris lorsqu'ils utilisent un maillage implicite pour expérimenter. 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 la grille - CSS les créera pour nous si nécessaire!

Non, le truc de Temani n'est pas une alternative au puzzle "affamé" de Dave. Cependant, combinant l'approche de Temani en mode de mise en page de maillage reproductible avec l'utilisation défensive CSS de Dave de: a (), nous obtenons un maillage puissant et complexe qui est léger et capable de gérer n'importe quel nombre d'éléments tout en maintenant un mode reproductible équilibré.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!