Utiliser les compartiments CSS
Identifiants
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 noeuds est modifié à un moment donné
article {
contain: content;
}
.widget-name {
contain: layout;
}
Pour aller plus loin :
Principe de validation
| Le nombre … | est inférieur ou égal à |
|---|
| d’éléments non isolés | 20% |