Créer une container query nommée et régler l’aperçu

Nommez le conteneur, choisissez container-type et une condition de largeur, puis faites glisser l’aperçu : l’indicateur donne la largeur de la boîte de contenu et l’état réel de correspondance, et l’export est la règle @container complète. Un intervalle garde les nombres saisis — un minimum au-dessus du maximum ne correspond à rien et l’indicateur le dit.

Fonctionne localement dans votre navigateur

Voir la catégorie: Frontend et design (34)

· type de conteneur · nom du conteneur · @container

CONTRÔLES DE REQUÊTE

type de conteneur

largeur minimale (px)

largeur maximale (px)

620px

APERÇU DE TAILLE

01Contrat d'API

02Sortie de compilation

03Vérification à l'exécution

04Notes de version

EXPORTER LE CSS

Créer et tester une requête de conteneur

Nommez le conteneur, choisissez container-type et une condition de largeur, puis faites glisser l’aperçu : l’indicateur affiche la largeur de la boîte de contenu du conteneur et indique si la requête correspond à cet instant. Le panneau d’export contient tout le CSS — la déclaration .component-shell avec container-type et container-name, plus le bloc @container qui bascule la grille sur le nombre de colonnes choisi.

Tous les chiffres de cette page ont été mesurés pendant les tests : l’indicateur correspondait à la grille rendue dans les 11 états au clavier, les huit valeurs par défaut sont card-shell / inline-size / min / 480 / 760 / 620 px / 3 colonnes / 16 px, et le bouton Copier CSS a écrit exactement le texte affiché (comparaison via le presse-papiers).

Saisissez un nom de conteneur (32 caractères maximum) et choisissez container-type : inline-size ou size. Le nom passe en minuscules, les espaces et signes deviennent -, et un chiffre en tête reçoit le préfixe x-.

Choisissez la condition — largeur minimale, largeur maximale ou intervalle de largeur — puis saisissez les valeurs min-width / max-width à écrire dans la règle.

Faites glisser Largeur d’aperçu entre 220 et 900 px. L’indicateur suit le mouvement : « Correspond » signifie que la règle de grille s’applique dans l’aperçu, « Ne correspond pas » qu’elle ne s’applique pas.

Réglez Colonnes lorsqu’elles correspondent (1–4) et Écart (0–64 px). Les deux valeurs sont bornées à ces plages dans l’aperçu comme dans le CSS exporté.

Cliquez sur Copier CSS et collez le résultat ; Réinitialiser remet card-shell, inline-size, min, 480, 760, 620 px, 3 colonnes et 16 px.

Ce que l’aperçu mesure, les nombres que le CSS conserve et ce que l’outil ne couvre pas

Ce que l’aperçu mesure

L’indicateur compte la boîte de contenu du conteneur : les 13 px de marge intérieure de chaque côté sont exclus, un aperçu de 620 px affiche donc 620px. La requête mesure cette même boîte, d’où leur accord. « Correspond » place les quatre cartes sur le nombre de colonnes choisi, « Ne correspond pas » les laisse sur une seule colonne.

La scène borne aussi l’aperçu : dans une fenêtre de 1360 px, le curseur va jusqu’à 900, mais l’aperçu s’arrête à 878 px et l’indicateur annonce 878px, pas la valeur demandée. container-type: size conserve la hauteur déjà présente (204 px sur une ligne, 352 px empilée) pour que la démonstration ne s’effondre pas sous le confinement de taille.

Les nombres saisis sont ceux qui sortent

Les deux champs de largeur sont indépendants. Un intervalle exporte les deux valeurs telles quelles : min 1000 avec max 300 écrit (min-width: 1000px) and (max-width: 300px), qui ne peut jamais correspondre, et l’indicateur affiche « Ne correspond pas » au lieu de réécrire la règle en silence. Le mode maximum n’utilise que le champ max : min-width ne s’y glisse plus.

Colonnes et écart sont bornés à ce que permettent les contrôles : saisir 7 colonnes exporte repeat(4, minmax(0, 1fr)) et 80 px exporte gap: 64px, les valeurs mêmes que rend l’aperçu. Copier CSS place ce texte exact dans le presse-papiers et Réinitialiser remet les huit valeurs par défaut.

Ce que l’outil ne fait pas

Il couvre un conteneur nommé et uniquement des conditions de largeur : min-width, max-width ou un intervalle. Pas de style queries, pas de scroll-state queries, pas de requête de hauteur seule, pas de second conteneur ; le CSS affiché est un squelette d’exemple — .component-shell et .component-grid — à renommer pour votre balisage.

Rien ne quitte la page. Pendant les tests, déplacer les contrôles et copier le CSS n’a déclenché aucune requête du navigateur, et le bandeau l’indique. Les mots de l’indicateur sont traduits dans les six langues, y compris le français Correspond / Ne correspond pas et le japonais 一致 / 一致しない.