Comment utiliser les requêtes de conteneur en CSS

Pendant longtemps, les requêtes multimédias ont été le seul moyen de rendre les conceptions d'interface utilisateur réactives sur différentes tailles d'écran. Mais même cela avait ses limites. L'un des plus gros problèmes liés à l'utilisation des requêtes multimédias était que vous ne pouviez styliser un élément qu'en réponse aux modifications de la taille de l'écran, et non son élément conteneur le plus proche.

Les requêtes de conteneur ont été introduites pour résoudre ce problème. Ils ont également augmenté avec la popularité de frameworks comme React et Vue.js qui fonctionnent en créant des "composants" d'interface utilisateur modulaires. Apprenez à utiliser les requêtes de conteneur pour créer des éléments réactifs dans votre CSS.

Le code utilisé dans cet article est disponible dans ce Référentiel GitHub et est libre d'utilisation sous la licence MIT.

Pourquoi devriez-vous utiliser les requêtes de conteneur CSS?

Pour comprendre l'importance des requêtes de conteneur, prenons un exemple qui facilite la compréhension du concept. Mais d'abord, vous devez cloner le code de démarrage à partir de ce Référentiel GitHub.

Une fois que vous avez réussi à cloner le dépôt, exécutez le code. Vous trouverez une page Web similaire à l'image suivante :

Vous avez ici une mise en page en grille comprenant deux colonnes: la section principale et la barre latérale. La section principale semble correcte, mais la barre latérale (qui est beaucoup plus petite que le contenu principal) semble un peu écrasée.

La mise en page est réactive. Lorsque vous réduisez le navigateur, vous pouvez voir que la carte se transforme en une colonne verticale :

En d'autres termes, lorsque le contenu commence à devenir illisible, la mise en page se transforme en une colonne verticale où l'image est empilée au-dessus du contenu. Cet effet résulte des requêtes multimédias, qui sont le seul moyen de déterminer la taille des éléments en fonction de la taille totale de votre écran.

Dans ce cas, chaque fois que votre écran est inférieur à 800px, vous empilez tout les uns sur les autres en utilisant Alignement Flexbox. Sur les écrans plus grands, nous plaçons le contenu côte à côte :

@médias(largeur maximale: 800px) {
.carte {
flex-direction: colonne;
 }
.card-header { 
largeur: 100%;
 }
}

Pendant très longtemps, les requêtes des médias ont été l'un des principaux principes de conception web pour créer des mises en page réactives avec CSS (et cela a été suffisant pour la plupart des choses). Mais vous êtes obligé de rencontrer des scénarios où les requêtes multimédias ne suffiront pas, ou ne seront pas une solution pratique du moins.

L'un de ces scénarios est lorsque vous avez une barre latérale (comme nous le faisons dans l'exemple ci-dessus). Dans ces cas où vous avez une barre latérale, vous devez sélectionner directement la carte de la barre latérale et essayer de la réduire :

.sidebar.carte {
/* Réduit la carte de la barre latérale plus petite */
}
@médias(largeur maximale: 800px) {
/* Styliser la page lorsque l'écran est plus étroit que 800px */
}

Cela peut être assez compliqué si vous travaillez avec beaucoup d'éléments car vous devez sélectionner manuellement tous les éléments et les redimensionner. Vous vous retrouveriez avec plus de code et une complexité supplémentaire.

C'est là que les requêtes de conteneur pourraient être utiles. Au lieu d'être obligé d'utiliser votre fenêtre d'affichage comme dimensionnement, vous pouvez utiliser n'importe quel élément de votre page comme conteneur. Ensuite, ce conteneur peut avoir ses propres largeurs sur lesquelles baser vos requêtes multimédias.

Comment créer une requête de conteneur

Pour créer une requête de conteneur, vous devez commencer par cibler l'élément que vous souhaitez utiliser comme conteneur (dans ce cas, la section principale et la barre latérale). A l'intérieur du bloc, vous devez définir le de type conteneur pour taille en ligne:

principal, .sidebar {
de type conteneur: taille en ligne
}

Lorsque vous enregistrez votre fichier CSS, rien ne changera sur la page. Mais maintenant, vous pouvez utiliser des requêtes de conteneur pour redimensionner et renommer les cartes imbriquées dans la section principale et la section de la barre latérale. Dans la requête de conteneur suivante, vous remplacez les fiches par des colonnes verticales sur des écrans d'une largeur maximale de 500 pixels :

@récipient(largeur maximale: 500px) {
.carte {
flex-direction: colonne;
 }
.card-header {
largeur: 100%;
 }
}

Cela va fonctionner comme une requête média normale. Mais au lieu de mesurer la taille de votre écran, vous mesurez la taille de vos conteneurs (sections principale et latérale). Alors maintenant, lorsque votre conteneur mesure 500 pixels ou plus, vous utilisez la vue horizontale. Sinon, vous utilisez vertical (par défaut pour flexbox).

À partir de l'image ci-dessus, vous pouvez voir que la barre latérale prend une forme verticale car elle est inférieure à 500 pixels. Alors que le contenu principal conserve sa disposition horizontale car il est supérieur à 500 pixels. Si vous réduisez votre navigateur, votre barre latérale et votre contenu principal utiliseront tous deux l'alignement vertical lorsqu'ils atteindront 500 pixels ou moins.

La requête de conteneur est incroyablement puissante car elle vous permet de redimensionner les éléments en fonction du conteneur au lieu de la largeur entière du navigateur. Ceci est particulièrement utile lorsqu'il s'agit de composants (comme dans React ou Vue).

Avec les requêtes de conteneur, vous pouvez facilement redimensionner vos composants d'interface utilisateur en fonction de leur conteneur, ce qui vous permet de créer des composants entièrement autonomes.

Nommer les conteneurs

Lorsque vous créez un @récipient requête, il recherche d'abord le conteneur de l'élément que vous ciblez dans la requête. Dans notre cas, il s'agirait du conteneur principal et du conteneur de la barre latérale.

Et même si les cartes se trouvaient dans un autre conteneur, il ignorerait simplement les autres conteneurs et ne choisirait que le conteneur le plus proche de lui. Cela fait partie d'un ensemble plus large Concept CSS connu sous le nom de sélecteurs CSS.

Dans l'exemple suivant, nous avons transformé l'élément body en conteneur :

corps {
de type conteneur: taille en ligne;
}

Nous avons maintenant trois conteneurs distincts: corps, section principale et section secondaire. Par défaut, les cartes que nous ciblons dans la requête conteneur sont plus proches de la section principale ou de la barre latérale que du corps. Il utilise donc les sections principale et latérale comme conteneurs pour la requête de conteneur.

Pour remplacer ce comportement, vous devez faire deux choses. Tout d'abord, vous devez donner à votre élément body un nom de conteneur :

corps {
de type conteneur: taille en ligne;
nom_conteneur: corps;
}

Ensuite, lorsque vous créez votre requête de conteneur, vous devez spécifier le nom du conteneur après @récipient.

@récipient corps (largeur maximale:1000px){
/* Règles CSS qui ciblent le conteneur de corps */
}

Ceci est utile si vous souhaitez utiliser un élément spécifique comme conteneur plutôt que le conteneur le plus proche de l'élément que vous ciblez. En d'autres termes, vous pouvez sélectionner n'importe quel conteneur spécifique et affiner votre mise en page.

Unités de conteneur

Une autre caractéristique intéressante des conteneurs est que vous pouvez utiliser des unités de conteneur. Ces unités fonctionnent exactement comme les unités de fenêtre (elles sont toutes exactement du même type d'unités). Cependant, les unités de conteneurs utilisent cqw (pour régler la largeur) et cqh (pour régler la hauteur). Ces unités déterminent la largeur et la hauteur exactes de votre conteneur.

Les requêtes de conteneur CSS vous permettent d'utiliser des éléments spécifiques comme points de référence pour vos requêtes multimédias. Cette technique est très pratique pour créer des éléments modulaires et autonomes qui peuvent se tenir indépendamment quel que soit le conteneur dans lequel ils se trouvent. Mais les requêtes de conteneur utilisent les mêmes principes que les requêtes multimédia, et c'est quelque chose que vous devez maîtriser si vous voulez être l'un des meilleurs développeurs CSS.