قانون @property برای تعریف متغیرهای سفارشی در CSS استفاده می‌شود بدون نیاز به اجرای JavaScript.
ویژگی‌های قانون @property:
- بررسی و محدود کردن نوع داده‌ها
- تنظیم مقادیر پیش‌فرض
- تعیین اینکه آیا متغیر می‌تواند مقادیر را به ارث ببرد یا خیر
مثال تعریف یک متغیر سفارشی:
@property --myColor {
syntax: "<color>";
inherits: true;
initial-value: lightgray;
}تعریف بالا بیان می‌کند که --myColor یک متغیر رنگ است، مقادیر را از عناصر والد به ارث می‌برد و مقدار پیش‌فرض آن lightgray است.
استفاده از متغیر در CSS:
برای استفاده از متغیر سفارشی در CSS، از تابع var() استفاده می‌کنیم:
body {
background-color: var(--myColor);
}مزایای استفاده از @property:
- بررسی نوع داده: شما باید نوع داده سفارشی را مشخص کنید، مانند
<number>،<color>،<length>و غیره. این کار باعث جلوگیری از خطاها و اطمینان از استفاده صحیح از متغیرها می‌شود. - تنظیم مقدار پیش‌فرض: شما می‌توانید مقدار پیش‌فرض برای متغیر تعریف کنید. این کار تضمین می‌کند که اگر یک مقدار نامعتبر بعداً تنظیم شود، مرورگر از مقدار پیش‌فرض استفاده خواهد کرد.
- تعیین رفتار ارث‌بری: شما باید مشخص کنید که آیا متغیر می‌تواند مقادیر را از عناصر والد به ارث ببرد یا خیر.
پشتیبانی مرورگر:
قانون @property در نسخه‌های زیر مرورگرها به صورت کامل پشتیبانی می‌شود:
| مرورگر | Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
@property |
85 | 85 | 128 | 16.4 | 71 |
مثال ساده از @property:
در مثال زیر، دو متغیر سفارشی --my-bg-color و --my-txt-color تعریف شده و سپس از آن‌ها در استایل‌های div استفاده می‌شود:
@property --my-bg-color {
syntax: "<color>";
inherits: true;
initial-value: lightgray;
}
@property --my-txt-color {
syntax: "<color>";
inherits: true;
initial-value: darkblue;
}
div {
width: 300px;
height: 150px;
padding: 15px;
background-color: var(--my-bg-color);
color: var(--my-txt-color);
}مثال تغییر مقادیر متغیرها در کلاس‌های مختلف:
در این مثال، مقدار متغیر --my-bg-color در کلاس‌های .fresh و .nature تغییر می‌کند:
@property --my-bg-color {
syntax: "<color>";
inherits: true;
initial-value: lightgray;
}
div {
width: 300px;
height: 150px;
padding: 15px;
background-color: var(--my-bg-color);
}
.fresh {
--my-bg-color: #ff6347;
}
.nature {
--my-bg-color: rgb(120, 180, 30);
}بررسی نوع داده و مقدار پیش‌فرض:
در این مثال، مقدار نامعتبری به --my-bg-color اختصاص داده شده و مرورگر از مقدار پیش‌فرض lightgray استفاده می‌کند:
@property --my-bg-color {
syntax: "<color>";
inherits: true;
initial-value: lightgray;
}
div {
width: 300px;
height: 150px;
padding: 15px;
background-color: var(--my-bg-color);
}
.nature {
--my-bg-color: 2; /* مقدار نامعتبر */
}استفاده از رفتار ارث‌بری:
در مثال زیر، مقدار inherits به false تنظیم شده، که به این معنی است که متغیر از عناصر والد ارث نمی‌برد:
@property --my-bg-color {
syntax: "<color>";
inherits: false;
initial-value: lightgray;
}ایجاد انیمیشن روان با استفاده از @property:
در این مثال، دو متغیر سفارشی برای یک گرادیان تعریف شده‌اند و سپس از آن‌ها برای ایجاد یک انیمیشن گرادیان استفاده می‌شود:
@property --startColor {
syntax: "<color>";
initial-value: #EADEDB;
inherits: false;
}
@property --endColor {
syntax: "<color>";
initial-value: #BC70A4;
inherits: false;
}با استفاده از قانون @property، می‌توانید متغیرهایی با قابلیت‌های گسترده‌تر در CSS تعریف کنید و کنترل بهتری بر روی استایل‌های سفارشی و انیمیشن‌ها داشته باشید.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام