Chrome 22'de, position:fixed öğelerinin düzen davranışı önceki sürümlerden biraz farklıdır. Tüm position:fixed öğeleri artık yeni yığın bağlamları oluşturuyor. Bu işlem, bazı sayfaların yığma düzenini değiştireceğinden sayfa düzenlerini bölme olasılığı vardır. Yeni davranış, mobil cihazlardaki (iOS Safari ve Android için Chrome) WebKit tarayıcılarının davranışıyla eşleşir.
Neleri Gruplama?
Bir sayfadaki öğelerin derinlik sıralamasını belirlemede kullanılan z-index, herkes tarafından bilir ve beğenilmiştir. Tüm z-endeksleri aynı şekilde oluşturulmaz ancak bir öğenin z-index özelliği yalnızca sıralamasını aynı yığın bağlamındaki diğer öğelere göre belirler. Bir sayfadaki öğelerin çoğu tek bir kök yığma bağlamında yer alır, ancak otomatik olmayan z-index değerlerine sahip mutlak veya göreceli şekilde konumlandırılmış öğeler kendi yığma bağlamlarını oluşturur (yani tüm alt öğeleri üst öğe içinde z sıralamasına sahip olur ve üst öğenin dışındaki içeriğe araya yerleştirilmez). Chrome 22'den itibaren position:fixed öğeleri de kendi yığın bağlamlarını oluşturacaktır.
Bağlamların yığılmasına genel bir genel bakış için bu MDN makalesini okuyabilirsiniz.
position:fixed ile yeni location:sticky özelliğini karşılaştırın: Referans olması amacıyla, position:sticky her zaman yeni bir yığın bağlamı oluşturur.
Motivasyon
Mobil tarayıcılar (Mobil Safari, Android tarayıcı, Qt tabanlı tarayıcılar) position:fixed öğelerini kendi yığın bağlamlarına yerleştirir ve belirli kaydırma optimizasyonlarına olanak tanıdığından web sayfalarını dokunmaya çok daha duyarlı hale getirdiğinden (iOS5, Android Gingerbread vb.'den itibaren) bir süreye sahiptir. Bu değişiklik masaüstüne üç nedenle getiriliyor:
- "Mobil" ve "masaüstü" tarayıcılarda oluşturma davranışının farklı olması, web yazarlarının önündeki engeli oluşturur. CSS'nin mümkün olduğunda her yerde aynı şekilde çalışması gerekir.
- Tabletlerde, "mobil" veya "masaüstü" yığın içerik oluşturma algoritmalarından hangisinin daha uygun olduğu kesin değildir.
- Kaydırma performansı optimizasyonlarının mobil ortamdan masaüstüne taşınması hem kullanıcılar hem de yazarlar için avantajlıdır.
Değişikliğin Detayları
Farklı düzen davranışlarının gösterildiği bir örneği burada bulabilirsiniz: https://codepen.io/paulirish/pen/CgAof
Bu değişiklikle birlikte her iki sürüm de sağdaki sürüm gibi oluşturulacak.
Bu örnekte, yeşil kutucukta z-index: 1, pembe kutuda z-index: 3, turuncu kutuda ise z-index: 2 bulunmaktadır. Mavi kutu turuncu kutunun üst öğesidir ve position:fixed içerir.
Mavi kutunun kendi yığın bağlamı olması durumunda turuncu kutunun z-index değeri, mavi kutunun yığın içeriğine göre hesaplanır. Mavi kutunun z-index değeri auto olduğundan, kök yığma bağlamında ona yığma düzeyi sıfır olarak verildiğinden, turuncu kutu, kök bağlamında 1 ve 3 Z-endekslerine (sırasıyla) sahip yeşil ve pembe kutuların arkasında yer alır.
Mavi kutu kendi yığın bağlamına sahip değilse turuncu kutunun z-index değeri, kök yığma içeriğine göre (yeşil ve pembe kutularla birlikte) hesaplanır. Bu nedenle, turuncu renkli kutunun içine pembe ve yeşil kutular yerleştirilmiştir.
Yığın içerik oluşturma ölçütleri (ve yığın bağlamaların genel olarak nasıl davrandığı) hakkında daha fazla ayrıntı için tekrar bu MDN makalesine bakın. Örnekte sağ taraftaki versiyonda, opaklığı 1'den az olduğundan mavi kutuya her zaman kendi yığın bağlamını verilmiştir. Yapılan davranış değişikliği, ayrı bir yığın bağlamı oluşturmak için etkili bir şekilde başka bir ölçüt ekler. Bu bağlamda bir öğenin location:fixed olması gerekir.
Testler ve Gelecek
Sayfanızın değişip değişmeyeceğini test etmek için Chrome'un about:flags sayfasına gidin ve "sabit konum öğeleri yığın bağlamlar oluşturur" özelliğini açın/kapatın. Düzeniniz her iki durumda da aynı şekilde davranıyorsa hazırsınız demektir. İşaretlemediyseniz, Chrome 22'de bu bayrak varsayılan ayar olacağından, bu bayrak etkinken sizin için kabul edilebilir göründüğünden emin olun.
Bu değişiklik tek bir özelliği kaldırıyor: içeriği bir konum içinde araya ekleme özelliği:kaydırmayan içerikle dışarıdan sabit alt ağaç. Web geliştiricilerinin bunu bilerek yapması pek olası değildir ve aynı etki, DOM'nin farklı bölümleri için birden fazla location:fixed öğelerine verilerek oluşturulabilir. Örnek olarak aşağıdaki iki örneği inceleyelim:
https://codepen.io/wiltzius/pen/gcjCk
Bu sayfa, location:fixed öğesinin iki alt div öğesini (overlayA ve yer paylaşımlıB) almaya çalışır ve birini ayrı bir içerik div öğesinin üstüne, diğerini de aynı ayrı içerik div öğesinin altına yerleştirmeye çalışır. location:fixed öğesi, kendi yığın bağlamı olduğundan ve (önceki tüm alt öğeleriyle birlikte) Chrome 2 1 içeriğinin tamamen üstünde veya tamamen altında çalışmayacağı için bunu yapmak artık imkansızdır.
Bunu düzeltmek için, iki bindirme kendi konumlarına, "sabit öğeler"e ayrılabilir. Her biri kendi yığın oluşturma bağlamıdır. Bunlardan biri içerik div öğesinin üzerine, diğeri içerik div öğesinin altına gelebilir. Chrome 21 ve 22'de çalışan düzeltilmiş örneğe bakın:
https://codepen.io/wiltzius/pen/vhFzG
Bu örneğin doğuştan gelen katkısı eşsiz hixie'ye aittir.
Chrome, location:fixed öğelerinin kendi yığın bağlamlarını oluşturmasına neden olan ilk masaüstü tarayıcısıdır. İlgili standart, CSS Z-endeksi spesifikasyonudur (ör. https://www.w3.org/TR/CSS21/zindex.html adresine bakın). Mobil ve masaüstü tarayıcılar arasındaki fark konusunda henüz bir fikir birliğine varılmış değil, ancak mobil ve masaüstünde iki farklı davranışa sahip olma karışıklığı nedeniyle Chrome şimdilik her iki platformda da bu tek davranışa geçmeyi seçti.
1 Ekim 2012'de güncellendi: Bu makalenin orijinal sürümünde, CSS z-index spesifikasyonunun, yeni konum davranışı olan sabit öğeler özelliğini yansıtacak şekilde değiştirildiği belirtiliyordu. Bu yanlıştır; www stili listesinde tartışılmıştır, ancak henüz spesifikasyonda herhangi bir değişiklik alınmamıştır.