CSS container queries are finally here

même quand dispo sur FF faudra quand même attendre que ce soir sur 98% des navs ou ce genre pour l’utiliser en prod comme il faut :)

mais ENFIN, à partir de là, yora quasiment plus jamais besoin des media queries, très peu souvent quoi, et les composants (card, footer, pagination, listes, etc) seront totalement autonomes et vraiment responsives, sans être dépendants d’aucun breakpoints généraux

l’article initial qui annonçait les @container query avec 5 ou 6 cas d’usage très parlants : ▻https://ishadeed.com/article/say-hello-to-css-container-queries
En attendant que tous les navigateurs soient compatibles, (mais qu’est-ce qu’ils attendent chez Mozilla ???) des pistes de fall-back : ▻https://moderncss.dev/container-query-solutions-with-css-grid-and-flexbox

Et la suite, les « style queries » ▻https://ishadeed.com/article/css-container-style-queries

Un peu de lecture au sujet des container queries :

►https://ishadeed.com/article/container-queries-are-finally-here
▻https://www.oddbird.net/2022/08/18/cq-syntax

#css #intégration #web

Arg, par contre ça ne peut pas être utilisé pour gérer des images reponsives, pour optimiser mon plugin correspondant avec des media= et des srcset= en fonction de la largeur l’affichage de l’image sans attendre javascript.

Comme ces éléments sont conçus pour faciliter le préchargement (preload) des images avant le rendu de la page, ils ne peuvent pas être adaptés à des container queries.