jquery.app
Francais
EnglishDeutschFrancaisEspanol日本語Nederlands

Outils CSS

Gratuit Calculateur d'unités de conteneur

Calculez des valeurs clamp() avec les unités de requête de conteneur pour un dimensionnement responsive par composant.

Chargement de l'outil...

Qu'est-ce que Calculateur d'unités de conteneur ?

Les unites de requete de conteneur fonctionnent comme les unites de viewport mais sont relatives a un conteneur de requete plutot qu'au viewport. cqi represente 1% de la taille en ligne du conteneur, cqw represente 1% de la largeur du conteneur, cqb represente 1% de la taille en bloc du conteneur, cqmin et cqmax sont le min/max de cqi et cqb. Elles permettent un dimensionnement reactif au niveau du composant, ou un composant s'adapte a son conteneur, pas a la fenetre du navigateur.

Réponse rapide

Utilisez les unites de requete de conteneur (cqi, cqw, cqb, cqmin, cqmax) avec clamp() pour un dimensionnement reactif au niveau du composant. Elles fonctionnent comme les unites de viewport mais s'adaptent a la largeur du conteneur parent. Definissez container-type: inline-size sur le parent et utilisez l'expression clamp() dans les styles enfants.

Last updated: 2026-05-28

Limites

  • Les unites de requete de conteneur necessitent container-type sur un ancetre. Sans contexte de conteneur etabli, elles reviennent a un comportement relatif au viewport.
  • La prise en charge navigateur correspond a celle des conteneurs de requete : Chrome 105+, Firefox 110+, Safari 16+, Edge 105+.
  • Lorsque plusieurs ancetres conteneurs existent, l'ancetre le plus proche avec container-type est utilise.

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

Comment utiliser cet outil

  1. Saisissez les tailles cible minimale et maximale pour votre propriete CSS en pixels.
  2. Definissez la plage de largeur du conteneur - la largeur minimale du conteneur ou la propriete atteint son minimum, et la largeur maximale ou elle atteint son maximum.
  3. Choisissez une unite de requete de conteneur et le nom de la propriete CSS.
  4. Copiez l'expression clamp() et assurez-vous que l'element parent a container-type: inline-size.

A quoi il sert

  • Faire en sorte que la taille de police du titre d'une carte s'adapte a la largeur de la carte plutot qu'a la largeur du viewport.
  • Creer un remplissage de composant qui s'adapte a l'espace disponible du conteneur.
  • Construire des widgets de tableau de bord ou chaque element s'adapte proportionnellement au conteneur du widget.

Cas d'usage

Exemples concrets

Exemple

Titre de carte s'adaptant au conteneur

Un composant de carte doit avoir une taille de police de titre de 16px a 320px de largeur de conteneur et de 32px a 800px. Utilisez cqi pour adapter le titre au conteneur de la carte.

Exemple

Remplissage reactif de composant

une boite d'information doit avoir 16px de remplissage a 300px de largeur de conteneur et 40px a 1000px. Utilisez la calculatrice avec cqi et copiez l'expression clamp().

Erreurs frequentes

  • Utiliser les unites de requete de conteneur sans definir container-type sur un parent - le navigateur utilise le bloc contenant initial (viewport), ce qui annule l'objectif.
  • S'attendre a ce que les unites de requete de conteneur fonctionnent comme les unites de viewport - elles sont relatives au conteneur de requete le plus proche, qui peut etre de taille tres differente.
  • Utiliser les unites de requete de conteneur dans un composant profondement imbrique ou le conteneur le plus proche n'est pas la reference prevue.

Vérification

  1. Testez le composant a differentes largeurs de conteneur en redimensionnant l'element parent et en verifiant que la propriete s'adapte correctement.
  2. Verifiez dans le panneau Calcule des outils de developpement que l'expression clamp() se resolvent aux valeurs prevues.

FAQ

Questions sur Calculateur d'unités de conteneur

Quelle est la difference entre cqi et cqw ?

cqi represente 1% de la taille en ligne du conteneur - dans les modes d'ecriture horizontaux, cela equivaut a la largeur du conteneur. cqw est toujours 1% de la largeur du conteneur quel que soit le mode d'ecriture. Pour la plupart des sites en alphabet latin, ils sont identiques.

Les unites de requete de conteneur fonctionnent-elles sans les requetes @container ?

Oui. Les unites de requete de conteneur fonctionnent des qu'un element parent a container-type defini. Vous n'avez pas besoin d'une regle @container pour utiliser les unites.

Que se passe-t-il s'il n'existe aucun ancetre conteneur ?

Le navigateur utilise le bloc contenant initial (viewport) comme repli. Cela signifie qu'un clamp() utilisant cqi se comporte comme vw lorsqu'aucun contexte de conteneur n'est trouve.

Outils lies

Autres outils outils css

A essayer aussi

A essayer aussi