CSS ::backdrop devralma değişiklikleri

Bramus

::backdrop hesabının geçmişi

Tam ekran API'si, üst katman ve ::backdrop öğesi gibi yeni kavramları kullanıma sunmuştur.

• Üst katman, görüntü alanında kullanıcıya en yakın şekilde oluşturulan yeni bir yığın katmanıdır. Görüntü alanının boyutuna sahiptir ve diğer tüm katmanların üzerinde görünür.
• ::backdrop CSS sözde öğesi, görüntü alanının boyutunda bir kutudur ve üst katmanda sunulan tüm öğelerin hemen altında oluşturulur.

::backdrop için orijinal spesifikasyonun bir özelliği şuydu:

Hiçbir öğeden devralınmaz ve hiçbir öğe tarafından devralınmaz.

Bu, ::backdrop öğesinin stilini izole etme açısından yararlı olsa da aynı zamanda ::backdrop ürününün :root tarihinde bildirilen özel özelliklerin hiçbirine erişemeyeceği anlamına da gelir. Bu durum, web geliştiricileri arasında bir miktar kafa karışıklığına neden oldu.

Geçici çözüm olarak, özel mülklerinizin kullanılabilir olması için ::backdrop'te ve :root'te açıkça beyan etmeniz gerekiyordu:

/* Pre-Chrome 122 */
:root, ::backdrop {
  --back-color: #333;
}

::backdrop {
  background-color: var(--back-color);
}

::backdrop ile ilgili güncelleme

::backdrop ile ilgili sorunları düzeltmek için CSS Çalışma Grubu bu kavramları benimsedi ve artık CSS Yerleştirilmiş Düzenleme spesifikasyonunda belirtmiştir.

Tanımlar yeni bir spesifikasyona taşınırken aynı zamanda hassaslaştırıldı.

Web geliştiricileri üzerinde doğrudan etkisi olan bir iyileştirme, ::backdrop öğesinin artık ağaca bağlı bir öğe olmasıdır. Yani, devralınabilir tüm özellikleri kaynak öğesinden devralır.

Bu değişiklik sayesinde belirli öğelerdeki özel mülk değerlerini geçersiz kılabilirsiniz ve ::backdrop bu değerlere erişebilir. Örneğin, açık bir <dialog> öğesiyle ilişkilendirilen ::backdrop, artık söz konusu <dialog> öğesinde bulunan ö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);
}