Qu'est-ce que Generateur de container queries CSS ?
Generateur de container queries CSS est un outil dans le navigateur pour cette tâche : Générez des règles @container CSS pour un design responsive base sur les composants. La sortie reste lisible afin de la vérifier avant de l'utiliser sur un site publié.
Quick answer
Use container queries to style an element based on the size of its parent container instead of the viewport. They are the component-level equivalent of media queries and are useful for reusable widget layouts.
Limitations
- Container queries require Chrome 105+, Edge 105+, Firefox 110+, and Safari 16+. Older browsers ignore the feature entirely.
- The container-name property must reference a container-type ancestor in the DOM. Elements outside the container tree cannot query it.
- Container query units (cqw, cqh, cqi, cqb, cqmin, cqmax) are only meaningful inside a @container block and may produce unexpected values outside one.
Comment utiliser cet outil
- Ouvrez l'outil et saisissez les valeurs utiles.
- Vérifiez la sortie dans le panneau de résultat.
- Copiez seulement la partie adaptéeà votre page.
- Testez la modification avant publication.
A quoi il sert
- Gagner du temps sur les tâches de publication récurrentes.
- Préparer markup, CSS ou checklist avant lancement.
- Eviter les petites erreurs faciles a manquer sur un site statique.