contain (izolarea randării: layout, paint, size) în CSS

contain: content;      /* layout + paint + style */
contain: strict;       /* size + layout + paint + style */
contain: layout paint;
contain: inline-size;

Ce face contain (izolarea randării: layout, paint, size)

Când se schimbă ceva într-un element, browserul verifică dacă schimbarea afectează și restul paginii. contain promite că efectele rămân în interior, așa că browserul poate sări peste calcule inutile. E util pentru widget-uri care se actualizează des (chat, ceas, listă de notificări).

Tipurile de izolare: layout (aranjarea copiilor nu afectează exteriorul), paint (copiii nu se desenează în afara marginilor, ca la overflow: hidden), size sau inline-size (mărimea nu depinde de conținut) și style (contoarele și ghilimelele CSS nu ies din element).

container-type: inline-size, folosit pentru container queries, aplică automat izolarea inline-size, layout și style. De aceea un container nu își mai poate lua lățimea din conținut.

Valori uzuale

Valoare	Descriere
layout	Layout-ul interior este independent de restul paginii.
paint	Conținutul nu se desenează în afara elementului.
size / inline-size	Mărimea (sau doar lățimea) nu ține cont de conținut; trebuie dată explicit.
style	Contoarele și quotes nu afectează elementele din afară.
content	Scurtătură pentru layout paint style; cea mai sigură variantă.
strict	Scurtătură pentru size layout paint style; cere dimensiuni explicite.

Exemple

Exemplul 1: Widget de chat izolat de restul paginii

Mesajele noi recalculează doar interiorul widget-ului.

.widget-chat {
  width: 360px;
  height: 480px;
  overflow-y: auto;
  contain: content;
}

Efect vizual în browser

Pagina arată identic. Când sosesc mesaje noi („Bună, Ana! Comanda ta a plecat din Cluj”), doar zona chat-ului se recalculează, iar derularea restului paginii rămâne fluidă.

Exemplul 2: Efectul lui paint: umbra copilului e tăiată

Exemplu care arată de ce paint seamănă cu overflow: hidden.

.card-izolat {
  contain: paint;
  padding: 16px;
}
.card-izolat .eticheta-reducere {
  position: absolute;
  top: -10px;
  right: -10px;
}

Efect vizual în browser

Eticheta „-20%” poziționată parțial în afara cardului apare tăiată la marginea cardului. Fără contain: paint, ar ieși vizibil peste colț.

Greșeli frecvente

• Folosirea contain: strict sau size fără width și height explicite; elementul se strânge la înălțime 0 și conținutul dispare.
• Aplicarea contain: paint pe carduri cu tooltip-uri sau meniuri care trebuie să iasă în afară; acestea sunt tăiate la marginea cardului.
• Mirarea că un element cu container-type: inline-size nu se mai lățește după conținut; izolarea inline-size este aplicată automat.

Comenzi înrudite

• content-visibility și contain-intrinsic-size: Amână randarea secțiunilor aflate în afara ecranului, ca paginile lungi să se încarce și să se afișeze mai repede.
• @container (Container Queries): Cea mai mare inovație CSS recentă: adaptează o componentă în funcție de mărimea părintelui său, nu de mărimea întregului ecran.
• overflow (hidden, scroll, auto): Stabilește ce se întâmplă când conținutul unui element este prea mare pentru a încăpea în dimensiunile sale.
• will-change: Anunță browserul că o proprietate se va schimba în curând, ca să pregătească din timp randarea (de exemplu un strat separat pe GPU).