CSS – The @property Rule

قانون `@property` در CSS چیست؟

قانون `@property` یک قابلیت جدید در CSS است که به شما اجازه می‌دهد **متغیرهای CSS (CSS custom properties)** را با نوع داده مشخص، مقدار پیش‌فرض، و قواعد انیمیشن تعریف کنید.

—

چرا این قانون مهم است؟

معمولا متغیرهای CSS فقط به عنوان رشته (string) شناخته می‌شوند و نمی‌توان آن‌ها را در انیمیشن‌ها یا انتقال‌ها (transitions) به راحتی استفاده کرد.

با `@property` می‌توانید به مرورگر بگویید که یک متغیر خاص مثلاً از نوع عدد، رنگ، یا واحد خاصی است و این باعث می‌شود انیمیشن‌های روان‌تر و بهتری با آن داشته باشید.

—

 ساختار کلی `@property`

“`css
@property –my-variable {
syntax: “<type>”;
inherits: <true|false>;
initial-value: <value>;
}
“`

* `syntax`: نوع مقدار متغیر (مثلا `<color>`, `<length>`, `<number>`, و غیره)
* `inherits`: آیا مقدار متغیر از والد به فرزند منتقل شود (پیش‌فرض false)
* `initial-value`: مقدار پیش‌فرض متغیر

—

 مثال ساده

فرض کنید می‌خواهیم یک متغیر رنگ با قابلیت انیمیشن تعریف کنیم:

“`css
@property –main-color {
syntax: “<color>”;
inherits: false;
initial-value: #000000;
}

.box {
width: 100px;
height: 100px;
background-color: var(–main-color);
transition: background-color 2s ease;
}

.box:hover {
–main-color: #ff0000;
}
“`

در این مثال وقتی موس روی `.box` می‌رود، رنگ پس‌زمینه با انیمیشن تغییر می‌کند، چون متغیر `–main-color` به عنوان رنگ تعریف شده است.

—

ذ

* این ویژگی هنوز توسط همه مرورگرها پشتیبانی نمی‌شود (باید وضعیت پشتیبانی مرورگر را بررسی کنید).
* کاربرد اصلی آن برای انیمیشن دادن به متغیرهای CSS است.
* در حال حاضر بیشتر در پروژه‌های مدرن و پیشرفته کاربرد دارد.