🎯 Objectifs de cet exercice :
Dans ce 7ème cours, partie B, vous allez découvrir les Container Queries (requêtes de conteneur).
📦 Différence avec les Media Queries :
- Media Queries : Réagissent à la taille de la fenêtre du navigateur (viewport)
- Container Queries : Réagissent à la taille du conteneur parent de l'élément
🔧 Comment ça fonctionne :
-
container-type: inline-size: Active les container queries sur le conteneur parent. La largeur du conteneur devient une référence pour les styles des éléments enfants. -
@container (min-width: 500px): Similaire à@mediamais basé sur la taille du conteneur parent plutôt que sur la fenêtre.
💡 Exemple :
- Si la largeur du conteneur parent atteint 500px, le fond de la boîte devient vert
- Si la largeur atteint 700px, le fond devient corail et la taille de police augmente
⚠️ Compatibilité navigateurs : Fonctionne sur Chrome, Edge et Safari (pas encore sur Firefox à ce jour)
🧪 Testez : Redimensionnez votre navigateur pour voir la boîte changer de couleur selon la taille de son conteneur !