Özet
Yeni CSS Containment özelliği, geliştiricilerin tarayıcı stillerinin, düzeninin ve boyama çalışmasının kapsamını sınırlamasına olanak tanır.
Birkaç değeri vardır ve söz dizimi şu şekildedir:
contain: none | strict | content | [ size || layout || style || paint ]
Chrome 52 ve Opera 40 ve sonraki sürümlerinde (ve Firefox'tan herkese açık destekte) kullanılabilir. Denemenizi yapın ve nasıl kullandığınızı bize bildirin!
reCAPTCHA özelliği
Web uygulaması, hatta karmaşık bir site oluştururken performansla ilgili en önemli zorluklardan biri stil, düzen ve boyama etkilerini sınırlamaktır. Çoğu zaman DOM'nin tamamı, hesaplama çalışması için "kapsam içinde" olarak kabul edilir. Bu, bir web uygulamasında bağımsız bir "görünüm" kullanmak zor olabilir: DOM'nin bir bölümündeki değişiklikler diğer kısımları da etkileyebilir ve tarayıcıya nelerin kapsam dahilinde, neyin kapsam dışında olması gerektiğini söylemenin bir yolu yoktur.
Örneğin, DOM'nizin bir kısmının aşağıdaki gibi göründüğünü varsayalım:
<section class="view">
Home
</section>
<section class="view">
About
</section>
<section class="view">
Contact
</section>
Bir görünüme stil, düzen ve boyama işlemini tetikleyecek yeni bir öğe eklersiniz:
<section class="view">
Home
</section>
<section class="view">
About
<div class="newly-added-element">Check me out!</div>
</section>
<section class="view">
Contact
</section>
Ancak bu durumda, tüm DOM etkili bir şekilde kapsam dahilindedir. Diğer bir deyişle, stil, düzen ve boya hesaplamalarının değiştirilip değiştirilmediklerine bakılmaksızın tüm öğeleri dikkate alması gerekir. DOM ne kadar büyük olursa daha fazla hesaplama işlemi gerçekleşir. Bu da uygulamanızın kullanıcı girişine yanıt vermemesine yol açabilir.
Neyse ki modern tarayıcılar stil, düzen ve boyama çalışmalarının kapsamını otomatik olarak sınırlandırma konusunda son derece akıllı hale geliyor. Bu, hiçbir şey yapmanıza gerek kalmadan işlerin hızlandığı anlamına geliyor.
Ancak daha da iyisi, kapsamın kontrollerini geliştiricilere sağlayan yeni bir CSS mülkü bulunuyor: Containment.
CSS Kapsayıcılığı, anahtar kelime şu dört değeri destekleyen yeni bir özelliktir:
layoutpaintsizestyle
Bu değerlerin her biri, tarayıcının yapması gereken oluşturma işini sınırlamanıza olanak tanır. Şimdi her birine daha ayrıntılı bir şekilde bakalım.
Düzen (şunu içerir: düzen)
Düzen kapsama alanı, contain: paint ile birlikte kontrol altına almanın muhtemelen en büyük avantajıdır.
Düzen genellikle doküman kapsamlıdır ve DOM'nizin boyutuyla orantılı olarak ölçeklendirilir. Bu nedenle, bir öğenin left özelliğini değiştirirseniz DOM'daki her bir öğenin kontrol edilmesi gerekebilir.
Burada kapsama özelliğini etkinleştirmek, potansiyel olarak öğe sayısını belgenin tamamı yerine yalnızca bir miktara düşürebilir, böylece tarayıcıda bir sürü gereksiz işin önüne geçebilir ve performansı önemli ölçüde iyileştirebilir.
Boya (şunu içerir: boya)
Kapsama boyama, kapsama almanın bir başka son derece faydalı avantajıdır. Boya önleme malzemesi aslında söz konusu öğeyi kırpar, ancak başka yan etkileri de vardır:
- Mutlak olarak konumlandırılmış ve sabit konumlu öğeler için bir kapsayıcı blok görevi görür. Bu, tüm alt öğelerin, doküman gibi başka bir üst öğeye değil,
contain: paintiçeren öğeye göre konumlandırılacağı anlamına gelir. - Düzgün bir bağlam haline gelir. Bu,
z-indexgibi öğelerin öğe üzerinde bir etkisi olacağı ve alt öğelerin yeni bağlama göre gruplandırılacağı anlamına gelir. - Yeni bir biçimlendirme bağlamı haline gelir. Bu, örneğin, boya içeren blok düzeyinde bir öğeniz varsa bu öğenin yeni ve bağımsız bir düzen ortamı olarak ele alınacağı anlamına gelir. Bu, öğenin dışındaki düzenin genellikle kapsayıcı öğenin alt öğelerini etkilemeyeceği anlamına gelir.
Beden (şunu içerir: boyut)
contain: size, öğenin alt öğelerinin üst öğenin boyutunu etkilemediği ve tahmin edilen veya bildirilen boyutlarının kullanılan boyutlar olacağı anlamına gelir. Sonuç olarak, contain: size öğesini ayarlamış ancak öğe için boyut belirtmemiş olsanız (doğrudan veya esnek özelliklerle) öğe 0 piksele 0 piksel olarak oluşturulur!
Beden ölçüsü, beden ölçüsünde alt öğelere bağlı kalmamanızı sağlayan bir kemer ve parantez ölçüsü olsa da tek başına performans açısından çok fazla avantaj sağlamaz.
Stil (şunu içerir: stil)
Bir öğenin stilini değiştirmenin DOM ağacı üzerindeki etkilerini tahmin etmek zor olabilir. CSS sayaçları buna örnek olarak verilebilir. Bu sayaçlarda, bir alt öğedeki bir sayacın değiştirilmesi, dokümanın başka bir yerinde kullanılan aynı adın sayaç değerlerini etkileyebilir. contain: style ayarlandığında stil değişiklikleri, kapsayıcı öğenin sonrasına yedeklenmez.
Son derece açıkça belirtmek gerekirse contain: style, sağlamadığı noktanın, Gölge DOM'dan aldığınız gibi kapsamlı stil özelliklerini kapsamasıdır; Buradaki kapsayıcılık tamamen, stiller bildirildiğinde değil, stiller değiştirildiğinde söz konusu ağaç bölümlerinin sınırlandırılmasıyla ilgilidir.
Katı kural ve içerik engelleme
Ayrıca, contain: layout paint gibi anahtar kelimeleri birleştirebilirsiniz. Bu durumda, yalnızca bu davranışlar bir öğeye uygulanır. Ancak, içerir iki ek değeri de destekler:
contain: strict,contain: size layout paintile aynı anlama gelircontain: content,contain: layout paintile aynı anlama gelir
Katı sınırlamanın kullanılması, öğenin boyutunu önceden bildiğiniz (veya boyutlarını ayırmak istediğiniz) durumlarda idealdir. Ancak, boyut olmadan katı bir kapsayıcılık belirtirseniz, ima edilen boyut sınırı nedeniyle öğenin 0 piksele 0 piksel boyutunda bir kutu olarak oluşturulabileceğini unutmayın.
Öte yandan içerik kapsama özelliği, kayda değer kapsam iyileştirmeleri sağlar ancak öğenin boyutlarını önceden bilmeniz veya belirtmeniz gerekmez.
Varsayılan olarak kullanmanız gereken bu iki sürümden contain: content. contain: content ihtiyaçlarınızı karşılayacak kadar güçlü olmadığında sıkı bir kontrol altına almayı daha ziyade bir kaçış yolu olarak değerlendirmelisiniz.
Devam etmek için lütfen
Kapsayıcılık, sayfanızda ne tür bir ayrı kalmasını istediğinizi tarayıcıya göstermeye başlamanın harika bir yoludur. Chrome 52 ve sonraki sürümlerde deneyin ve nasıl çalıştığınızı bize bildirin!