قانون @property در CSS (CSS @property Rule)
در این راهنما با «قانون @property در CSS» آشنا می شوید؛ امکانی برای تعریف «متغیر سفارشی (Custom Property)» با نوع داده، مقدار پیش فرض و رفتار ارث بری، بدون نیاز به جاوااسکریپت. سپس با نمونه کدها آن را به کار می گیریم.
قانون @property چیست؟
با @property می توانید یک ویژگی سفارشی (مثلاً --myColor) را با نوع معتبر، ارث بری و مقدار اولیه درون استایل برگ تعریف کنید.
سینتکس پایه @property
@property --myColor { syntax: "<color>"; inherits: true; initial-value: lightgray; }پس از تعریف، مقدار ویژگی سفارشی را با تابع var() مصرف کنید:
body { background-color: var(--myColor); }نکته: بررسی نوع داده باعث می شود مقدار نامعتبر رد شود و مرورگر به مقدار پیش فرض برگردد.
مزایای قانون @property
- بررسی نوع داده: تنها مقادیر مطابق با
<number>،<color>،<length>و… پذیرفته می شوند. - مقدار پیش فرض: هنگام خطا یا ورودی نامعتبر، مقدار
initial-valueاعمال می شود. - کنترل ارث بری: با
inheritsتعیین می کنید مقدار از والد به ارث برسد یا نه.
نمونه: تعریف دو ویژگی سفارشی
دو ویژگی سفارشی برای رنگ پس زمینه و متن تعریف می کنیم و در یک 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); }بازنویسی مقدار سفارشی در کلاس ها
می توانید مقدار پیش فرض را در محدوده کلاس بازنویسی کنید.
@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); }هشدار: اگر inherits برابر true باشد، بازنویسی در یک والد می تواند روی فرزندان اثر بگذارد.
پایداری با بررسی نوع و مقدار پیش فرض
مقدار نامعتبر (مثلاً عدد برای رنگ) پذیرفته نمی شود و مرورگر به مقدار اولیه برمی گردد.
@property --my-bg-color { syntax: "<color>"; inherits: true; initial-value: lightgray; } .nature { --my-bg-color: 2; /* نامعتبر، fallback به initial-value */ }کنترل ارث بری با inherits
با inherits: false مقدار از والد به ارث نمی رسد؛ با true ارث بری فعال است.
@property --my-bg-color { syntax: "<color>"; inherits: false; initial-value: lightgray; }ایده: انیمیشن های نرم با گرادیان
با تعریف رنگ های گرادیان به صورت ویژگی سفارشی، انتقال بین رنگ ها نرم تر و قابل کنترل می شود.
@property --startColor { syntax: "<color>"; initial-value: #EADEDB; inherits: false; } @property --endColor { syntax: "<color>"; initial-value: #BC70A4; inherits: false; }مسیرهای بعدی برای قانون @property در CSS
برای مرجع تابع var() به متغیرها و تابع var() رجوع کنید. همچنین نحوه بازنویسی متغیرها و استفاده آن ها در کوئری های رسانه ای را ببینید. این موضوعات مکمل «قانون @property در CSS» هستند.