API CSS Layout et portée
Créez des algorithmes de mise en page personnalisés avec l’API CSS Layout et comprenez la portée et les limites de Houdini.
API CSS Layout et portée est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 4 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.
Présentation de CSS Houdini
CSS Houdini est un ensemble d’API de bas niveau qui exposent certaines parties du moteur de rendu CSS à JavaScript. Il comprend l’OM typé, l’API des propriétés et des valeurs, l’API de peinture, l’API de mise en page et le module d’animation. Ensemble, ces API permettent de créer des extensions CSS personnalisées.
Qu’est-ce que l’API CSS de mise en page ?
L’API CSS de mise en page permet aux développeurs de définir des algorithmes de mise en page personnalisés en JavaScript, qui peuvent être utilisés comme valeurs de la propriété CSS display. Vous pouvez créer des mises en page aussi puissantes que celles de Grid ou de Flexbox.
Structure d’un module de mise en page
Un module de mise en page implémente les méthodes intrinsicSizes() et layout(), puis s’enregistre avec registerLayout() :
<div class="masonry-container">
<div class="item" style="height: 60px;">1</div>
<div class="item" style="height: 100px;">2</div>
<div class="item" style="height: 40px;">3</div>
<div class="item" style="height: 80px;">4</div>
<div class="item" style="height: 120px;">5</div>
<div class="item" style="height: 50px;">6</div>
</div>
Utiliser une mise en page personnalisée
Référencez la mise en page enregistrée dans CSS :
<div class="masonry-container">
<div class="item" style="height: 60px;">1</div>
<div class="item" style="height: 100px;">2</div>
<div class="item" style="height: 40px;">3</div>
<div class="item" style="height: 80px;">4</div>
<div class="item" style="height: 120px;">5</div>
<div class="item" style="height: 50px;">6</div>
</div>
État de l’API de mise en page
L’API CSS de mise en page bénéficie d’une prise en charge limitée par les navigateurs et reste largement expérimentale (derrière des indicateurs d’activation dans Chrome). Aujourd’hui, il s’agit davantage d’une API de recherche et d’avenir que d’un outil de production. La mise en page en maçonnerie pourrait notamment être implémentée nativement dans les navigateurs.
Règle @scope
@scope est une fonctionnalité CSS plus récente (qui fait partie de la spécification sur la portée CSS) limitant la portée des règles CSS à un sous-arbre DOM précis, sans devoir ajouter des classes partout.
Syntaxe de @scope
Définissez une racine de portée et, éventuellement, une limite de portée :
<div class="card">
<p class="title">Scoped Title</p>
<p>Body text inside the card.</p>
</div>
@scope avec une limite
La limite de portée empêche les règles de correspondre aux éléments situés dans des composants imbriqués :
<div class="article">
<p>Article paragraph styled with 1.7 line-height by the scoped rule.</p>
<div class="advertisement">
<p>Ad paragraph is outside the scope limit, so it keeps the default line-height.</p>
</div>
</div>
Pseudo-classe :scope
Dans @scope, :scope désigne l’élément racine de la portée :
<div class="card is-hovered">
<p>Hover state applied statically for preview</p>
</div>
Compatibilité de @scope avec les navigateurs
@scope est pris en charge dans Chrome 118 et versions ultérieures, ainsi que dans Safari 17.4 et versions ultérieures. La prise en charge par Firefox est prévue prochainement. Utilisez-le avec @supports pour un déploiement sûr.
La vision plus large de Houdini
L’objectif de CSS Houdini est de rendre la plateforme web extensible : les développeurs peuvent ainsi ajouter des fonctionnalités directement à CSS au lieu d’attendre que les éditeurs de navigateurs les implémentent. Les API actuellement disponibles (OM typé, @property et API de peinture) sont les éléments les plus prêts pour la production de cette vision.
Vérification rapide
Quel effet @scope (.card) produit-il en CSS ?
Récapitulatif
CSS Houdini est un ensemble d’API qui exposent le moteur de rendu. L’API de mise en page permet de créer des algorithmes d’affichage personnalisés, mais reste largement expérimentale. @scope limite la portée des règles CSS à des sous-arbres DOM précis, ce qui empêche les fuites de styles sans imposer une convention de nommage BEM stricte. Les fonctionnalités de Houdini les plus prêtes pour la production sont l’OM typé, @property et l’API de peinture.
Questions Fréquemment Posées
La leçon « API CSS Layout et portée » est-elle gratuite ?
Oui — le texte complet de « API CSS Layout et portée » 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 « API CSS Layout et portée » ?
Créez des algorithmes de mise en page personnalisés avec l’API CSS Layout et comprenez la portée et les limites de Houdini. 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 4 sur 4.
Combien de temps prend la leçon « API CSS Layout et portée » ?
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
- Modèle d’objets typés CSS (OM)
- API des propriétés et valeurs CSS (@property)
- API CSS Paint : worklets
- API CSS Layout et portée