An Interactive Guide to #CSS #Container_Queries
▻https://ishadeed.com/article/css-container-query-guide
CSS container queries help us to write a truly #fluid #components that change based on their container size. In the next few years, we’ll see less media queries and more container queries. Of course, using media queries will still be useful for general layout stuff.
#CSS #container_queries are finally here - Ahmad Shadeed
►http://ishadeed.com/article/container-queries-are-finally-here
Avec pas mal d’exemples intéressants par ici ▻https://lab.ishadeed.com/container-queries
Une pagination qui s’adapte bien aux petits écrans ▻https://lab.ishadeed.com/container-queries/pagination
Un bloc article qui passe de a card au « hero » ▻https://lab.ishadeed.com/container-queries/article
Pas encore dispo sous firefox malheureusement...
En lien avec ▻https://seenthis.net/messages/971675
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
