:root جهانی نیست – انجمن DEV
بیشتر توسعهدهندگان ترجیح میدهند تمام ویژگیهای سفارشی 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
. از این بابت متاسفم.