Conseils concernant les outils de développement: inspecter les requêtes de conteneur CSS

Sofia Emelianova
Sofia Emelianova

Les requêtes de conteneur CSS sont une nouvelle fonctionnalité CSS qui enthousiasme les développeurs Web. Il pourrait déclencher une révolution dans la conception Web, du responsive design basé sur les pages au responsive design basé sur les conteneurs.

Les outils pour les développeurs Chrome sont là pour vous aider à adopter de nouveaux modèles de conception de mise en page et à rester au fait des dernières tendances. Grâce à cette fonctionnalité CSS, vous pouvez désormais inspecter et déboguer vos requêtes de conteneur dans DevTools.

La vidéo ci-dessus présente les requêtes de conteneur, leur syntaxe et comment les inspecter dans DevTools.

Vous pouvez désormais découvrir les éléments de conteneur et leurs descendants à l'aide du badge correspondant qui active une superposition en pointillés.

Badge du conteneur.

Inspectez les règles @container appliquées aux descendants lorsque les conteneurs répondent aux conditions de requête.

Règle @container.

Pour en savoir plus sur la prise en charge des requêtes de conteneur dans DevTools, consultez Inspecter et déboguer les requêtes de conteneur CSS.