6. Déclarer un contexte de conteneur
Tu fais survivre PulsaConf aux telephones, tablettes et grands écrans. Permets à la carte de répondre à l'espace de son parent plutôt qu'à la fenêtre entière. Applique ce choix à .panel, puis vérifie que le rendu tient a 375 px, respire sur desktop et reste fluide.
Objectifs de la leçon
- Implémenter 6. Déclarer un contexte de conteneur sans perdre le scenario PulsaConf.
- Relier container-type au risque : un design pense desktop force le zoom, le scroll horizontal ou des lignes illisibles.
- Prouver que le rendu tient a 375 px, respire sur desktop et reste fluide.
Intention
Tu fais survivre PulsaConf aux telephones, tablettes et grands écrans. Permets à la carte de répondre à l'espace de son parent plutôt qu'à la fenêtre entière. Applique ce choix à .panel, puis vérifie que le rendu tient a 375 px, respire sur desktop et reste fluide.
container-type doit repondre à une contrainte visible, pas décorer au hasard.
Méthode
Cible .panel, ajoute une declaration utile, puis inspecte la règle active.
Le risque a éviter est : un design pense desktop force le zoom, le scroll horizontal ou des lignes illisibles.
Validation
6. Déclarer un contexte de conteneur est termine quand les tests passent et que le rendu tient a 375 px, respire sur desktop et reste fluide.
Relis aussi le focus, les textes longs et le petit écran.
Vocabulaire lié
- container-type — Propriété ou motif CSS valide dans cette étape.
- .panel — Sélecteur cible pour limiter les effets de bord.
- responsive — Capacité à rester utilisable selon les contraintes d'écran et de contenu.
Validation
- Je sais appliquer container-type.
- Je prouve que le rendu tient a 375 px, respire sur desktop et reste fluide.
- Je peux expliquer le choix.