اگر تا پیش از وجود «متغیرهای سفارشی» با CSS کار کرده باشیم، احتمالاً متوجه شدهایم که چقدر این قابلیت باعث تغییرات مثبت و پیشرفت در نوشتن CSS شده است. این قابلیت نه تنها نوشتن CSS را سادهتر کرده، بلکه امکان پیادهسازی مواردی را فراهم آورده که پیشتر امکانپذیر نبود. دستور property@ سطح بعدی «متغیرهای سفارشی» در CSS است که نه تنها امکانات CSS را گسترش میدهد، بلکه میتواند تجربهی نوشتن CSS را به کلی متحول کند.
پیش از آنکه وارد جزئیات دستور property@ شویم، باید محدودیتهای متغیرهای سفارشی را که این دستور قصد رفع آنها را دارد، درک کنیم.
یکی از محدودیتهای بزرگ متغیرهای سفارشی این است که آنها تایپ مشخصی ندارند. این موضوع شاید در نگاه اول بیاهمیت به نظر برسد، اما در واقع علت اصلی بسیاری از مشکلات مربوط به متغیرهای سفارشی میباشد.
تصور کنید یک متغیر سفارشی با نام --color
ایجاد کردهایم که انتظار داریم حاوی یک مقدار رنگ باشد. این متغیر تا زمانی که یک رنگ مشخص کنیم، به درستی کار میکند، اما اگر به اشتباه مقدار ۱۰px
را برای آن تعیین کنیم، به وضوح از کار خواهد افتاد.
مشکل اینجاست که هنگام نوشتن کد، هیچ بازخوردی دریافت نمیکنیم که مقدار ۱۰px
برای متغیر --color
معتبر نیست. این مقدار در ویرایشگر کد و حتی ابزارهای توسعهدهنده مرورگر به عنوان یک مقدار معتبر نمایش داده میشود. تنها زمانی متوجه مشکل میشویم که CSS آن طور که انتظار داشتیم عمل نمیکند.
اگر تاکنون به طور گسترده با متغیرهای سفارشی کار کرده باشیم، احتمالاً این محدودیت اولین چیزی است که به ذهنمان میآید. به هیچ وجه نمیتوانیم مقدار یک متغیر سفارشی را animate یا transition دهیم.
علت این موضوع این است که CSS نمیداند یک متغیر سفارشی چه تایپی دارد، بنابراین نمیداند چگونه باید یک انیمیشن را اجرا کند. به همین دلیل میتوانیم ویژگی color
را animate کنیم، اما نمیتوانیم متغیر سفارشی --color
را animate کنیم.
آخرین محدودیت اصلی متغیرهای سفارشی این است که آنها همیشه به ارث میرسند. این بدان معناست که اگر یک متغیر سفارشی را روی یک المنت تنظیم کنیم، تمام childهای آن المنت نیز همان مقدار را برای آن متغیر دریافت میکنند. این موضوع میتواند در برخی شرایط کار با متغیرهای سفارشی را دشوار کند، زیرا این مقادیر ممکن است به بخشهایی از برنامه ما نفوذ کنند که نمیخواهیم این اتفاق بیفتد.
دستور property@ به عنوان راه حلی برای برطرف کردن تمام این مشکلات در متغیرهای سفارشی ایجاد شده است. ایجاد یک دستور property@ کاملاً متفاوت از یک متغیر سفارشی معمولی است، زیرا در واقع ما در حال تعریف یک ویژگی CSS اختصاصی برای کل داکیومنت خود هستیم.
در ادامه یک نمونه از نحوه ایجاد یک دستور property@ برای یک ویژگی رنگ را داریم:
@property --color { syntax: "<color>"; inherits: true; initial-value: black; } body { --color: red; }
دستور property@ اساساً از چهار بخش مختلف تشکیل شده است:
name
: نام ویژگی است که ما در حال ایجاد آن هستیم. در این مثال، نام ویژگی --color
میباشد.syntax
: این مورد تایپ مقداری است که ویژگی میتواند بپذیرد. در این مثال، تایپ مقدار یک رنگ است، اما میتواند یک length، یک string یا حتی یک تایپ سفارشی باشد که ما تعریف میکنیم.inherits
: این گزینه تعیین میکند که آیا ویژگی باید ارثبری کند یا نه. اگر مقدار آن را بر روی false
تنظیم کنیم، ویژگی به ارث نخواهد رسید.initial-value
: این مورد نیز مقداری است که ویژگی در صورت تعیین نشدن، یک مقدار پیشفرض خواهد داشت.همانطور که در کد بالا مشاهده میکنیم، ما اساساً یک ویژگی اختصاصی به CSS اضافه میکنیم که درست مانند یک ویژگی معمولی از استاندارد CSS پیروی میکند.
بزرگترین مزیت دستور property@ این است که به ما اجازه میدهد تا مقادیر را مانند یک ویژگی معمولی که در CSS وجود دارد animate و transition دهیم. دلیل این امکان، اطلاعات تایپی است که همراه ویژگی ارائه میشود.
این اطلاعات تایپی همچنین به مرورگر و ویرایشگر متن ما اجازه میدهد بازخورد و تکمیل خودکار ارائه دهند، بنابراین نمیتوانیم مقدار نامعتبری را به یک ویژگی اختصاص دهیم. این به این معناست که بلافاصله متوجه میشویم اگر مقداری مانند length را به یک ویژگی رنگ اختصاص دهیم، باید آن را اصلاح کنیم.
در نهایت، از آنجایی که میتوانیم initial-value
و وضعیت ارثبری ویژگی را کنترل نماییم، کنترل کاملی بر رفتار ویژگی خود خواهیم داشت که نوشتن کد CSS تمیزتر و سازمان یافتهتر را آسانتر میکند.
پیچیدهترین بخش دستور property@، تعریف سینتکس ویژگی است. این سینتکس با استفاده از یک string تعریف میشود که ترکیبی از تایپهایی است که ویژگی میتواند بپذیرد. به عنوان مثال، اگر بخواهیم یک ویژگی تعریف کنیم که بتواند یک مقدار رنگ یا length را بپذیرد، سینتکس را به صورت "<color> | <length>"
تعریف میکنیم.
ویژگی syntax راههای بسیار متنوعی برای تعریف دارد. مطالعه مستندات MDN دربارهی ویژگی syntax میتواند مفید باشد تا با تمام روشهای ممکن آشنا شویم، اما در ادامه چند مورد از ویژگیهای متداول را باهم بررسی میکنیم.
<type>
: تمام تایپهای CSS در داخل <>
قرار میگیرند:/* Any valid number */ syntax: "<number>"
|
: برای ترکیب چند مقدار به صورت رابطهی «یا» استفاده میشود./* Either a color or a length */ syntax: "<color> | <length>"
+
: برای لیست مقادیر جدا شده با space استفاده میشود./* One or more colors separated by spaces */ syntax: "<color>+"
#
: برای لیست مقادیر جدا شده با کاما استفاده میشود./* One or more colors separated by commas */ syntax: "<color>#"
keywords
: هر مقداری که داخل <>
نباشد، به عنوان یک کلمهی کلیدی شناخته میشود./* Either the keyword sm, md, or lg */ syntax: "sm | med | lg"
در حال حاضر بزرگترین محدودیت دستور property@ مربوط به ویرایشگر VSCode است. این ویرایشگر نه تنها syntax highlighting مناسبی برای دستور property@ ارائه نمیدهد، بلکه بررسی تایپ یا تکمیل خودکار مقادیر این ویژگی را نیز پشتیبانی نمیکند. اگرچه یک گزارش مشکل برای رفع این موضوع در گیتهاب VSCode ثبت شده است، اما این گزارش چندین سال باز بوده و تاکنون پیشرفتی در این زمینه حاصل نشده است.
ممکن است تصور کنید پشتیبانی مرورگرها یک محدودیت دیگر باشد، اما دستور property@ در تمام مرورگرهای مدرن با بیش از ۹۳٪ پشتیبانی قابل استفاده میباشد.
دستور property@ یک قابلیت فوقالعاده قدرتمند جدید در CSS است که پتانسیل تغییر نحوه نوشتن CSS را دارد. این دستور تقریباً تمام محدودیتهای متغیرهای سفارشی را برطرف کرده و امکانات جدید بسیاری را در CSS فراهم میآورد.