📌 @property یک CSS at-rule جدیده که اجازه میده برای CSS Variables (همون custom properties مثل --my-color) ویژگی‌های خاصی تعریف کنیم.
بهش میگن CSS Houdini Properties چون کمک می‌کنه متغیرها بهتر مدیریت بشن.

🔹 کاربرد اصلی @property

1. تعریف نوع داده برای یک متغیر (مثلاً عدد، رنگ، طول و …).

2. تعیین مقدار پیش‌فرض (initial value).

3. مشخص کردن آیا متغیر قابل انیمیشن (inherits: true/false) هست یا نه.

🔹 سینتکس @property

@property --my-var {
  syntax: '<color>';
  inherits: false;
  initial-value: #ff0000;
}

• --my-var → اسم متغیر.

• syntax → نوع داده (<length>, <color>, <number>, <percentage> و …).

• inherits → مشخص می‌کنه از المنت‌های والد به ارث می‌بره یا نه.

• initial-value → مقدار اولیه.

🔹 مثال ۱: متغیر رنگ با انیمیشن

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

.box {
  width: 150px;
  height: 150px;
  background: var(--my-color);
  transition: --my-color 1s;
}

.box:hover {
  --my-color: blue;
}

👉 با هاور کردن روی .box رنگش از قرمز به آبی تغییر می‌کنه، چون @property گفته متغیر رنگی هست و می‌تونه انیمیت بشه.

🔹 مثال ۲: متغیر عددی

@property --rotate {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.box {
  width: 100px;
  height: 100px;
  background: coral;
  transform: rotate(var(--rotate));
  transition: --rotate 1s;
}

.box:hover {
  --rotate: 180deg;
}

👉 با هاور کردن، مربع می‌چرخه.

🔹 مثال ۳: متغیر طول

@property --radius {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

.box {
  width: 150px;
  height: 150px;
  background: teal;
  border-radius: var(--radius);
  transition: --radius 1s;
}

.box:hover {
  --radius: 50px;
}

👉 هاور که کنی، مربع به‌صورت نرم به دایره تبدیل میشه.

⚠️ نکته مهم

• @property فعلاً فقط توی مرورگرهای مدرن (مثل Chrome, Edge, Opera) ساپورت میشه.

• توی Firefox و Safari هنوز پشتیبانی کامل نداره.