jquery.app
Francais
EnglishDeutschFrancaisEspanol日本語Nederlands

Outils CSS

Gratuit Generateur de container queries CSS

Générez des règles @container CSS pour un design responsive base sur les composants.

Chargement de l'outil...

Qu'est-ce que Generateur de container queries CSS ?

Les conteneurs requetes vous permettent d'appliquer des styles CSS en fonction de la taille d'un conteneur parent plutot que de la zone d'affichage. Ceci est different des requetes media, qui repondent a la fenetre du navigateur. Pour les composants reutilisables, les conteneurs requetes signifient que le meme composant peut s'afficher correctement dans une barre laterale etroite et une large zone de contenu principal sans dupliquer les styles.

Réponse rapide

Utilisez les conteneurs requetes pour styliser un element en fonction de la taille de son conteneur parent plutot que de la zone d'affichage. Ils sont l'equivalent au niveau composant des requetes media et sont utiles pour les dispositions de widgets reutilisables.

Last updated: 2026-05-25

Limites

  • Les conteneurs requetes necessitent Chrome 105+, Edge 105+, Firefox 110+ et Safari 16+. Les navigateurs plus anciens ignorent entierement la fonctionnalite.
  • La propriete container-name doit referencer un ancetre container-type dans le DOM. Les elements en dehors de l'arbre du conteneur ne peuvent pas l'interroger.
  • Les unites de conteneur requete (cqw, cqh, cqi, cqb, cqmin, cqmax) n'ont de sens qu'a l'interieur d'un bloc @container et peuvent produire des valeurs inattendues en dehors.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Comment utiliser cet outil

  1. Definissez un container-type et un container-name optionnel pour l'element parent qui sera la reference de la requete.
  2. Choisissez une condition de point de rupture telle que min-width, max-width ou une plage inline-size.
  3. Ecrivez les regles CSS qui doivent s'appliquer lorsque la condition est remplie.
  4. Copiez le bloc @container genere et placez-le dans votre feuille de style de composant.

A quoi il sert

  • Faire en sorte qu'un composant de carte passe d'une disposition horizontale a verticale lorsque son conteneur se retrecit.
  • Construire une ligne de formulaire qui empile les champs sur les conteneurs etroits et les place en ligne sur les conteneurs larges.
  • Creer un widget qui redimensionne sa police et son espacement en fonction de la largeur du conteneur, independamment de la zone d'affichage.

Cas d'usage

Exemples concrets

Exemple

Composant carte dans la barre laterale et le contenu principal

Une carte reutilisable est placee a la fois dans une barre laterale etroite et une large colonne principale. Avec les conteneurs requetes, la carte utilise une disposition empilee dans la barre laterale et une disposition horizontale dans le contenu principal, le tout a partir d'une seule classe de composant.

Exemple

Ligne de formulaire qui s'adapte a l'espace disponible

Un formulaire avec les champs nom, email et telephone utilise un conteneur requete sur le fieldset. Lorsque le conteneur est plus large que 500px, les champs sont en ligne. En dessous de 500px, chaque champ s'empile sur sa propre ligne.

Erreurs frequentes

  • Appliquer des conteneurs requetes a un element sans definir container-type sur un parent, ce qui signifie qu'aucun contexte de conteneur n'est etabli et que les requetes ne s'appliquent jamais.
  • Utiliser des unites de zone d'affichage telles que vw ou vh a l'interieur d'un conteneur requete, qui referencent toujours la zone d'affichage plutot que le conteneur.
  • Compter entierement sur les conteneurs requetes sans disposition de repli, ce qui laisse le composant non style dans les navigateurs qui ne supportent pas les conteneurs requetes.

Vérification

  1. Redimensionnez l'element conteneur dans DevTools et verifiez que les elements enfants repondent aux changements de taille du conteneur, pas aux changements de la zone d'affichage.
  2. Verifiez les styles de repli dans les navigateurs non supportes en definissant des styles de base en dehors du bloc @container.

FAQ

Questions sur Generateur de container queries CSS

Quels navigateurs supportent les conteneurs requetes ?

Les conteneurs requetes sont supportes dans tous les navigateurs modernes depuis Chrome 105, Firefox 110, Safari 16 et Edge 105. Pour les navigateurs plus anciens, fournissez une disposition de repli qui fonctionne sans regles @container.

Quelle est la difference entre inline-size et size pour container-type ?

inline-size etablit un conteneur de requete qui repond a la dimension inline uniquement, ce qui correspond a la largeur dans les modes d'ecriture horizontaux. size etablit un conteneur qui repond a la fois a la largeur et a la hauteur mais necessite contain: layout style sur le conteneur, ce qui peut affecter le comportement de mise en page.

En quoi les conteneurs requetes different-ils des requetes media ?

Les requetes media repondent a la taille de la zone d'affichage et aux conditions globales du navigateur. Les conteneurs requetes repondent a la taille d'un element conteneur parent. Cela signifie qu'un composant style avec des conteneurs requetes s'adapte a son conteneur quel que soit l'endroit ou il est place -- dans une large colonne principale, une barre laterale etroite ou une grille de cartes -- sans necessiter de points de rupture de requete media separes pour chaque contexte de mise en page.

Que se passe-t-il si j'utilise @container sans definir container-type sur le parent ?

La regle @container n'a aucun effet et les styles contenus ne sont jamais appliques. Chaque conteneur requete necessite un element ancetre avec container-type defini sur inline-size, size ou normal. Le navigateur remonte la chaine des ancetres pour trouver le contexte de conteneur le plus proche. Si aucun n'est trouve, la requete echoue silencieusement.

Outils lies

Autres outils outils css

A essayer aussi

A essayer aussi