CSS ::backdrop devralma değişiklikleri

Bramus

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

Tam Ekran API, üst katman ve ::backdrop öğesi gibi yeni kavramlar tanıttı.

• Ü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 şunlardı:

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

Bu, ::backdrop öğesinin stilini izole etmek için yararlı olsa da ::backdrop öğesinin, :root öğesinde tanımlanan özel özelliklerden hiçbirine erişememesi anlamına da geliyordu. Bu durum, web geliştiricileri arasında bazı kafa karışıklıklarına yol açtı.

Geçici bir çö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.

Tarayıcı desteği

• 122
• 122
• 120
• 17,4

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şkilendirilmiş ::backdrop artık bu <dialog>'de 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);
}

Üst katmanda açılan bir <dialog> içeren demo. Chrome 122 ve sonraki sürümlerde ::backdrop, arka planını renklendirmek için --backdrop-color değişkenine erişebilir ve bu değişkeni kullanabilir.