contain özelliği bu zincirleme bağımlılığı kırar. Tarayıcıya belirli bir blok için "içerideki değişiklikler dışarıya sızmaz, dışarıdaki değişiklikler içeriyi etkilemez" talimatını verir. Bu talimat soyut bir ipucu değil; rendering pipeline'ın gerçekten farklı çalışmasını sağlayan teknik bir kısıtlamadır. contain'in dört farklı değeri bu kısıtlamanın dört boyutunu tanımlar: layout, style, paint ve size.

Her değer bağımsız olarak uygulanabileceği gibi birleştirilerek de kullanılır. Hangisinin ne işe yaradığını ve yanlış kombinasyonun hangi sorunlara yol açtığını anlamak, content-visibility gibi üst düzey özelliklerin sahne arkasını da netleştirir.

Rendering bölgelerini izole etmek: `contain`'in çözdüğü problem

Tarayıcının rendering süreci birbirine bağlı aşamalardan oluşur. Style hesabı cascade'i çözümler; layout her öğenin boyutunu ve konumunu belirler; paint boyama komutlarını üretir; composite katmanları birleştirir. Bu aşamaların tamamı sayfayı bir bütün olarak ele alır — aksini söyleyen bir bilgi yoksa.

Bir bileşenin içindeki küçük bir metin değişikliği layout aşamasını tetikler. Layout aşaması o bileşenin boyutunu değiştirebilir. Boyut değişikliği aynı flex veya grid container'daki komşu öğeleri etkiler. Komşu öğelerin konumu değişirse onların alt öğeleri de yeniden hesaplanır. Büyük DOM ağaçlarında bu etki dalgası onlarca öğeyi kapsayabilir; her DOM değişikliği potansiyel olarak önemli bir layout çalışması başlatır.

contain bu dalgalanmayı kısıtlar. Uygulandığı öğe, tarayıcı için hesaplama sınırı haline gelir. İçerideki değişiklikler o sınırda durur; dışarıdaki değişiklikler o sınırın içine girmez. Bu izolasyon, INP gibi etkileşim metriklerini doğrudan etkiler: kullanıcı bir bileşene dokunduğunda yalnızca o bileşenin yeniden hesaplanması, tüm sayfanın yeniden hesaplanmasından çok daha az zaman alır.

`layout` ve `style` değerleri: bağımlılık zincirini kesen iki temel containment

contain: layout tarayıcıya şunu söyler: bu öğenin dışındaki hiçbir şey bu öğenin iç layout'unu etkileyemez; bu öğenin iç layout'u da dışarıdaki hiçbir şeyi etkileyemez. Boyut ve konum hesabı iki yönde de izole edilir.

Pratik sonucu şudur: layout containment uygulanmış bir bileşen içindeki metin değişikliği, yalnızca o bileşenin kendi layout hesabını tetikler. Komşu öğeler, parent container, sayfa gövdesi — hiçbiri bu hesaba dahil olmaz. Bileşenin kendisi yeniden hesaplanır; bu hesabın sonucu dışarıya yansımaz çünkü bileşen, layout motoru açısından bağımsız bir ada gibi davranır.

contain: style ise CSS cascade'inin ve sayaçlarının kapsam sınırlamasını uygular. counter-increment gibi CSS sayaçları normalde DOM ağacında akar; bir öğede başlayan sayaç değeri kardeş ve torun öğelerde devam edebilir. contain: style bu akışı keser: sayaçlar, content özelliğiyle üretilen değerler ve CSS custom property değişiklikleri containment sınırını geçemez. Büyük bileşen ağaçlarında bu izolasyon hem hesaplama hem de öngörülebilirlik açısından değer taşır.

/* İki değer birlikte sıkça kullanılır */
.widget {
  contain: layout style;
}

layout ve style değerlerini birlikte kullanmak, bileşenin hem boyut/konum hem de cascade davranışı açısından bağımsız davranmasını sağlar. Bu kombinasyon widget, kart ve bağımsız UI bileşenleri için uygun bir başlangıç noktasıdır. Bileşen gerçekten dışarıyla boyutsal veya cascade bağımlılığı taşımıyorsa bu iki değer fazladan yük olmadan çalışır.

`paint` containment: görsel sınır ve overflow'un garantili davranışı

contain: paint tarayıcıya o öğenin görsel içeriğinin kendi sınırının dışına çıkmayacağını bildirir. Bu bildirim gerçek bir kısıtlama üretir: öğenin overflow durumu ne olursa olsun, boyama işlemi yalnızca o öğenin kutu sınırları içinde gerçekleşir.

Rendering açısından sonucu ölçülebilirdir. Tarayıcı bir öğenin paint aşamasını hesaplarken normalde o öğenin overflow içeriğini de izlemek zorunda kalabilir; overflow'un nereye kadar uzandığını bilmeden paint bölgesini kesin olarak sınırlayamaz. contain: paint bu belirsizliği ortadan kaldırır: paint bölgesi öğenin kutu sınırıdır, başka hiçbir yere bakılmaz.

Bir diğer sonuç: contain: paint uygulanmış öğe, tarayıcı için yeni bir stacking context oluşturur. Bu davranış position: relative veya z-index kullanan iç öğeleri etkiler; bu nedenle var olan bir bileşene eklenirken katman davranışının değişip değişmediği kontrol edilmelidir. Render maliyeti açısından bakıldığında paint containment, görsel güncelleme gerektiren animasyon veya durum değişikliklerinde tarayıcının kaç pikseli yeniden boyaması gerektiğini daraltır; bu, özellikle sık güncellenen ve diğer içerikle karmaşık bir paint ilişkisi olmayan bileşenler için belirgin bir fark yaratır.

`size` containment ve boyut bilgisi olmadan layout'un çöküşü

contain: size, dört değerin en tehlikeli olanıdır. Bu değer tarayıcıya öğenin boyutunun iç içeriğine bağlı olmadığını söyler: öğenin genişliği ve yüksekliği iç içerik ne olursa olsun değişmez. Tarayıcı bu öğenin boyutunu yeniden hesaplamak zorunda kalmaz — çünkü içerik boyutu belirlemez.

Sorun, bu bildirimin doğru bir boyut bilgisi eşliğinde gelmemesi durumunda ortaya çıkar. contain: size uygulanmış bir öğeye harici CSS ile sabit bir boyut verilmezse tarayıcı o öğeyi sıfır boyutlu kabul eder. İçerik varsa da yoksa da öğe collapse olur; ekranda görünmez hale gelebilir.

/* Tehlikeli: boyut belirtilmezse öğe collapse olur */
.card {
  contain: size; /* İçerik ne olursa olsun boyut sıfır */
}

/* Doğru: sabit boyutla birlikte kullanılmalı */
.card {
  contain: size;
  width: 300px;
  height: 200px;
}

Bu nedenle size containment tek başına nadiren kullanılır. Boyutu harici CSS ile sabitlenmiş veya JavaScript tarafından yönetilen bileşenler dışında gerçek bir faydası yoktur. CLS açısından bakıldığında, boyutu belirsiz bir öğeye size containment eklemek sorunu çözmek yerine görünmez hale getirir; sayfa kayması devam eder ama artık farklı bir boyut belirsizliğinden kaynaklanır.

`contain: strict`, `contain: content` ve `content-visibility` üçgeni

Dört değeri tek tek yazmak yerine iki kısayol mevcuttur. contain: strict tüm dört değeri birden uygular: contain: size layout style paint. contain: content ise size hariç üç değeri uygular: contain: layout style paint.

strict'in pratikte güvenli bir kullanım alanı oldukça dardır. Size containment'ın beraberinde getirdiği boyut riski, bu kısayolu sabit boyutlu bileşenlerle sınırlandırır; boyutu içeriğe göre şekillenen herhangi bir öğede strict collapse sorununa yol açar. content ise çok daha pratik bir kısayoldur: boyut hesabına dokunmadan layout, style ve paint izolasyonunu bir arada sağlar. Tekrarlayan kart yapıları, feed öğeleri ve bağımsız widget'lar için doğal bir tercih olarak öne çıkar.

/* Güvenli ve yaygın kullanım */
.feed-item {
  contain: content; /* layout + style + paint */
}

/* Yalnızca sabit boyutlu bileşenler için */
.fixed-widget {
  contain: strict;
  width: 240px;
  height: 160px;
}

content-visibility: auto direktifinin arka planında contain bulunur. Bu direktif uygulandığında tarayıcı o öğeye otomatik olarak contain: layout style paint ekler — yani contain: content'in eşdeğerini. Bunun üzerine görünürlük bazlı erteleme katmanını da ekler: öğe viewport dışındaysa layout ve paint tamamen atlanır. Bu nedenle content-visibility kullanan bir öğeye ayrıca contain eklemek fazlalık olur; containment zaten içeride etkindir.

İki özelliği birbirinden bağımsız düşünmek gerektiğinde ayrım şudur: contain hesabı izole eder ama ertelemez; öğe her zaman hesaplanır, yalnızca hesap dışarıya sızmaz. content-visibility ise contain'in üzerine ertelemeyi ekler; öğe viewport dışındayken hiç hesaplanmaz. Büyük sayfalarda uzun vadeli kazanım için ikisi birbirini tamamlar: contain: content ile tüm bileşenlerin izolasyonu sağlanır, content-visibility: auto ile ekran dışı bileşenlerin hesabı tamamen ertelenir.

contain özelliği kullanım kolaylığı açısından doğrudan bir değişiklik gibi görünmez — etkileri DevTools olmadan gözlemlenmez. Ancak Performance panelinde "Recalculate Style" ve "Layout" görevlerinin süresine bakıldığında, büyük DOM ağaçlarında containment'ın bu görevleri belirgin biçimde kısalttığı görülür. Özellikle sık güncellenen bileşenler veya gerçek zamanlı veri gösteren feed yapılarında layout hesabının kapsamını daraltmak, main thread üzerindeki sürekli baskıyı azaltır. Küçük bir CSS değişikliğinin rendering motorunun hangi bölgelere dokunacağını köklü biçimde değiştirebileceğini göstermesi açısından contain, web platformunun en az konuşulan ama en doğrudan etkili performans araçlarından biridir.