Utilisation de la technique du berger de la grille pour commander des données avec CSS

Les bergers sont bons pour prendre soin de leurs troupeaux, leur apportant de l'ordre et de la structure. Même avec des centaines de moutons, les bergers les ramèneraient toujours à la ferme à la fin de la journée.

Lors du traitement des données, les programmeurs ne savent souvent pas si les données sont correctement filtrées ou triées. Il est particulièrement douloureux lors de l'itération du tableau, puis affichant des données sur la page, car on ne sait pas où chaque élément est reçu. Grid Shepherd est une technologie qui utilise la grille CSS au lieu de JavaScript pour vous aider à localiser et à trier les projets où vous voulez.

C'est ce que nous explorerons dans cet article. La technologie du berger de la grille peut apporter de l'ordre et de la structure aux données que nous traitons, tout en nous donnant une compréhension plus claire de l'endroit où et de la façon dont les données sont utilisées que jamais.

Allons une compréhension plus profonde.

Trier en utilisant javascript

Nous allons commencer par itération sur un éventail non ordonné d'animaux de ferme. Imaginez que les vaches et les moutons paissent joyeusement dans les champs. Ils peuvent être combinés par programme à l'aide de la méthode Array.prototype.sort et répertoriés sur la page:

 Laissez les animaux = [
  {nom: 'edna', animal: 'Cow'},
  {nom: 'liam', animal: 'moutons'},
  {nom: 'Fink', animal: 'moutons'},
  {nom: 'olga', animal: 'Cow'},
]]
Soit tridanimals = animaux.sort ((a, b) => {
  if (a.animal> b.animal) retour 1;
  retour 0;
});
console.log (tridanimals);
/* retour:
  [{Name: 'Elga', Animal: 'Cow'},
    {nom: 'olga', animal: 'Cow'},
    {nom: 'liam', animal: 'moutons'},
    {nom: 'Fink', animal: 'moutons'}]
* /

Renseignez-vous sur le berger de la grille

La méthode Shepherd Grid permet le tri des données sans utiliser JavaScript . Au lieu de cela, nous comptons sur la grille CSS pour faire le travail pour nous.

La structure est exactement la même que le tableau d'objets JavaScript ci-dessus, mais est représenté par un nœud DOM.

<main><div> Edna</div>
  <div>Liam</div>
  <div>Jenn</div>
  <div>Mouchard</div>
</main>

Pour gérer ces animaux, nous devons les entourer dans une zone commune, ce que nous utilisons<main></main> La raison de l'élément. En définissant display: grid , nous créons un contexte de formatage de grille où nous pouvons définir les colonnes (ou lignes) que chaque animal doit occuper.

 .sheep {grille-colonne: 1; }
.cow {grid-column: 2; }

En utilisant grid-auto-flow: dense , chaque animal est automatiquement disposé au premier emplacement disponible dans chaque zone définie. Cela peut également être utilisé avec un certain nombre d'options de tri différentes - définissez simplement une autre colonne et les données seront triées par magie.

 principal {
  Affichage: grille;
  Grid-Auto-Flow: densité;
}

.sheep {grille-colonne: 1; }
.cow {grid-column: 2; }

Moutons avancés

Nous pouvons encore améliorer nos exemples de gestion à l'aide de compteurs CSS. De cette façon, nous pouvons calculer le nombre d'animaux dans chaque colonne et - appliquer la question de quantité proposée par Heydon Pickering dans le discours de Lea Verou en 2011 - de style conditionnellement basé sur la quantité.

Les requêtes de quantité dépendent d'une sorte de sélecteur pour le comptage des classes - c'est idéal pour :nth-child(An B [of S]?) Notation de classe pseudo, mais elle n'est actuellement disponible qu'en Safari). Cela signifie que nous devons utiliser le sélecteur :nth-of-type() comme solution de contournement.

Nous avons besoin de nouveaux types d'éléments pour le faire fonctionner. Cela peut être fait par des composants Web ou en renommant n'importe quel élément HTML à un nom personnalisé. Cela s'applique même si ces éléments ne sont pas dans la spécification HTML, car les navigateurs utilisent HTMLUnknownElement pour représenter des étiquettes non définies, ce qui les fait se comporter de manière très similaire aux div . La documentation ressemble maintenant à ceci:

<fence><sheep> Lisa</sheep><sheep> Bonnie</sheep><cow> Olaf</cow><sheep> Jenn</sheep></fence>

Nous pouvons maintenant accéder à notre type d'élément personnalisé. Lorsque le nombre de moutons ou de vaches est égal ou inférieur à 10, appliquons un fond rouge.

 Mouton: nième-dernier de type (n 10),
mouton: nième-dernier de type (n 10) ~ mouton,
vache: nième-dernier de type (n 10),
Cow: Nth-Sast-of-Type (n 10) ~ Cow, {
  Color d'arrière-plan: rouge;
}

De plus, le compteur peut être simplement implémenté en utilisant counter-reset: countsheep countcow; et en utilisant le sélecteur before pour localiser chaque élément et compter vers le haut.

 mouton :: avant {
  Counter-Increment: Countheep;  
  Contenu: Counter (Counseep); 
}

Ici, nous utiliserons Vue pour ajouter et supprimer dynamiquement des animaux, en utilisant des transitions Vue et deux options de tri différentes. Regardez comment les animaux occupent naturellement les bonnes colonnes, même si vous ajoutez plus d'animaux et en retirez-le:

Le berger de la grille peut également être utilisé pour toutes les données non ordonnées:

• Séparer et calculer les électeurs dans le sondage (peut-être en deux parties, et leurs images de profil correspondantes) et les insérer en temps réel;
• Personnel du groupe / collègues en fonction de la position, de l'âge, de la taille; et
• Créer une hiérarchie

Gestion et accessibilité

grid-auto-flow: dense ne change pas la structure DOM de la grille - elle réorganise visuellement les éléments inclus. Un effet secondaire peut être vu dans le dernier exemple trié par ordre alphabétique, car les comptoirs sont mélangés ensemble. La modification de la structure DOM affectera non seulement les personnes à l'aide de lecteurs d'écran, mais également la traversée des TAB.

Notez également qu'une structure de document plate peut être préjudiciable aux lecteurs. Au lieu de cela, je traiterais ces réseaux de démonstration comme des graphiques et fournirais des informations alternatives textuelles plus longues.

fin!

Il est très intelligent de voir à quel point les outils de mise en page CSS sont puissants comme le maillage peuvent être utilisés pour les cas d'utilisation en dehors des exigences de mise en page traditionnelles et entrer dans des domaines qui auraient pu nécessiter d'autres langues dans le passé. Dans ce cas, nous pouvons voir comment les avantages de mise en page du réseau CSS et les capacités dynamiques de traitement des données de JavaScript se chevauchent, et comment cela nous donne plus de choix - et la puissance - de plier les données rendues comme nous le souhaitons.

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!