Compartimentation CSS - contain & content-visibility

[florinesueur]

Contain

La propriété CSS contain permet de modifier la portée (scope) d'un noeud dans l'arbre DOM.

article {
  contain: content;
}

Avantages :

• Calcul et recalcul (les positions, la mise en forme, les dispositions et l'affichage) du navigateur scopé et non plus de la page entière
• Chargement paresseux à la lazy loading pour les noeuds situés hors écran

Non prise en charge par les navigateurs suivants :

• Internet explorer
• Safari

Sources :

• https://developer.mozilla.org/fr/docs/Web/CSS/contain
• https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Containment

content-visibility

article {
content-visibility: auto
}

Pris en compte uniquement par :

• Chrome

Sources :

• https://web.dev/content-visibility/