CSS containment — Isolér rendering og accelerér layout

Browsers layout-motor behandler en sides elementer som et sammenkoblet system — en ændring i ét element kan potentielt kræve genberegning af hele sidens layout. CSS containment bryder denne kobling og fortæller browseren at visse elementer er isolerede, hvilket muliggør aggressiv optimering.

contain-egenskaben

contain styrer hvilke aspekter af et elements rendering der er isoleret:

/* Layout-isolation: interne ændringer påvirker ikke eksterne elementer */
.card { contain: layout; }

/* Paint-isolation: elementet males i eget lag, clippes til sin box */
.widget { contain: paint; }

/* Size-isolation: elementets størrelse er uafhængig af indhold */
.fixed-size { contain: size; }

/* content = layout + paint (anbefalet kombination) */
.isolated { contain: content; }

/* strict = size + layout + paint (stærkest) */
.fully-isolated { contain: strict; }

Praktisk effekt: En komponent med contain: layout der ændrer intern tekst kræver kun layout-genberegning inden for komponentens grænse — ikke for resten af siden. På en side med hundredvis af sådanne komponenter er gevinsten betydelig.

content-visibility: auto

content-visibility: auto er den nemmeste performance-win for lange sider:

article {
  content-visibility: auto;
  contain-intrinsic-size: auto 400px;  /* Estimeret størrelse for reserveret plads */
}

Browseren skipper rendering af article-elementer der er off-screen. De renderes on-demand når de nærmer sig viewport. Effekten er dokuemnteret af Chrome-teamet til 7x hurtigere initial rendering på lange nyhedssider.

contain-intrinsic-size er nødvendig for at undgå layout-skift: angiv en estimeret højde så browseren kan reservere korrekt plads i scrollbaren, selv om indholdet ikke er rendered.

Hvad der ikke renderes (men stadig er til stede):

• Elementet er i DOM og tilgængeligt via JavaScript
• Søgefunktionen (Ctrl+F) finder stadig tekst i ikke-renderede elementer
• Accessibility-træ inkluderer elementet

@layer og CSS-layers

CSS Cascade Layers (@layer) er ikke direkte containment, men reducerer specificitets-beregnings-kompleksitet og gør CSS mere forudsigeligt:

@layer reset, base, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
}

@layer components {
  .btn { /* component styles */ }
}

@layer utilities {
  .sr-only { /* utility styles */ }
}

will-change — eksplicit GPU-lag

will-change informerer browseren om kommende ændringer og promoverer element til eget compositor-lag:

/* Godt: animerede elementer */
.animated-card {
  will-change: transform;
}

/* Dårligt: global brug — for mange lag bruger GPU-hukommelse */
* { will-change: transform; }  /* Aldrig gør dette */

Brug will-change kun på elementer der faktisk animerer, og overvej at fjerne det dynamisk via JavaScript efter animationen:

element.addEventListener('animationend', () => {
  element.style.willChange = 'auto';
});

CLS og containment

contain: size forhindrer at dynamisk indsat indhold kan ændre forælderelementets størrelse — en direkte CLS-forebyggelse. Kombineret med eksplicitte width og height på billeder og embeds dækker det de hyppigste CLS-årsager.

content-visibility: auto kan potentielt introducere CLS hvis contain-intrinsic-size er unøjagtig — den estimerede og faktiske størrelse afviger. Test med CLS-monitorering efter implementering. → Denne artikel er en del af Web Performance — Core Web Vitals og teknisk hastighed.