container-type et container-name
Définissez des conteneurs de requête à l’aide de container-type et donnez-leur un nom avec container-name.
container-type et container-name est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 1 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.
Que sont les requêtes de conteneur ?
Les requêtes de conteneur permettent à CSS d'appliquer des styles en fonction de la taille d'un conteneur parent plutôt que de la fenêtre d'affichage. Elles permettent une conception véritablement adaptative au niveau des composants, où un composant s'adapte à l'endroit où il est placé.
Le problème résolu par les requêtes de conteneur
Avec les requêtes de média, un composant carte placé dans une barre latérale de 300px ne peut pas savoir qu'il est petit — il sait seulement que la fenêtre d'affichage est large. Les requêtes de conteneur permettent au composant de réagir à la taille de son propre conteneur, et non à celle de la fenêtre d'affichage globale.
container-type
Pour interroger un conteneur, déclarez-le d'abord comme conteneur de requête à l'aide de container-type :
<div class="card-wrapper">This wrapper can now be queried for its own width via @container.</div>
Valeurs de container-type
Valeurs disponibles :
inline-size— active les requêtes sur la dimension en ligne du conteneur (la largeur pour une écriture horizontale)size— active les requêtes sur les dimensions en ligne et en bloc (la largeur et la hauteur)normal— valeur par défaut, aucune requête de taille, mais les requêtes de style restent possibles
container-name
Donnez un nom à un conteneur pour le référencer dans les requêtes. Cela est nécessaire lorsque des conteneurs imbriqués existent et que vous souhaitez interroger un ancêtre précis :
<div class="sidebar">Named container: "sidebar"</div>
Raccourci container
Le raccourci container définit à la fois le nom et le type :
<div class="card-grid">Container named "card-grid", type inline-size.</div>
Pourquoi utiliser des conteneurs sans nom
Un conteneur sans nom peut tout de même être interrogé — la règle @container cible par défaut l'ancêtre conteneur le plus proche. Les noms sont nécessaires uniquement lorsque vous souhaitez passer directement à un ancêtre précis.
Considération de performances
Chaque élément container-type bénéficie de sa propre isolation de mise en page. Cela signifie que les changements de taille à l'intérieur du conteneur n'affectent pas les ancêtres — un avantage pour les performances. Le navigateur n'a pas besoin de recalculer toute la page lorsque le conteneur change.
Relation avec la propriété contain
La définition de container-type: inline-size définit implicitement contain: inline-size layout style sur l'élément. Cela empêche la taille du conteneur d'affecter sa propre mise en page — ce qui est nécessaire au fonctionnement des requêtes de taille.
Configuration d'un exemple pratique
Configuration complète d'une requête de conteneur :
<div class="article-grid">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
</div>
Requêtes de conteneur et requêtes de média
Utilisez les conteneurs pour : l'adaptation au niveau du composant, les composants réutilisables dans différents contextes de mise en page, les cartes et éléments interactifs placés dans des emplacements inconnus. Utilisez les requêtes de média pour : les changements de mise en page globale, la mise à l'échelle de la typographie, l'affichage ou le masquage de grandes sections.
Vérification rapide
Quelle valeur de propriété rend un élément interrogeable selon sa largeur à l'aide des règles @container ?
Récapitulatif
container-type: inline-size définit un élément comme conteneur de requête pour sa largeur. Utilisez container-name pour nommer les conteneurs et les cibler sélectivement. Le raccourci container définit les deux. Les requêtes de conteneur résolvent le problème du composant placé dans un contexte inconnu que les requêtes de média basées sur la fenêtre d'affichage ne peuvent pas gérer.
Questions Fréquemment Posées
La leçon « container-type et container-name » est-elle gratuite ?
Oui — le texte complet de « container-type et container-name » 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 « container-type et container-name » ?
Définissez des conteneurs de requête à l’aide de container-type et donnez-leur un nom avec container-name. 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 1 sur 4.
Combien de temps prend la leçon « container-type et container-name » ?
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