On a longtemps fait du responsive avec des media queries et un peu de flexbox. En 2025, le navigateur nous donne des outils bien plus fins — et certains d'entre eux changent profondément la manière dont on architecte une interface.
Container queries : la révolution silencieuse
Les media queries répondent à la taille de la fenêtre. Les container queries, elles, répondent à la taille du conteneur parent. En apparence anodin, en pratique : révolutionnaire.
Un composant carte peut maintenant adapter son layout selon l'espace qu'on lui donne — qu'il soit dans une sidebar de 280px ou dans une grille pleine largeur. Plus besoin de créer des variantes spécifiques à chaque contexte.
Viewport units dynamiques : adieu 100vh
La barre d'adresse mobile qui apparaît et disparaît a longtemps rendu 100vh inutilisable sur iOS. Avec svh (small viewport height), lvh (large) et dvh (dynamic), on peut enfin cibler précisément le comportement voulu.
svh: hauteur avec la barre visible (conservatrice)lvh: hauteur sans la barre (peut déborder)dvh: s'adapte dynamiquement — idéal pour les full-screen layouts
Subgrid : l'alignement inter-composants
Le problème classique : deux cartes côte à côte dont les titres ne s'alignent pas parce que l'une a un texte plus long. Subgrid résout ça en laissant les enfants participer à la grille parente.
Avec un support navigateur désormais universel, c'est la fin des hacks avec min-height calculés à la main.
Ce qu'on change dans nos pratiques
Ces trois outils nous ont conduit à repenser la structure de nos composants. On part maintenant d'une logique composant-first : chaque bloc doit fonctionner dans n'importe quel conteneur, sans connaître son contexte. Les media queries deviennent la couche de dernier recours, pas le point de départ.
Une idée à creuser ensemble ?
On adore parler design, produit et stratégie. Écrivez-nous, on vous répond sous 24 h.