Mobile-first signifie écrire vos styles de base pour l'écran le plus petit, puis ajouter de la complexité pour les écrans plus grands avec des media queries min-width — plutôt que de commencer au bureau et de tout retirer.
{ : grid; : ; }
(: ) {
{ : fr fr; }
}
(: ) {
{ : fr fr fr; }
}
Pourquoi mobile-first gagne : le CSS de base reste minimal (mobile obtient uniquement ce dont il a besoin — bon pour les performances sur les appareils plus faibles), et vous construisez de la complexité, ce qui est plus facile à comprendre que de la contourner/retirer. Cela correspond aussi à la façon dont le contenu reflue naturellement d'une colonne à plusieurs.
Les media queries répondent à la fenêtre d'affichage — toute la fenêtre. Mais un composant réutilisable (disons une carte) peut apparaître dans une zone principale large ou une barre latérale étroite sur la même page. La largeur de la fenêtre d'affichage ne peut pas vous dire quelle place le composant a réellement.
.card-wrapper {
container-type: inline-size; /* declare it a query container */
}
/* style the card based on the CONTAINER's width, not the viewport */
@container (min-width: 400px) {
.card { display: grid; grid-template-columns: auto 1fr; }
}
Maintenant, la même carte bascule automatiquement vers une disposition horizontale chaque fois que son conteneur fait ≥400px — que ce soit parce que l'écran est grand ou parce qu'elle se trouve dans une colonne large. Le composant devient vraiment indépendant du contexte et réutilisable.
Mobile-first maintient le CSS responsive léger et maintenable.
Les container queries sont une avancée majeure : elles permettent aux composants de réagir à l'espace disponible qui leur est propre, ce qui est exactement ce dont vous avez besoin dans une architecture basée sur les composants (systèmes de conception, cartes/widgets réutilisables) où le même composant se retrouve dans de nombreux contextes.