Içeren - CSS Hileleri

CSS'deki containözellik, tarayıcıya, öğenin ve neslinin mümkün olduğunca belge ağacından bağımsız olarak kabul edildiğini belirtir. Bu, sayfanın tamamı yerine DOM'un sınırlı bir alanı için mizanpaj, stil, boya, boyut veya herhangi bir kombinasyondaki hesaplamalarda potansiyel olarak performans avantajları sağlar.

Özellik, standart değerlerin varyasyonlarını birleştiren beş standart değere ve iki kısa değere sahiptir. Her değerin, kendilerini uygulayan öğenin bağlamına bağlı olarak bazı benzersiz ve paylaşılan faydaları vardır.

Bu özelliğin tipik kullanımı, bir türden içerik barındıran bir öğedir. Öğenin neslinin düzenini ve görsellerini değiştiren gelen verileri işleyen bir widget düşünün. Dikkate alınması gereken bir diğer unsur da, bir başlık reklamı gibi üçüncü taraf verilerinin sonuçlarını içeren bir unsurdur; burada, kapsamanın yararları, belirli içeriği boyamanın önceliğini kaldırmamıza, alınan içeriğin boyutunun nasıl ele alınacağına veya içeriğin hatta görünür olmalıdır. Öte yandan, çoğunlukla statik bir site, ilk düzen ve sayfa yüklenirken ekranı boyama dışında çok az fayda sağlayacaktır.

Sözdizimi

div ( contain: none | strict | content | ( size || layout || style || paint ); )

div ( contain: none; /* no containment on element */ contain: layout; /* influences how element relates to other elements in the document */ contain: paint; /* influences how element is painted to screen */ contain: size; /* influences how element affects size calculations for the page */ contain: style; /* is considered at-risk for removal from spec */ 
 contain: content; /* combines layout and paint */ contain: strict; /* combines layout, paint, and size */ )

Gayrimenkul değerleri

Yerleşim

layoutÇevreleme değerin elemanın soyundan hiçbiri sayfadaki diğer unsurları etkilediği tarayıcıyı bildirir, ne de bu diğer unsurlar içeriyordu elemanın torunları üzerinde herhangi bir etkisi yok. Bu, tarayıcının sayfa düzenini oluştururken gerekli hesaplama sayısını potansiyel olarak azaltmasına olanak tanır.

Diğer bir fayda, içerilen öğenin ekran dışında olması veya bir şekilde gizlenmesi durumunda tarayıcının ilgili hesaplamaları geciktirebilmesidir veya daha düşük bir önceliğe kaydırabilir. Bunun bir örneği, bir blok öğesinin sonunda görünmeyen ve bu blok öğesinin başlangıcı görünen bir içerilen öğedir.

Olan bir eleman layout, örneğin mutlak konumlandırma elemanları olarak - Muhafaza yerleştirilmiş soyundan bir içeren çerçevesi haline gelir. Öğe, sayfaya göre yeni bir yığın bağlamı alır ve z-index özelliği kullanılabilir. Bununla birlikte, topveya gibi yönsel özellikler leftgeçerli değildir.

Kapsanan öğenin soyundan gelenler sayfadaki diğer öğeleri etkilemese bile, içerdikleri üst öğelerini yine de etkileyebilirler. Örneğin bir alt öğe, içerilen öğenin değişikliklere tepki olarak yeniden boyutlandırılmasına neden olabilir. Bu durumda, içerilen öğe yine de potansiyel olarak sayfadaki diğer öğeleri etkileyebilir, ancak nesiller yine de bu hesaplamalara dahil olmayacaktır.

Aşağıdaki demo, layoutmuhafaza uygulandığında ne olacağı konusunda basit bir açıklama sağlar . Üstteki kutuların her birine tıklandığında, muhafaza uygulanır ve kırmızı okların görünümü değişir. Kırmızı okların görünümü, mizanpaj hesaplamaları sırasında kutunun neslinin sayfadaki diğer kutuları etkileyip etkilemediğini gösterir.

Boya

paintÇevreleme değeri elemanın soyundan hiçbiri elemanının sınır kutusunun dışında boyalı olacağını tarayıcıyı bildirir. Bir alt öğe, sınırlayıcı kutusunun bir kısmının içerilen öğe tarafından kırpılacak şekilde konumlandırılmışsa, border-boxbu kısım boyanmayacaktır. Bir alt öğe, içerilen öğenin tamamen dışına yerleştirilirse, border-boxo zaman hiç boyanmaz. Bu, overflow: hidden;öğeye uygulamaya benzer , ancak gerekli hesaplamaları atlamanın veya azaltmanın faydaları yoktur.

Diğer bir yararı da, içerilen öğenin görünüm alanı içinde bir şekilde görünmemesi durumunda, boyama hesaplamaları yaparken öğenin soyundan gelenleri atlayabilmesidir. Bunun bir örneği, sayfanın dışına, görüntü alanının soluna yerleştirilen bir öğedir. İçerdiği öğe görünmüyorsa, bu, içeriğinin görünmeyeceğinin garantisidir. Bu nedenle boya hesaplamalarına dahil olmaları gerekli değildir.

paintKapsama sahip bir öğe , mutlak konumlandırmaya sahip öğeler gibi konumlandırılmış alt öğeler için de kapsayıcı bir kutu haline gelir. Öğe, sayfaya göre yeni bir yığın bağlamı da alır ve z-indexözellik kullanılabilir. Bununla birlikte, topveya gibi yönsel özellikler leftgeçerli değildir.

Kaydırma öğesi, neslinin kaydırma performansına yardımcı olabilecek yeni bir boya katmanına yerleştirilmesiyle ek faydalar sağlayabilir. Normalde, kayan öğeler kaydırma sırasında alt öğeler görünüp kaybolurken sürekli yeniden boyamaya neden olabilir. Boya muhafazasına sahip bir kaydırma öğesi, kaydırma alt bileşenlerinin bu sürekli yeniden boyanmasını potansiyel olarak atlayabilir.

Aşağıdaki demo, paintmuhafaza uygulandığında ne olacağı konusunda basit bir açıklama sağlar . Mor kutudaki muhafazayı değiştirmek için herhangi bir yere tıklayın. Muhafaza uygulandığında bazı yeşil kutuların görünümü değişir. Yeşil kutuların görünümü, nasıl boyandıklarını veya boyanmadıklarını gösterir.

Boyut

sizeÇevreleme değeri soyundan hiçbiri sayfası için düzen hesaplamaları yaparken dikkat edilmesi gereken bu tarayıcıyı bildirir. İçerilen öğenin heightve widthözelliklerinin uygulanmış olması gerekir , aksi takdirde sıfır piksel karesine daralır. Nesiller öğenin boyutunu etkileyemeyeceğinden, sayfa düzeni hesaplamaları için yalnızca öğenin kendisinin dikkate alınması gerekir. Bu tür hesaplamalarda içerilen elemanın soyundan gelenler tamamen atlanır; Sanki hiç torunu yokmuş gibi.

Optimizasyonun tüm faydaları için, sizemuhafaza genellikle diğer muhafaza türleriyle birlikte uygulanır.

sizeKapsama sahip bir öğe , sayfaya göre yeni bir yığın bağlamı alır ve z-indexözellik kullanılabilir. Bununla birlikte, topveya gibi yönsel özellikler leftgeçerli değildir.

Aşağıdaki demo, sizemuhafaza uygulandığında ne olacağı konusunda basit bir açıklama sağlar . Mor kutudaki muhafazayı değiştirmek için herhangi bir yere tıklayın. Muhafaza uygulandığında mor kutunun boyutu değişir. Varsayılan olarak, mor kutunun yüksekliği alt öğeleri tarafından belirlenir, ancak çevreleme ile yükseklik tanımlanmalıdır. Kapsama uygulandıktan sonra, torunlar artık boyutla ilgili düzen hesaplamalarına dahil olmaz.

Tarzı

styleKapsama değeri böyle sayaçlar ve tırnak gibi bazı CSS özelliklerini, içeriyordu elemana kapsamlı olacağını tarayıcıyı bildirir.

counter-incrementVe counter-setözellikleri içerdiği öğenin alt ağacın kapsamına alınmalıdır. İçerdiği elemanın dışına genişletilirse, yeni bir sayaç oluşturulur.

İçeriği tesisin değerleri open-quote, close-quote, no-open-quoteve no-close-quoteiçerdiği öğenin alt ağacın kapsamına alınmalıdır.

Bu sınırlama değerinin spesifikasyondan çıkarılma riski taşıdığı kabul edilir.

İçerik

contentÇevreleme değeri hem düzen ve boya tutma değerlerinin bir kombinasyonudur. Bu, bu şekilde muhafaza uygulamasına eşdeğerdir:

div ( contain: layout paint; )

Her bir değer için yukarıda açıklanan tüm potansiyel faydalar daha sonra içerilen öğe için kullanılabilir olacaktır. Bu kapsama, sayfadaki birden çok öğeye yaygın olarak uygulanması nispeten güvenli kabul edilir.

Katı

strictİhtiva değeri bir kombinasyonudur layout, paintve sizetutma değerleri. Bu, bu şekilde muhafaza uygulamasına eşdeğerdir:

div ( contain: layout paint size; )

Her bir değer için yukarıda açıklanan tüm potansiyel faydalar daha sonra içerilen öğe için kullanılabilir olacaktır.

Kapsama değerlerinin "en katı" olanı olarak, bu değer dikkatli bir şekilde değerlendirilerek kullanılmalıdır. Bu, içerdiği öğeye uyguladığı boyut gereksinimlerinden kaynaklanmaktadır. Bu gereksinimlerle, bu sınırlama değeri, korumanın en potansiyel performans faydalarını sunar.

Tarayıcı desteği

Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.

Masaüstü Bilgisayar

Krom	Firefox	IE	Kenar	Safari
52	69	Hayır	79	Hayır

Mobil / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	Hayır