CSS ::backdrop devralma değişiklikleri

Bramus

::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.

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);
}