::backdrop
adlı yerin geçmişi
Tam Ekran API'sı, üst katman ve ::backdrop
öğesi gibi yeni kavramları kullanıma sunmuştur.
- Üst katman, görüntü alanı içinde kullanıcıya en yakın şekilde oluşturulan yeni bir yığın oluşturma katmanıdır. Görüntü alanı boyutuna sahiptir ve diğer tüm katmanların üstünde görünür.
::backdrop
sözde CSS öğesi, görüntü alanının boyutu kadar olan ve üst katmanda sunulan herhangi bir öğenin hemen altında oluşturulan bir kutudur.
::backdrop
için orijinal spesifikasyonun bir özelliği şuydu:
Herhangi bir öğeden devralmaz ve devralınmaz.
Bu işlem ::backdrop
öğesinin stilini izole etmek için yararlı oldu ancak aynı zamanda ::backdrop
öğesinin :root
tarihinde açıklanan özel özelliklerin hiçbirine erişemediği anlamına da geliyordu. Bu durum web geliştiricileri arasında bazı karışıklıklara neden oldu.
Geçici bir çözüm olarak, özel özelliklerinizi kullanılabilir hale getirmek için ::backdrop
ve :root
üzerinde açıkça beyan etmeniz gerekiyordu:
/* Pre-Chrome 122 */
:root, ::backdrop {
--back-color: #333;
}
::backdrop {
background-color: var(--back-color);
}
::backdrop
güncellemesi
::backdrop
ile ilgili sorunları düzeltmek için CSS Çalışma Grubu bu kavramları benimsedi ve CSS Konumlandırılmış Düzen spesifikasyonunda belirtti.
Tanım yeni bir spesifikasyona taşınırken tanımlar da hassaslaştırıldı.
Web geliştiricileri üzerinde doğrudan etkisi olan bir ayrıntılandırma da ::backdrop
öğesinin artık ağaçlara uyan öğe olması, yani kaynak öğesinden devralınabilir tüm özellikleri devralmasıdır.
Tarayıcı Desteği
- 122
- 122
- 120
- 17,4
Bu değişiklik sayesinde belirli öğelerde özel özellik değerleri geçersiz kılınabilir ve ::backdrop
bunlara erişebilir. Örneğin, açık bir <dialog>
öğesiyle ilişkilendirilmiş ::backdrop
, artık söz konusu <dialog>
içinde kullanılabilen özel özelliklere erişebilir.
/* Chrome 122 and up */
:root {
--backdrop-color: #333; /* Any ::backdrop can access this custom property */
}
dialog {
--backdrop-color: #6300ff33; /* The ::backdrop for dialog can access this custom property */
}
::backdrop {
background-color: var(--backdrop-color);
}