RWEB 4004 Utiliser les compartiments CSS
Ref. Version →
Ref. BP →
4.0.0
4004
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 noeuds est modifié à un moment donné
article {
contain: content;
}- Un widget externe
.widget-name {
contain: layout;
}Pour aller plus loin :
Principe de validation
| Le nombre | est inférieur ou égal à |
|---|---|
| 'éléments non isolés | 20% |