Responsive Components: a Solution to the Container Queries Problem — Philip Walton
▻https://philipwalton.com/articles/responsive-components-a-solution-to-the-container-queries-problem
This article describes a strategy for using modern web technologies to build responsive components: DOM elements that can update their style and layout in response to changes in the size of their container.
Mouais pas aussi cool que ce que je pensais à la base.
Ça oblige à définir des breakpoints dans le JS en plus en doublon. Et ça oblige aussi à mettre dans le HTML lui-même les éléments qu’on veut observer pour leur rajouter des classes suivant les breakpoints. Du coup impossible de changer de thème sans changer le HTML (chose que l’on cherche à éviter au maximum).
En fait c’est une version/vision du problème…
ça fait quelques temps que je suis ce sujet et y’a pas mal de tendances, celle ci est un exemple… certainement que ça sent plus les habitudes de quelqu’un qui fait des applis mobiles et bosse avec React, du coup le html est plus marqué de toute façon…
Dans les autres tendances et stratégies sur le meme sujet :
Elements queries :
Le draft de la spec proposée :
▻https://tomhodgins.github.io/element-queries-spec/element-queries.html
Un petit tour d’horizon du sujet et de la problématique :
▻https://www.sitepoint.com/responsive-css-patterns-without-media-queries
Un polifyll, intérressant (regarder le src/resizeSensor.js) car a la différence de l’autre on utilise css
▻https://github.com/marcj/css-element-queries
Après synchroniser le js et le css … c’est un peut pour ça que j’ai regardé pour l’insertion des variables dans scss.php, après ne pas y avoir touché depuis 5ans ^^ c’est carrément le but…