Des requêtes de conteneur CSS que vous ne connaissez peut-être pas ! !

Dans le développement front-end, il est souvent nécessaire de concevoir en fonction de différentes tailles d'écran pour obtenir une réactivité PC et mobile. Nous utilisons généralement des requêtes multimédias CSS pour détecter la largeur ou la hauteur de la fenêtre, puis modifions la conception en fonction de ce modèle. C’est ainsi que les mises en page Web ont été conçues au cours des 10 dernières années.

Requête de conteneur CSS, fonctionnalité demandée depuis longtemps par les développeurs Web, apparaîtra bientôt en CSS Dans le dernier Chrome Canary, nous pouvons l'activer via chrome://flags/#enable-container-queries. Fonction de requêtes de conteneur. Dans cet article, j'expliquerai de quoi il s'agit, comment cela changera votre flux de travail en tant que concepteur, et plus encore.

Statut actuel du responsive design

Actuellement, nous mettons en œuvre la réactivité, qui nécessite généralement trois styles de conception d'interface utilisateur, à savoir mobile, tablette et ordinateur de bureau.

Dans l'image ci-dessus, l'interface utilisateur est conçue en trois versions, afin que les développeurs puissent bien l'implémenter, ce qui est très agréable (cela a peur des paresseux, l'interface utilisateur ne fournit que la version PC , c'est chiant).

Voyons maintenant comment utiliser les requêtes multimédias pour voir comment y parvenir.

L'image ci-dessus est le même composant, qui a trois variantes, à savoir default, Card et Featured. En CSS, les développeurs doivent créer trois variantes de ce composant, où chaque composition est unique.

.c-media {
  /* the default styles */
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

@media (min-with: 400px) {
  .c-media--card {
    display: block;
  }

  .c-media--card img {
    margin-bottom: 1rem;
  }
}

@media (min-with: 1300px) {
  .c-media--featured {
    position: relative;
    /* other styles */
  }

  .c-media--featured .c-media__content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
}

Les variations ci-dessus dépendent de la requête multimédia ou de la largeur de la fenêtre d'affichage. Cela signifie que nous ne pouvons pas les contrôler en fonction de la largeur de leurs parents. Maintenant, vous vous demandez peut-être quel est le problème ici ? Oh ou alors, c'est une excellente question.

Le problème est que les développeurs n'utilisent des variantes de composants que lorsque la largeur de la fenêtre d'affichage est supérieure à une certaine valeur. Par exemple, si j'utilise featured sur tablette qui est le style PC, cela ne fonctionne pas, pourquoi ? Parce que sa largeur de requête multimédia est supérieure à 1300px.

Non seulement cela, nous sommes également confrontés à un problème lorsque le contenu est inférieur à celui prévu. Parfois, le propriétaire de l'UP ne peut ajouter qu'un seul article, mais la conception doit en inclure trois. Dans ce cas, soit nous aurons un espace vide, soit le projet s'agrandira pour remplir l'espace disponible. Considérons l'image suivante :

Dans le premier cas (Cas 1), l'article est trop large, ce qui entraîne une déformation de la couverture. Le même problème se produit dans le deuxième cas (cas 2)

Si vous utilisez des requêtes de conteneur, nous pouvons résoudre ces problèmes en interrogeant le composant parent pour décider comment afficher un composant spécifique. Considérez le diagramme suivant, qui montre comment nous pouvons utiliser les requêtes de conteneur pour résoudre ce problème.

Dans ce cas, que se passe-t-il si nous tournons nos pensées vers le composant parent du composant ? En d'autres termes, si nous interrogeons le composant parent et déterminons le composant en fonction du composant ? largeur ou hauteur du composant parent À quoi devrait-il ressembler ? Jetons un coup d'œil au concept de requête de conteneur.

Qu'est-ce qu'une requête de conteneur

Tout d'abord, permettez-moi de définir le conteneur. Il contient un élément d'un autre élément, généralement nous l'appelons wrapper.

Dans la dernière version de Chrome Canary, nous pouvons activer la fonction Container Queries via chrome://flags/#enable-container-queries.

Lorsqu'un composant est placé à l'intérieur d'un élément, il est inclus dans cet élément. Cela signifie que nous pouvons interroger la largeur de l'élément parent et la modifier en conséquence. Considérez l'image suivante

Notez que chaque carte a un contour jaune, représentant le composant parent de chaque composant. À l'aide de requêtes de conteneur CSS, nous pouvons modifier un composant en fonction de la largeur de son composant parent.

<div class="o-grid">
  <div class="o-grid__item">
    <article class="c-media"></article>
  </div>
  <!-- + more items -->
</div>

Ce composant est un élément de classe .c-media et son parent est l'élément .o-grid__item. En CSS, nous pouvons faire ce qui suit :

.o-grid__item {
  contain: layout inline-size style;
}

.c-media {
  /* Default style */
}

@container (min-width: 320px) {
  .c-media {
    /* The styles */
  }
}

@container (min-width: 450px) {
  .c-media {
    /* The styles */
  }
}

Tout d'abord, nous disons au navigateur que chaque élément avec un élément de classe .o-grid est un conteneur. Ensuite, vous indiquez au navigateur que si la largeur de l'élément parent est égale ou supérieure à 500 px, il doit s'afficher différemment. Il en va de même pour la requête 700px. C'est ainsi que fonctionnent les requêtes de conteneur CSS.

De plus, nous pouvons les définir où nous le souhaitons, ce qui signifie que nous pouvons interroger les conteneurs de niveau supérieur si nécessaire. Maintenant que vous avez compris l'idée de base de la requête de conteneur CSS, jetons un œil à l'image ci-dessous pour approfondir l'image.

À gauche, voici une fenêtre en cours de redimensionnement. À droite, un composant qui change en fonction de la largeur du composant parent. C'est la fonction et l'utilisation des requêtes de conteneur.

Concevez en pensant aux requêtes de conteneurs

En tant qu'interface utilisateur, vous devez vous adapter à cette fonctionnalité CSS révolutionnaire, car elle changera la façon dont nous concevons pour le Web. Nous concevons non seulement en fonction de la taille de l'écran, mais nous réfléchissons également à la manière dont le composant doit s'adapter lorsque la largeur du conteneur change.

Les systèmes de conception deviennent de plus en plus populaires ces jours-ci. L'équipe de conception construira un ensemble de règles et de composants afin que les autres membres puissent créer la page en fonction de ceux-ci. Avec l'arrivée des requêtes de conteneur CSS, nous concevrons également comment un composant doit s'ajuster en fonction de la largeur de son composant parent.

Considérez les modèles suivants :

Veuillez noter que nous avons un titre, une section d'article, une citation et une newsletter. Chacun d'eux doit s'adapter à la largeur de la vue parent.

Je peux diviser ces composants dans les parties suivantes

• Viewport (requête multimédia)
• Parent (requête de conteneur)
• Général : non affecté composants tels que des boutons, des étiquettes, des paragraphes.

Pour l'exemple d'interface utilisateur, voici comment nous divisons les composants.

Lorsque nous réfléchissons avec cet état d'esprit lors de la conception d'une interface utilisateur, nous pouvons commencer à réfléchir à différentes variantes de composants qui dépendent de la largeur de leurs parents.

Dans l'image ci-dessous, remarquez comment chaque variation du composant de publication commence par une largeur spécifique.

En tant que designer, il peut être un peu étrange de penser à la largeur des parents au début, mais c'est la voie à suivre. Nous fournissons aux développeurs front-end des détails et des versions de chaque composant qu'ils peuvent utiliser.

De plus, nous pourrions également avoir une variante d'un composant qui ne doit être affichée que dans un contexte spécifique. Par exemple, la page de la liste des événements. Dans ce cas, il est important de savoir où utiliser cette variante.

Le problème est de savoir comment indiquer au concepteur où utiliser ces composants.

Communiquer avec les développeurs

Une bonne communication est un facteur important de réussite d'un projet. En tant que concepteur, nous devons fournir des conseils sur les domaines dans lesquels les variantes de composants doivent être utilisées. Il peut s'agir d'une conception de page complète ou d'un simple diagramme montrant comment utiliser chaque composant.

Remarquez comment j'ai mappé chaque variante à un contexte spécifique plutôt qu'à une fenêtre d'affichage. Pour démontrer cela davantage, regardons comment nos composants se comportent différemment lorsqu'ils sont utilisés avec CSS Grid.

Dans une grille CSS, nous pouvons indiquer au navigateur que nous souhaitons que les colonnes se développent si le nombre de colonnes est inférieur à celui prévu en utilisant le mot-clé auto-fit (vous pouvez en savoir plus à ce sujet ici). Cette fonctionnalité est très puissante car elle nous aide à présenter différentes variations sur le même fond.

Il est très utile de faire réagir un composant à la largeur de son parent. Comme vous venez de le voir, nous revisitons la page de la taille d'un ordinateur et comporte différentes sections, chacune avec un nombre différent de colonnes.

Évitez la complexité lors de la conception de composants réactifs

Il est important de se rappeler que les parties internes d'un composant sont comme un jeu Lego. Nous pouvons les trier en fonction des changements en cours, mais tout a une limite. Parfois, il est préférable pour un développeur front-end de travailler sur un composant entièrement nouveau plutôt que d'utiliser des requêtes de conteneur pour créer des variantes.

Considérez ce qui suit.

Il comporte les éléments suivants :

• Avatar
• Nom
• Boutons
• Paires clé/valeur

Si les pièces internes restent les mêmes, ou du moins ne contiennent pas de nouvelles pièces, nous pouvons modifier le composant et avoir plusieurs variantes comme indiqué ci-dessous.

Cas d'utilisation des requêtes de conteneur CSS

Explorons quelques cas d'utilisation qui peuvent être implémentés à l'aide de la requête de conteneur CSS.

Liste de discussion

Je vois ce modèle sur Facebook Messenger. La liste de discussion change en fonction de la largeur de la fenêtre d'affichage. Nous pouvons y parvenir en utilisant des requêtes de conteneur CSS.

Lorsqu'il y a suffisamment d'espace, la liste s'agrandira et affichera le nom de chaque utilisateur. L'élément parent de la liste de discussion peut être un élément redimensionné dynamiquement (par exemple : en utilisant des unités de fenêtre CSS ou des fonctions de comparaison CSS).

// HTML
<div class="content">
  <aside>
    <ul>
      <li>
        <img src="shadeed.jpg" alt="Ahmad Shadeed" />
        <span class="name">Ahmad Shadeed</span>
      </li>
    </ul>
  </aside>
  <main>
    <h2>Main content</h2>
  </main>
</div>

// CSS
.content {
  display: grid;
  grid-template-columns: 0.4fr 1fr;
}

aside {
  contain: layout inline-size style;
}

@container (min-width: 180px) {
  .name {
    display: block;
  }
}

aside 宽度是0.4f，所以它是动态宽度。另外，我添加了contain属性。然后，如果容器宽度大于180px，将显示用户名。

另一个类似的用例是侧导航。我们可以切换导航项标签的位置，从在新行或旁边的图标。

当容器很小时，导航项标签是如何从一个新行切换的，当有足够的空间时，导航项标签是如何靠近导航图标的。

示例地址：https://codepen.io/shadeed/pen/Popmryw?editors=0100

英文原文地址：https://ishadee.com/article/contner-queries-for-designers/

作者：AAhmad Shadeed

更多编程相关知识，请访问：编程视频！！

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!