ویژگی @property
اینجا با «ویژگی @property» آشنا می شوی. «ویژگی @property» یعنی تعریف «متغیرهای سفارشی CSS» با نوع، وراثت، و مقدار پیش فرض، بدون جاوااسکریپت. این کار خطاها را کم می کند و انیمیشن ها را پایدارتر می کند.
قانون @property چیست؟
با @property یک نام مثل --myColor می سازیم، نوعش را تعیین می کنیم، وراثت را مشخص می کنیم، و یک مقدار اولیه می دهیم.
@property --myColor {\n syntax: "<color>";\n inherits: true;\n initial-value: lightgray;\n}\nاستفاده از متغیر سفارشی با var()
تابع var() مقدار متغیر را وارد استایل می کند. این یعنی یک نام ثابت و کنترل قابل اعتماد روی مقدار.
body {\n background-color: var(--myColor);\n}\nمزایای مهم @property
- بررسی نوع: فقط مقدارِ درست پذیرفته می شود.
- مقدار پیش فرض: در خطاها، مقدار امن استفاده می شود.
- کنترل وراثت: مشخص کن به ارث برسد یا نه.
مثال: دو متغیر رنگی
دو متغیر می سازیم و در پس زمینه و رنگ متن استفاده می کنیم.
@property --my-bg-color {\n syntax: "<color>";\n inherits: true;\n initial-value: lightgray;\n}\n\n@property --my-txt-color {\n syntax: "<color>";\n inherits: true;\n initial-value: darkblue;\n}\n\ndiv {\n width: 300px;\n height: 150px;\n padding: 15px;\n background-color: var(--my-bg-color);\n color: var(--my-txt-color);\n}\nبازنویسی در کلاس های مختلف
می توانیم مقدار پیش فرض را در کلاس ها تغییر دهیم و همان نام را نگه داریم.
@property --my-bg-color {\n syntax: "<color>";\n inherits: true;\n initial-value: lightgray;\n}\n\ndiv {\n width: 300px;\n height: 150px;\n padding: 15px;\n background-color: var(--my-bg-color);\n}\n\n.fresh {\n --my-bg-color: #ff6347;\n}\n\n.nature {\n --my-bg-color: rgb(120, 180, 30);\n}\nبررسی نوع و برگشت به پیش فرض
اگر مقدار نامعتبر بدهیم، مرورگر به مقدار اولیه برمی گردد. این کار خطا را بی اثر می کند.
@property --my-bg-color {\n syntax: "<color>";\n inherits: true;\n initial-value: lightgray;\n}\n\ndiv {\n width: 300px;\n height: 150px;\n padding: 15px;\n background-color: var(--my-bg-color);\n}\n\n.fresh {\n --my-bg-color: #ff6347;\n}\n\n.nature {\n --my-bg-color: 2;\n}\nکنترل وراثت: false و true
با inherits: false مقدار از والد نمی آید. با inherits: true مقدار از والد به فرزند می رسد.
@property --my-bg-color {\n syntax: "<color>";\n inherits: false;\n initial-value: lightgray;\n}\n@property --my-bg-color {\n syntax: "<color>";\n inherits: true;\n initial-value: lightgray;\n}\nانیمیشن نرم گرادیان با @property
قبلاً تغییر روانِ رنگ های گرادیان سخت بود. با @property می شود رنگ های گرادیان را نرم انیمیت کرد.
@property --startColor {\n syntax: "<color>";\n initial-value: #EADEDB;\n inherits: false;\n}\n\n@property --endColor {\n syntax: "<color>";\n initial-value: #BC70A4;\n inherits: false;\n}\nگام های عملی
- @property را با نام و نوع بساز.
- مقدار پیش فرض و وراثت را مشخص کن.
- با
var()در استایل استفاده کن.
نکته: اسم متغیر با -- شروع می شود؛ نوع درست، خطاها را می گیرد.
جمع بندی سریع
- @property متغیرِ امن و قابل کنترل می سازد.
- نوع، وراثت، مقدار پیش فرض را تعیین کن.
- با مقدار نامعتبر، پیش فرض فعال می شود.
- گرادیان ها را می توان روان انیمیت کرد.
برای ادامه، آموزش متغیرها (Variables) و متغیرها در Media Query را ببین. همچنین از همین صفحه با نام ویژگی @property نشانک بساز.