ویژگی CSS @property

در دنیای CSS، ویژگی‌های جدید همواره برای بهبود تجربه برنامه‌نویسی و افزایش قابلیت‌های سفارشی‌سازی ظاهر سایت‌ها اضافه می‌شوند. یکی از این ابزارهای جذاب و گسترش‌دهنده امکانات طراحان، ویژگی @property است. در نگاه اول شاید به نظر برسد که یادگیری این ویژگی پیچیده باشد، اما اگر به آرامی سراغ آن برویم، خواهید دید که چطور می‌توان از آن به طور بهینه استفاده کرد.

ابتدا بیایید در مورد نقش @property صحبت کنیم. این ویژگی به شما اجازه می‌دهد که تعریف کنید چگونه یک متغیر CSS (که همان CSS Custom Properties یا CSS Variables هستند) رفتار کند. این یعنی می‌توانید دامنه مقادیر یک متغیر را مشخص کنید و به مرورگر بگویید که این متغیر چه نوع و چه دامنه مقادیری می‌تواند بپذیرد.

وقتی که شما دامنه مقادیر یک متغیر CSS را مشخص می‌کنید، در واقع اطمینان حاصل می‌کنید که سبک‌ها و انیمیشن‌های استفاده‌شده در صفحات وب به درستی و بدون اختلال عمل خواهند کرد. بدون استفاده از @property، یک اشتباه جزئی در نحوه استفاده از متغیرها می‌تواند منجر به مشکلات بزرگی در رندر شدن صفحه شود.

به بیانی دیگر، @property یک ابزار قدرتمند برای کنترل اعتبار ورودها و تضمین این است که متغیرها نه تنها به درستی تعریف شده‌اند، بلکه دامنه آنها نیز به خوبی مدیریت شده است. اکنون که با اصول اولیه آن آشنا شده‌اید، بیایید نگاهی به نحوه پیاده‌سازی آن بیندازیم.

<style>
@property --my-color {
  syntax: '<color>';
  initial-value: black;
  inherits: false;
}

div {
  color: var(--my-color);
}
</style>

توضیح خط به خط کد نمونه

<style>
آغاز بخش استایل است که در آن می‌خواهیم از ویژگی @property استفاده کنیم.

@property --my-color
یک متغیر جدید به نام --my-color تعریف کرده‌ایم که در استایل‌هایمان استفاده خواهیم کرد.

syntax: '<color>';
تعریف می‌کند که نوع داده‌ای این متغیر یک color CSS است.

initial-value: black;
مقدار پیش‌فرض این متغیر را بر روی رنگ سیاه قرار می‌دهد.

inherits: false;
مشخص می‌کند این متغیر به ارث برده نمی‌شود و فقط محلی است.

color: var(--my-color);
در اینجا از متغیر --my-color استفاده می‌کنیم تا رنگ متن در المان div تعیین شود.

</style>
پایان بلوک استایل است.