BP_4004_fr.md

Utiliser les compartiments CSS

Identifiants

GreenIT	V2	V3	V4

Catégories

Cycle de vie	Tiers	Responsable
3. Réalisation (fabrication / développement)	Utilisateur/Terminal	Architecte Logiciel/Développeur

Indications

Degré de priorité	Mise en oeuvre	Impact écologique
3	2	4

Ressources Economisées
Processeur

Description

Le CSS Containment (ou compartimentation CSS) indique qu'un nœud et son contenu sont, autant que possible, indépendants du reste de l'arborescence de la page.

En fonction du type d'indépendance (strict, content, size, layout, style et/ou paint) de la propriété contain, le navigateur :

• recalcule le rendu (les positions, la mise en forme, les dispositions et/ou l'affichage) pour le seul nœud indépendant, économisant ainsi de recalculer l’entièreté du DOM de la page ;
• ne fait pas le rendu du contenu des nœuds indépendants hors zone visible.

Exemples

• Une architecture DOM complexe dont le contenu de nœuds est modifié à un moment donné :

article {
   contain: content;
}

• Un widget externe :

.widget-name {
   contain: layout;
}

Pour aller plus loin :

• https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Containment
• https://www.w3.org/TR/css-contain-2/

Principe de validation

Le nombre ...	est inférieur ou égal à
d'éléments non isolés	20%