Adapter un bloc à son conteneur
Objectif : Faire basculer la présentation des conseils de l’atelier selon la largeur réelle de leur conteneur.
Une section de conseils peut être étroite dans une colonne latérale et large lorsqu’elle occupe davantage de place. Une règle fondée uniquement sur la largeur de la fenêtre ne sait pas distinguer ces deux situations : elle peut changer la présentation au mauvais moment. Vous allez faire dépendre la liste de conseils de la largeur disponible dans sa propre zone de mise en page.
Vous avez déjà réparti les styles par responsabilités dans des couches et défini des variables de conception ; reportez-vous aux leçons correspondantes pour ces notions. Ici, vous allez donner à la section des conseils le rôle de conteneur, puis appliquer une présentation à sa liste lorsque ce conteneur atteint une largeur suffisante.
Définir la zone qui fournit la mesure
Une requête de conteneur ne mesure pas automatiquement n’importe quel ancêtre : un élément doit d’abord établir un contexte de conteneur. Pour une adaptation fondée sur sa largeur, utilisez container-type: inline-size. Cette déclaration active le containment sur l’axe en ligne, qui correspond généralement à la largeur dans les écritures gauche-droite ; le navigateur peut alors évaluer la taille de cet élément sans dépendre de celle de ses descendants.
Attribuez également un nom, ici conseils, avec container-name. Le nom permet à la règle @container de cibler précisément ce contexte, plutôt qu’un autre conteneur éventuellement ajouté plus tard dans la page. Placez la requête sur les éléments descendants dont vous voulez changer la disposition : le conteneur ne peut pas se mettre en page lui-même en réponse à sa propre requête.
Page complète de l’atelier
Le HTML de référence conserve ses classes et sa structure. Enregistrez-le dans index.html, puis placez les styles ci-dessous dans style.css. La mise en page générale permet aux colonnes de s’ajuster à l’espace ; c’est ensuite la largeur effective de la section .atelier-tips, et non une largeur de fenêtre choisie à l’avance, qui décide du passage de la liste en deux colonnes.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Atelier de jardinage</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="atelier-page">
<header class="atelier-header">
<p class="atelier-header__sur-titre">Atelier pratique</p>
<h1 class="atelier-header__titre">Jardiner au fil des saisons</h1>
<p class="atelier-header__intro">Apprenez des gestes simples pour cultiver votre jardin.</p>
</header>
<main class="atelier-layout">
<section class="atelier-hours" aria-labelledby="horaires-titre">
<h2 class="atelier-hours__titre" id="horaires-titre">Horaires</h2>
<ul class="atelier-hours__liste">
<li>Lundi au vendredi : 9 h à 17 h</li>
<li>Samedi : 10 h à 14 h</li>
</ul>
<p class="atelier-hours__note">Inscription recommandée avant votre venue.</p>
</section>
<section class="atelier-tips" aria-labelledby="conseils-titre">
<h2 class="atelier-tips__titre" id="conseils-titre">Conseils pratiques</h2>
<ul class="atelier-tips__liste">
<li class="atelier-tips__item">Apportez des gants adaptés.</li>
<li class="atelier-tips__item">Prévoyez une gourde et des chaussures fermées.</li>
<li class="atelier-tips__item">Du matériel est prêté sur place.</li>
</ul>
</section>
<address class="atelier-contact atelier-contact--accent">
<h2 class="atelier-contact__titre">Nous contacter</h2>
<p class="atelier-contact__texte">Une question sur les inscriptions ?</p>
<a class="atelier-contact__lien" href="mailto:[email protected]">[email protected]</a>
</address>
</main>
</div>
</body>
</html>Conteneur nommé et règle conditionnelle
@layer base, layout, composants;
:root {
--color-ink: #23352b;
--color-paper: #f7f4e9;
--color-leaf: #39734b;
--space-section: 3rem;
--space-2: 0.5rem;
--space-4: 1rem;
--space-6: 1.5rem;
--content-width: 70rem;
}
@layer base {
body {
margin: 0;
color: var(--color-ink);
background: var(--color-paper);
font-family: system-ui, sans-serif;
line-height: 1.5;
}
}
@layer layout {
.atelier-page {
width: min(100% - 2 * var(--space-6), var(--content-width));
margin-inline: auto;
padding-block: var(--space-section);
}
.atelier-layout {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
gap: var(--space-6);
align-items: start;
}
.atelier-header {
margin-block-end: var(--space-section);
}
}
@layer composants {
.atelier-header__sur-titre {
color: var(--color-leaf);
font-weight: 700;
}
.atelier-header__titre {
max-width: 18ch;
font-size: clamp(2rem, 1.4rem + 3vw, 3.5rem);
line-height: 1.1;
}
.atelier-header__intro {
max-width: 60ch;
}
.atelier-hours,
.atelier-tips,
.atelier-contact {
min-width: 0;
padding: var(--space-6);
border: 1px solid var(--color-leaf);
border-radius: var(--space-2);
background: #fff;
}
.atelier-hours__liste,
.atelier-tips__liste {
margin: 0;
padding-inline-start: var(--space-6);
}
.atelier-hours__note {
margin-block-end: 0;
}
.atelier-tips {
container-name: conseils;
container-type: inline-size;
}
.atelier-tips__liste {
display: grid;
gap: var(--space-4);
}
.atelier-contact--accent {
border-color: var(--color-leaf);
background: #e8f2e9;
font-style: normal;
}
.atelier-contact__lien {
color: var(--color-leaf);
overflow-wrap: anywhere;
}
}
@container conseils (min-width: 36rem) {
.atelier-tips__liste {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}Aperçu appliqué au document HTML de cette leçon : la règle CSS est injectée dans la page pour voir son effet réel.
La section porte à la fois le nom de conteneur et le type de containment nécessaire à la mesure de sa largeur. La requête @container conseils (min-width: 36rem) s’applique lorsque ce conteneur nommé mesure au moins 36rem sur l’axe en ligne. En dessous du seuil, la liste reste sur une colonne ; à partir du seuil, la grille distribue les conseils sur deux colonnes, chacune pouvant rétrécir sans imposer un débordement.
Vérifier le seuil dans la page
Pour vérifier le comportement, inspectez la section des conseils dans les outils de développement et observez sa largeur calculée, pas seulement celle de la fenêtre. Faites varier la largeur disponible dans son parent : sous 36rem, la liste doit rester empilée ; au-dessus, elle doit présenter deux colonnes. Si la section n’atteint jamais le seuil dans votre mise en page, abaissez-le ou donnez davantage d’espace à cette section, selon le résultat recherché.
Le seuil est une décision de conception, pas une valeur universelle. Réglez-le en fonction de la longueur des conseils et de la largeur nécessaire pour les lire confortablement. Les requêtes de conteneur complètent les adaptations liées à la fenêtre : elles conviennent aux composants qui doivent rester cohérents lorsqu’ils sont déplacés ou réutilisés dans des zones de tailles différentes.
À retenir
- Déclarez
container-type: inline-sizesur l’élément dont la largeur doit servir de référence. - Nommez le conteneur pour cibler explicitement le contexte avec
@container. - Modifiez les descendants du conteneur, pas le conteneur lui-même en réponse à sa propre requête.
- Choisissez et vérifiez le seuil selon la largeur réelle disponible et la lisibilité du contenu.
Dans la prochaine leçon, vous chargerez les polices de la page en maîtrisant leur déclaration et leur stratégie d’affichage.