Générateur de requêtes de conteneur CSS

• Générateur de requêtes de conteneur visuel : créez visuellement des requêtes de conteneur CSS avec notre générateur de requêtes de conteneur interactif. Définissez le type de conteneur (taille en ligne, taille ou normal), ajoutez des conditions de requête avec des opérateurs et des unités personnalisés et définissez des styles réactifs, le tout sans écrire une seule ligne de CSS à la main.
• Privé - Aucun téléchargement sur le serveur requis : le générateur de requêtes de conteneur s'exécute entièrement dans votre navigateur. Les configurations de vos conteneurs, les conditions de requête et les styles réactifs ne quittent jamais votre appareil. Toute la génération CSS est 100 % côté client, sans téléchargement de données.
• Aperçu en direct avec contrôles de redimensionnement : découvrez exactement comment votre requête de conteneur se comporte grâce à un volet d'aperçu redimensionnable en direct. Utilisez les boutons de largeur prédéfinis (320 px à 1 024 px) ou le curseur interactif pour tester votre requête sur n'importe quelle largeur de conteneur. L'aperçu est mis à jour instantanément pour indiquer si la requête s'applique.
• Sortie CSS prête à l'emploi : copiez la règle @container générée, la déclaration de conteneur ou la chaîne de condition de requête en un seul clic. Le générateur de requêtes de conteneur produit du CSS prêt pour la production avec un échappement approprié pour les noms de conteneurs et une syntaxe de requête multimédia correctement formatée.

• Réactivité des composants React : les développeurs React utilisent le générateur de requêtes de conteneur pour créer des composants véritablement réactifs qui s'adaptent à leur conteneur parent plutôt qu'à la fenêtre d'affichage. Créez des composants de carte, de barre latérale et de tableau de bord qui réorganisent leur disposition en fonction de la largeur du conteneur disponible – essentiel pour les bibliothèques de composants réutilisables où le même composant apparaît dans des conteneurs de largeurs différentes.
• Mises en page réactives modernes : les concepteurs Web utilisent le générateur de requêtes de conteneur pour créer des mises en page qui répondent à leur élément conteneur au lieu de la fenêtre d'affichage. Ceci est particulièrement puissant pour les grilles de tableaux de bord, les zones de widgets et les mises en page imbriquées où les éléments apparaissent dans plusieurs contextes et de différentes tailles : les requêtes de conteneur s'adaptent naturellement sans duplication de requêtes multimédias.
• Systèmes de widgets et de panneaux adaptatifs : créez des systèmes de widgets et des panneaux latéraux qui adaptent leur disposition interne à mesure que l'utilisateur les redimensionne. Le générateur de requêtes de conteneur permet de créer des widgets de barre latérale réactifs, des panneaux de discussion et des tiroirs de paramètres qui réorganisent le contenu - en passant d'une disposition empilée à une disposition côte à côte en fonction de la largeur du conteneur plutôt que de la largeur de l'écran.
• Contenu CMS et Page Builder : les éditeurs de contenu utilisant WordPress, Drupal ou des constructeurs de pages comme Elementor peuvent utiliser le générateur de requêtes de conteneur pour créer des blocs de contenu qui répondent à la largeur de leur colonne. Une disposition à deux colonnes sur ordinateur devient une seule colonne sur mobile, mais le même bloc de contenu s'adapte différemment selon qu'il se trouve en position pleine largeur ou en barre latérale.
• Adaptabilité des composants du système de conception : les architectes du système de conception utilisent le générateur de requêtes de conteneur pour définir des variantes réactives des composants du système de conception : cartes, tableaux, barres de navigation et présentations de formulaires qui s'adaptent en fonction de leur conteneur parent. Les requêtes de conteneur éliminent le besoin d’accessoires réactifs fragiles et permettent des composants véritablement autonomes.
• Grilles de fiches de produits de commerce électronique : les développeurs de commerce électronique utilisent le générateur de requêtes de conteneur pour créer des fiches de produits qui passent de manière transparente entre les vues de grille et de liste à mesure que la largeur du conteneur change. Les images de produits, les titres, les prix et les boutons d'ajout au panier se réorganisent automatiquement lorsque l'utilisateur ajuste le nombre de colonnes dans une grille de produits.

Les requêtes de conteneur CSS (qui font partie de la spécification CSS Containment Module Level 3) vous permettent d'appliquer des styles à un élément en fonction de la taille de son élément conteneur (conteneur), plutôt que de la fenêtre d'affichage. Il s'agit d'un changement fondamental par rapport aux requêtes multimédias, qui répondent à la taille de la fenêtre d'affichage. Avec les requêtes de conteneur, un composant peut adapter sa disposition, sa typographie et son apparence en fonction de l'espace fourni par son conteneur parent, ce qui rend le composant véritablement réactif au conteneur. Notre générateur de requêtes de conteneur vous aide à créer ces règles visuellement sans mémoriser la syntaxe exacte.

1. Définissez le conteneur : définissez un nom de conteneur et un type de conteneur. Le type le plus courant est inline-size , ce qui fait de l'élément un conteneur de requête qui répond aux changements de largeur. Utilisez size si vous devez interroger à la fois la largeur et la hauteur. Utilisez normal pour le confinement sans fonctionnalité de requête.
2. Ajouter des conditions de requête : ajoutez une ou plusieurs conditions à l'aide de propriétés telles que width , height , inline-size ou aspect-ratio avec des préfixes min- ou max-. Plusieurs conditions sont jointes à et . Le générateur de requêtes de conteneur prend en charge les unités CSS standard (px, em, rem) ainsi que les unités de requête de conteneur (cqw, cqi, cqh).
3. Définir des styles réactifs et un aperçu : ajoutez des déclarations CSS qui doivent s'appliquer lorsque la requête correspond. Utilisez les styles prédéfinis (Carte compacte, Carte étendue, etc.) comme points de départ ou entrez des paires propriété-valeur personnalisées. Redimensionnez l'aperçu en direct pour voir exactement quand les conditions de votre requête sont remplies.

• Portée : les requêtes multimédias répondent à la taille de la fenêtre d'affichage, c'est-à-dire la largeur de la fenêtre du navigateur. Les requêtes de conteneur répondent à la taille d'un élément parent spécifique. Cela rend les requêtes de conteneur idéales pour les composants réutilisables qui apparaissent dans différents contextes.
• Réutilisabilité : un composant avec des requêtes de conteneur fonctionne correctement, qu'il apparaisse dans une barre latérale étroite (300 px), une zone de contenu principale (800 px) ou une section de héros pleine largeur (1 200 px). Les requêtes multimédias nécessiteraient que le composant connaisse son contexte de fenêtre.
• Prise en charge du navigateur : les requêtes de conteneur CSS sont prises en charge dans Chrome 105+, Firefox 110+, Safari 16+ et Edge 105+. Ils sont désormais stables et prêts pour la production dans tous les navigateurs modernes. Utilisez le générateur de requêtes de conteneur pour générer des styles d'amélioration progressive.
• Performances : les requêtes de conteneur peuvent être plus performantes que les requêtes multimédias en termes de réactivité au niveau des composants, car elles étendent les recalculs de style à la sous-arborescence du conteneur plutôt qu'à l'ensemble du document.

Les requêtes de conteneur CSS introduisent de nouvelles unités relatives calculées en fonction des dimensions du conteneur : cqw (1 % de la largeur du conteneur), cqi (1 % de la taille en ligne du conteneur), cqh (1 % de la hauteur du conteneur), cqb (1 % de la taille du bloc du conteneur), cqmin (le plus petit de cqi et cqb) et cqmax (le plus grand de cqi et cqb). Ces unités sont particulièrement utiles pour une typographie fluide et un espacement qui évolue avec le conteneur plutôt qu'avec la fenêtre d'affichage. Par exemple, font-size: clamp(0.875rem, 2cqi, 1.5rem) redimensionne la taille de la police en douceur entre 0,875rem et 1,5rem à mesure que le conteneur passe d'environ 44 px à 75 px en ligne.