Depuis qu'il y a le responsive web design, les développeurs s'interrogent sur la possibilité de concevoir des éléments DOM en fonction de leur taille réelle et non de la taille de la fenêtre d'affichage du navigateur (à l'aide de media queries ). En fait, les requêtes de conteneur (initialement les requêtes d'éléments) sont probablement la fonction CSS la plus demandée que les navigateurs n'ont toujours pas .
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 dans les superpositions, les fenêtres contextuelles, les barres latérales ou les éléments personnalisés - même maintenant, par exemple, avec le script ci-dessus.