Règles @container et points d’arrêt
Écrivez des règles @container qui appliquent des styles lorsque le conteneur atteint certaines dimensions.
Règles @container et points d’arrêt est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
@container : syntaxe de la règle
@container est la règle at-rule qui applique des styles lorsqu'un conteneur remplit certaines conditions de taille. Sa syntaxe reprend celle des requêtes de média :
<div class="wrapper"><div class="box">Styled once container ≥ 400px wide</div></div>
Requêtes de conteneur nommées
Ciblez un conteneur nommé précis :
<div class="sidebar">
<div class="nav-item">Dashboard</div>
<div class="nav-item">Settings</div>
</div>
Requêtes de conteneur à largeur maximale
Utilisez max-width pour appliquer des styles aux conteneurs plus petits :
<div class="wrapper"><div class="card">Compact card at narrow widths</div></div>
Requêtes de conteneur par plage
La syntaxe moderne des requêtes de conteneur prend en charge les plages :
<div class="wrapper"><div class="card"><span>Icon</span><span>Label</span></div></div>
Composant de carte adaptatif
Un composant de carte qui s’adapte en fonction de la largeur de son conteneur :
<div class="card-wrapper">
<div class="card">
<div class="card__image"></div>
<div class="card__body">Adaptive card content</div>
</div>
</div>
Requêtes de conteneur imbriquées
Les requêtes de conteneur peuvent être imbriquées. Par défaut, la requête interne fait référence à l’ancêtre conteneur le plus proche.
<div class="outer">
<div class="inner">
<div class="content">Nested container-aware content</div>
</div>
</div>
Points de rupture des requêtes de conteneur
Contrairement aux points de rupture de la fenêtre d’affichage, les points de rupture des conteneurs doivent être choisis en fonction du moment où la mise en page du composant doit changer, et non de tailles d’appareils arbitraires. Commencez par les largeurs minimales et maximales du contenu du composant.
Typographie dans les conteneurs
Adaptez la typographie aux petits conteneurs :
<div class="wrapper">
<h3 class="card-title">Adaptive Heading</h3>
<p class="card-text">Body copy that hides on very narrow containers.</p>
</div>
Requête de conteneur pour une mise en page en grille
Modifiez la grille interne d’un composant aux points de rupture du conteneur :
<div class="widget">
<div class="widget-grid">
<div>Tile 1</div>
<div>Tile 2</div>
</div>
</div>
Requêtes de style (au-delà de la taille)
Les requêtes de conteneur prennent également en charge les requêtes de style, qui vérifient les valeurs calculées des propriétés personnalisées. Cela permet de créer des variantes de composants pilotées par des variables CSS sans classes supplémentaires :
<div class="wrapper"><div class="card">Featured card styled via style query</div></div>
Vérification rapide
Que cible @container (min-width: 500px) ?
Récapitulatif
Les règles @container appliquent des styles aux éléments situés dans un conteneur lorsque celui-ci respecte certaines conditions de taille. Utilisez des conteneurs nommés pour cibler des ancêtres précis. Les points de rupture des conteneurs doivent être fondés sur les besoins du contenu, et non sur les tailles des appareils. Les requêtes de style étendent les requêtes de conteneur en vérifiant les valeurs des variables CSS, ce qui permet de créer de puissantes variantes de composants déclaratives.
Questions Fréquemment Posées
La leçon « Règles @container et points d’arrêt » est-elle gratuite ?
Oui — le texte complet de « Règles @container et points d’arrêt » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Règles @container et points d’arrêt » ?
Écrivez des règles @container qui appliquent des styles lorsque le conteneur atteint certaines dimensions. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer CSS Academy ?
Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Règles @container et points d’arrêt » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?
Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- container-type et container-name
- Règles @container et points d’arrêt
- Unités de requête de conteneur : cqw et cqh
- Requêtes de conteneur ou requêtes média