CSS Container Query
Generator
Construisez visuellement des requêtes de conteneur @container avec interface graphique. Paramètres container-type, points d'arrêt, 6 préréglages et convertisseur.
Paramètres du conteneur
Préréglages
Points d'arrêt
Aperçu en direct
Code généré
🔄 Media Query → Container Query
À propos du Générateur Container Query CSS
Le générateur de requêtes de conteneur CSS est un outil de développement qui vous permet de créer visuellement des requêtes "@container", le nouveau standard du design responsive, à l'aide d'une interface graphique. Alors que les requêtes multimédias dépendent de la largeur de la fenêtre d'affichage, les requêtes de conteneur dépendent de la largeur de l'élément parent, ce qui permet des mises en page flexibles par composant.
Cet outil gère de manière transparente les paramètres du conteneur, l'ajout de points d'arrêt et les aperçus en direct. Il propose également une fonction de conversion par lots pour les requêtes multimédias existantes, facilitant la transition vers la nouvelle norme. Tout s'exécute en toute sécurité dans votre navigateur.
Comment l'utiliser
Configurer le conteneur
Définissez le sélecteur du conteneur et container-type. Ajoutez des points d'arrêt pour changer le CSS.
Aperçu en direct
Faites glisser le bord droit de l'aperçu pour redimensionner le conteneur et tester les styles.
Exporter le code
Copiez le CSS ou utilisez le convertisseur pour migrer vos Media Queries.
Glossaire Container Query
- Container Query (@container)
- Fonction CSS permettant de modifier les styles en fonction de la taille d'un élément parent (conteneur) spécifique plutôt que de la fenêtre d'affichage.
- container-type
- Propriété qui définit un élément comme conteneur de requête. inline-size cible l'axe horizontal ; size cible les deux axes.
- container-name
- Propriété permettant de nommer explicitement un conteneur, utile lorsque plusieurs conteneurs sont imbriqués.
- Containment (Confinement)
- Un concept requis pour les requêtes de conteneur, isolant les calculs de mise en page/style d'un élément du reste du DOM.
- Axe en ligne (Inline-axis)
- L'axe le long duquel le texte s'écoule. En écriture horizontale, cela correspond à la largeur.
- Media Query (@media)
- Fonction CSS traditionnelle qui applique des styles en fonction de la taille de la fenêtre d'affichage ou des caractéristiques de l'appareil.
- cqw / cqh / cqi / cqb
- Unités relatives pour les requêtes de conteneur représentant 1 % de la dimension du conteneur, similaires à vw/vh.
Foire Aux Questions
- Q.Mes données sont-elles envoyées à un serveur ?
- Non, cet outil fonctionne entièrement côté client (navigateur).
- Q.Quand utiliser une Container Query ?
- Pour les composants (cartes, boutons) qui doivent s'adapter à l'espace disponible, plutôt qu'à l'écran entier.
- Q.Quelle est la compatibilité ?
- Supporté par tous les navigateurs modernes depuis 2023 (Chrome 105+, Safari 16+).
- Q.Quelles sont les précautions à prendre avec container-type: size ?
- Lors de l'utilisation de size, un confinement sur l'axe de bloc (hauteur) est appliqué. Si vous ne définissez pas de hauteur explicite, l'élément risque de s'effondrer à une hauteur de zéro. Il est généralement recommandé d'utiliser inline-size.
- Q.Comment le HTML est-il isolé ?
- Nous utilisons le Shadow DOM pour éviter les conflits CSS.
Cas d'utilisation
Cartes réutilisables
Parfait pour concevoir des interfaces utilisateur de cartes autonomes qui s'adaptent à n'importe quel conteneur.
Intégration CMS
Créez des blocs pour des CMS comme WordPress qui ajustent automatiquement leur mise en page indépendamment de la largeur de la zone du widget.
Interfaces de tableau de bord complexes
Idéal pour optimiser dynamiquement le placement des graphiques et des statistiques dans des panneaux de tableau de bord redimensionnables.
Modernisation
Utilisez le convertisseur pour transformer des blocs massifs de requêtes multimédias en requêtes de conteneur maintenables.
Documentation technique
Les Container Queries sont réalisées en combinant la règle @container et la propriété container-type.
Envoyer des commentaires
Faites-nous part de vos réflexions pour nous aider à améliorer l'outil.
Les commentaires sont temporairement suspendus
Le serveur est occupé ou la protection anti-spam est active. Veuillez réessayer plus tard.