بیشتر توسعه‌دهندگان ترجیح می‌دهند تمام ویژگی‌های سفارشی CSS خود را در یک مکان نگه دارند، و الگویی که در سال‌های اخیر پدیدار شده است، قرار دادن آنها در یک مکان است. :root، یک شبه عنصر که بالاترین عنصر را در سند شما هدف قرار می دهد (بنابراین همیشه همینطور است <html> در صفحات وب). اما فقط به این دلیل که آنها در یک مکان و در بالاترین عنصر قرار دارند، به این معنی نیست که جهانی هستند.
من برای اولین بار با این مشکل مواجه شدم ::backdrop: پس‌زمینه از جایی به ارث نمی‌رسد، اما پس از به‌روزرسانی اخیر موتور رندر به Polypane، متوجه شدم که تمام رنگ‌های انتخاب سفارشی من (همچنین توسط ویژگی‌های سفارشی CSS ارائه می‌شوند) ناگهان از کار افتاد.
معلوم میشود، ::selection همچنین قرار نیست سبک‌ها را به ارث ببرد، و Chromium 111+ در حال اجرای آزمایشی است تا ببیند این تغییر چه تأثیری دارد. Polypane با روشن بودن ویژگی‌های آزمایشی اجرا میشود، و بنابراین سبک‌های انتخاب من خراب شد.
این امر بسیاری از افراد را غافلگیر خواهد کرد، زیرا من مانند بسیاری دیگر، انتظار دارم ویژگی های سفارشی CSS تعریف شده در :root تا فقط در همه جا در دسترس باشد. حدس می زنم من هم انتظار داشته باشم ::selection و ::backdrop به ارث بردن از عنصر “والد” خود برای اجازه دادن به استایل پویا تر، اما مشخصات می نویسد ظاهرا این را نمی خواهد.
بنابراین اگر :root جهانی نیست، چیست؟
خب، هیئت منصفه هنوز بیرون است.
بحث‌هایی در این موضوع GitHub در حال انجام است: ویژگی‌های سفارشی روی :root با چند گزینه مورد بحث:
- از @property با مقدار اولیه استفاده کنید (هنوز از مرورگر متقابل پشتیبانی نمی شود، فقط از مقدار اولیه استفاده می کند).
- بسازید
:rootخاص - جدید ایجاد کنید
:documentشبه عنصری که خواص سفارشی را منتشر می کند. - یک at-rule جدید به نام ایجاد کنید
@global،@rootیا@documentکه می توانید ویژگی های سفارشی را در آن تعریف کنید. - بسازید
::selectionو غیره از عنصر اصلی خود به ارث می برند (مثلاً “والد آنها”).
این مورد آخر هم مشکلاتی را که مردم با آن مواجه می‌شوند را حل می‌کند (به ارث نمی‌برند، و هم به طور بالقوه که مستقیماً از آنها به ارث می‌رسد. :root بنابراین نمی توانید ویژگی های سفارشی را در آبشار بازنویسی کنید). امیدوارم نویسندگان مشخصات این کار را بدون توجه به این کار انجام دهند.
به طور خاص، من می خواهم / انتظار دارم که این کار کند:
p {
--selection-bg: #0f0;
&::selection {
background: var(--selection-bg);
}
}
وقتی صحبت از “مکانی برای ذخیره متغیرهای سراسری” می شود، نظر محکمی ندارم، اگرچه فکر می کنم جالب است به خاطر داشته باشید که اکنون در جاوا اسکریپت وجود دارد. window، global و globalThis زیرا نامگذاری در زمینه ها کار نمی کند.
در آن پرتو، :document یا @document بالقوه مشکل ساز به نظر می رسد به همین دلیل، من دوست دارم @global یا :global (من هنوز جهانی را به عنوان یک شبه عنصر پیشنهادی ندیده‌ام، اما به نظر می‌رسد نزدیک‌ترین چیزی است که مردم انتظار دارند کارها در حال حاضر کار کنند).
در ضمن می تونید از پیشنهادی که در سایتم دادم استفاده کنید ::backdrop پست کنید و جایگزین کنید :root با :root ::backdrop ::selection. از این بابت متاسفم.
