Depuis l'avènement du responsive web design, les développeurs réclament la possibilité de styliser les éléments DOM en fonction de leur taille réelle plutôt que de celle de la fenêtre du navigateur (via les media queries ). De fait, les media queries (anciennement media queries) sont probablement la fonctionnalité CSS la plus demandée et qui fait encore défaut aux navigateurs.
Il y a déjà beaucoup , beaucoup , beaucoup de messages qui expliquent exactement pourquoi les requêtes de conteneurs sont difficiles à mettre en œuvre en CSS et pourquoi les fabricants de navigateurs hésitent à les mettre en œuvre. Si vous voulez en profiter maintenant, un peu de JavaScript peut vous aider:
c51c33e1533e68c3f8fd24633700789f
Le tout ressemble alors à ça:
See the Pen by David Vielhuber (@vielhuber) on CodePen.
Les attributs points d'arrêt , sélecteur et style permettent de définir les différents points d'arrêt, le sélecteur automatique et le type de classes ajoutées. Si vous utilisez le script, vous pouvez adresser les classes nouvellement générées comme suit:
c51c33e1533e68c3f8fd24633700789f
L'utilisation de requêtes de conteneur est particulièrement intéressante pour les éléments des superpositions, des popups, des barres latérales ou des éléments personnalisés - même maintenant, par exemple, avec le script ci-dessus.