قانون @property در CSS

قانون @property در CSS یک ویژگی جدید است که به توسعه‌دهندگان اجازه می‌دهد تا ویژگی‌های سفارشی (متغیرهای CSS) را با محدودیت‌های خاص تعریف و ثبت کنند. این قانون باعث می‌شود متغیرهای CSS قدرتمندتر شوند و شامل بررسی نوع، مقادیر پیش‌فرض و کنترل ارث‌بری باشند.

نحو (Syntax)

@property –custom-property-name {

syntax: “<data-type>”;

initial-value: <default-value>;

inherits: true | false;

}

پارامترها

1. --custom-property-name: نام ویژگی سفارشی که باید با دو خط تیره (--) شروع شود.
2. syntax: رشته‌ای که نوع داده مورد انتظار برای ویژگی را مشخص می‌کند (مانند <color>، <length> یا <number>).
3. initial-value: مقدار پیش‌فرض برای ویژگی در صورتی که مقدار خاصی به آن اختصاص داده نشود.
4. inherits: یک مقدار بولین (true یا false) که مشخص می‌کند آیا این ویژگی باید از عناصر والد به فرزند ارث ببرد یا نه.

مثال

@property –theme-color {

    syntax: “<color>”;

    initial-value: #ff0000;

    inherits: false;

}

div {

       –theme-color: #00ff00; /* معتبر، با نوع <color> تطابق دارد */

        background-color: var(–theme-color);

}