تغییرات در CSS :: وراثت پس زمینه

Bramus

تاریخچه ::backdrop

API تمام صفحه مفاهیم جدیدی مانند لایه بالایی و عنصر ::backdrop معرفی کرد.

• لایه بالایی یک لایه انباشته جدید است که در یک viewport نزدیک به کاربر ارائه شده است. اندازه ویوپورت را دارد و در بالای همه لایه های دیگر ظاهر می شود.
• شبه عنصر CSS ::backdrop کادری به اندازه viewport است که بلافاصله در زیر هر عنصری که در لایه بالایی ارائه می شود ارائه می شود.

یکی از ویژگی های مشخصات اصلی برای ::backdrop موارد زیر بود:

از هیچ عنصری ارث نمی برد و از آن به ارث نمی رسد.

در حالی که برای جداسازی استایل ::backdrop مفید بود، اما به این معنی بود که ::backdrop به هیچ یک از ویژگی های سفارشی اعلام شده در :root دسترسی نداشت. این باعث ایجاد سردرگمی در بین توسعه دهندگان وب شد.

به عنوان یک راه حل، باید به صراحت ویژگی های سفارشی خود را در ::backdrop و همچنین در :root اعلام کنید تا آنها را در دسترس قرار دهید:

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

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

به روز رسانی برای ::backdrop

برای رفع مشکلات مربوط به ::backdrop ، گروه کاری CSS این مفاهیم را پذیرفت و اکنون آنها را در مشخصات چیدمان موقعیت‌یافته CSS مشخص کرده است.

همراه با انتقال تعریف به مشخصات جدید، تعاریف اصلاح شده اند.

یکی از اصلاحاتی که تأثیر مستقیمی بر توسعه دهندگان وب دارد این است که عنصر ::backdrop اکنون یک عنصر درختی است، به این معنی که هر ویژگی ارثی را از عنصر اصلی خود به ارث می برد.

پشتیبانی مرورگر

• 122
• 122
• 120
• 17.4

به لطف این تغییر، می توان مقادیر ویژگی های سفارشی را روی عناصر خاص نادیده گرفت و ::backdrop به آنها دسترسی خواهد داشت. برای مثال، ::backdrop مرتبط با عنصر <dialog> باز، اکنون می‌تواند به ویژگی‌های سفارشی موجود در آن <dialog> دسترسی داشته باشد.

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

نسخه ی نمایشی با <dialog> که در لایه بالایی باز می شود. در Chrome 122 و بالاتر، ::backdrop می تواند به متغیر --backdrop-color برای رنگ آمیزی پس زمینه خود دسترسی داشته باشد و از آن استفاده کند.