قانون @property CSS

تعریف و استفاده

CSS @property قوانین برای تعریف مستقیم مقادیر اختصاصی CSS در جدول استایل‌ها بدون نیاز به اجرای هیچ کد JavaScript استفاده می‌شوند.

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

استفاده از @property مزایا:

• کنترل نوع داده و محدودیت‌ها: باید نوع داده مقادیر اختصاصی را مشخص کنید، مانند <number>، <color>، <length> و غیره. این می‌تواند از خطا جلوگیری کند و استفاده صحیح از مقادیر اختصاصی را تضمین کند.
• تنظیم مقدار پیش‌فرض: می‌توانید مقدار پیش‌فرض برای مقادیر اختصاصی تعریف کنید. این اطمینان می‌دهد که اگر مقدار نامعتبر بعدی تعریف شد، مرورگر از مقدار پیش‌فرض تعریف شده استفاده خواهد کرد.
• تنظیم رفتار ارث: باید مشخص کنید که آیا مقادیر اختصاصی می‌توانند از عنصر والد ارث بگیرند یا خیر.

مثال: تعریف مقادیر اختصاصی

@property --my-color {
  syntax: "<color>";
  inherits: true;
  initial-value: lightgray;
}

تعریف بالا نشان می‌دهد که --my-color یک مقادیر رنگی است که می‌تواند از عنصر والد ارث بگیرد و مقدار پیش‌فرض آن lightgray است.

استفاده از مقادیر اختصاصی در CSS:

body {}}
  background-color: var(--my-color);
}

مثال

مثال 1

دو ویژگی سفارشی برای تغییرات تدریجی مشخص کنید - و از آنها برای انیمیشن تغییرات تدریجی استفاده کنید:

@property --startColor {
  syntax: "<color>";
  initial-value: #EADEDB;
  inherits: false;
}
@property --endColor {
  syntax: "<color>";
  initial-value: #BC70A4;
  inherits: false;
}

آزمایش کنید

مثال 2

دو ویژگی سفارشی مشخص کنید: یکی برای اندازه‌ی آیتم و دیگری برای رنگ آیتم:

@property --item-size {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}
@property --item-color {
  syntax: "<color>";
  inherits: false;
  initial-value: lightgray;
}

آزمایش کنید

نحوه‌ی نوشتن CSS

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

مقدار ویژگی

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه‌ای از مرورگر هستند که کامل‌ترین قاعده @ را پشتیبانی می‌کند.

صفحات مرتبط

آموزش:قانون @property CSS