CSS – @property (@property)
قانون @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 تعریف کنید و کنترل بهتری بر روی استایلهای سفارشی و انیمیشنها داشته باشید.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام