Özet
Yeni CSS Kapsayıcı özelliği, geliştiricilerin tarayıcı stillerinin, düzeninin ve boyama çalışmalarının kapsamını sınırlandırmalarına olanak tanır.
Bu birkaç değere sahiptir ve söz dizimi şu şekildedir:
contain: none | strict | content | [ size || layout || style || paint ]
Bu özellik, Chrome 52+ ve Opera 40+ (ve Firefox'tan herkese açık destek) ile sunulmaktadır. Denemeyi deneyin ve neler yaptığınızı bize bildirin!
içerir özelliği
Bir web uygulaması, hatta karmaşık bir site oluştururken en önemli performans zorluklarından biri stillerin, düzenin ve boyamanın etkilerini sınırlamaktır. Çoğunlukla DOM'un tamamı, hesaplama çalışmaları için "kapsam içinde" olarak kabul edilir. Bu da, bir web uygulamasında bağımsız bir "görüntüleme"yi denemek zor olabileceği anlamına gelebilir: DOM'un bir bölümünde yapılan değişiklikler diğer bölümleri etkileyebilir ve tarayıcıya neyin kapsam içinde veya dışında olması gerektiğini söylemenin bir yolu yoktur.
Örneğin, DOM'nizin bir bölümü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>
Ayrıca, bir görünüme yeni bir öğe eklersiniz. Bu da stilleri, düzeni ve boyamayı tetikler:
<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 etkin bir şekilde kapsam dahilindedir. Diğer bir deyişle, stil, düzen ve boyama hesaplamalarında, değiştirilip değiştirilmediklerine bakılmaksızın tüm öğeleri göz önünde bulundurmak gerekir. DOM ne kadar büyük olursa o kadar fazla hesaplama işlemi gerekir. Bu da uygulamanızı kullanıcı girişlerine yanıt vermemesi gerektiği anlamına gelir.
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ı davranıyor. Böylece, hiçbir şey yapmanıza gerek kalmadan her şey hız kazanıyor.
Ancak daha da iyi bir haber ise kapsamın kontrolünü geliştiricilere veren yeni bir CSS mülküdür: Containment.
CSS Kapsayıcılığı, anahtar kelimenin içerdiği ve 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 biraz daha ayrıntılı bir şekilde bakalım.
Düzen (şunu içerir: düzen)
Düzen sınırlama, muhtemelen contain: paint ile birlikte kapsama almanın en büyük avantajıdır.
Düzen, normalde doküman kapsamında olduğundan DOM'unuzun boyutuyla orantılı olarak ölçeklenir. Bu nedenle, bir öğenin left özelliğini değiştirirseniz DOM'daki her bir öğenin kontrol edilmesi gerekebilir.
Burada sınırlamanın etkinleştirilmesi, öğelerin sayısını dokümanın tamamı yerine yalnızca birkaç tanesine düşürebilir. Bu da tarayıcının bir sürü gereksiz iş yapmasına engel olur ve performansı önemli ölçüde artırır.
Boya (şunu içerir: boya)
Kapsama alma boyama, kontrol altına almanın çok faydalı bir başka faydasıdır. Boya kaplaması esasen ilgili öğeyi kırpar, ancak başka yan etkileri de vardır:
- Mutlak olarak konumlandırılmış ve sabit konumlu öğeler için saklama bloku görevi görür. Bu, tüm alt öğelerin, örneğin doküman gibi başka bir üst öğeye değil,
contain: paintiçeren öğeye göre konumlandırılacağı anlamına gelir. - Bu, yığın içeriğine dönüşür. Bu,
z-indexgibi öğelerin öğe üzerinde etkili olacağı ve alt öğelerin yeni bağlama göre gruplandırılacağı anlamına gelir. - Yeni bir biçimlendirme bağlamına dönüşür. Örneğin, boya içeren blok düzeyinde bir öğeniz varsa bu öğe, yeni ve bağımsız bir düzen ortamı olarak değerlendirilir. Bu, öğenin dışındaki düzenin genellikle kapsayıcı öğenin alt öğelerini etkilemediği anlamına gelir.
Beden (şunu içerir: beden)
contain: size, öğenin alt öğelerinin üst öğenin boyutunu etkilemediği ve tahmin edilen veya bildirilen boyutların kullanılan boyutlar olacağı anlamına gelir. Sonuç olarak, contain: size değerini ayarlamanıza rağmen öğe için boyutları belirtmediğinizde (doğrudan veya esnek özellikleri kullanarak) öğe 0 piksele 0 piksel boyutunda oluşturulur.
Boyut kontrolü, beden ölçüsü konusunda alt öğelere güvenmemeniz için gerçekten bir kemer ve bakıcı ölçüsüdür, ancak tek başına performans açısından çok fazla fayda sağlamaz.
Stil (şunu içerir: stil)
Bir öğenin stillerini değiştirmenin DOM ağacında ne gibi etkileri olacağını tahmin etmek zor olabilir. CSS sayaçları, bir alt öğedeki sayacı değiştirmenin, dokümanın başka bir yerinde kullanılan adın sayaç değerlerini etkileyebildiği durum buna örnek olarak verilebilir. contain: style ayarlandığında stil değişiklikleri, kapsayıcı öğeden yukarıya yayılmaz.
Açık ve net bir ifadeyle, contain: style, Gölge DOM'den sağlayacağınız gibi kapsamlı stil özelliklerini sağlamaz. Buradaki sınırlama, yalnızca stiller değiştiğinde söz konusu ağaç kısımlarının kısıtlanmasıyla ilgilidir, stiller bildirildiğinde değildir.
Katı kural ve içerik kapsama
contain: layout paint gibi anahtar kelimeleri de birleştirebilirsiniz. Böylece bir öğeye yalnızca söz konusu davranışlar uygulanır. Ancak içerme, iki ek değeri de destekler:
contain: strict,contain: size layout paintile aynı anlama gelircontain: content,contain: layout paintile aynı anlama gelir
Katı kapsama alma yöntemi, öğenin boyutunu önceden biliyorsanız (veya boyutlarını ayırmak istiyorsanız) harika bir çözümdür. Ancak boyutların olmadığı ima edilen kapsama alanı nedeniyle, katı kapsama alanı belirtirseniz öğenin 0 piksele 0 piksel boyutunda bir kutu olarak oluşturulabileceğini unutmayın.
Diğer yandan, içerik barındırma, kapsamla ilgili önemli iyileştirmeler sağlar, ancak öğenin boyutlarını önceden bildirmenizi veya belirtmenizi gerektirmez.
Bu ikisi arasından contain: content ürününü varsayılan olarak kullanmanız gerekir. contain: content ihtiyaçlarınız için yeterince güçlü değilse katı sınırlamayı daha çok bir kaçış yolu olarak görmelisiniz.
Süreçle ilgili düşüncelerinizi bizimle paylaşın
Kapsayıcılık, sayfanızın içinde ne tür içeriklerin izole edilmesini istediğinizi tarayıcıya bildirmenin harika bir yoludur. Chrome 52 ve sonraki sürümlerde deneyin ve nasıl devam ettiğinizi bize bildirin!