قانون @property CSS

قانون @property CSS

@property قوانین برای تعریف مستقیم ویژگی‌های CSS شخصی‌سازی شده در جدول استایل بدون نیاز به اجرای هیچ کد JavaScript هستند.

@property قوانین دارای بررسی نوع داده‌ها و محدودیت‌ها، تنظیم مقدار پیش‌فرض و تعریف اینکه آیا ویژگی می‌تواند مقدار ارث بگیرد یا خیر هستند.

تعریف نمونه ویژگی‌های شخصی‌سازی شده:

@property --myColor {
  syntax: "<color>";
  inherits: true;
  initial-value: lightgray;
}

تعریف بالا به این معناست که --myColor یک ویژگی رنگ است که می‌تواند از عنصر والد ارث بگیرد و مقدار پیش‌فرض آن lightgray است.

برای استفاده از ویژگی‌های شخصی‌سازی شده در CSS، ما از var() توابع:

body {
  background-color: var(--myColor);
}

استفاده @property مزایا:

• بررسی نوع：باید نوع داده‌ای ویژگی سفارشی را مشخص کرد، مانند <number>، <color>، <length>. این از خطاها جلوگیری می‌کند و استفاده صحیح از ویژگی سفارشی را تضمین می‌کند
• تنظیم مقدار پیش‌فرض: می‌توان برای ویژگی سفارشی مقدار پیش‌فرض تعیین کرد. این اطمینان حاصل می‌کند که اگر در آینده مقدار نامعتبر تخصیص داده شود، مرورگر از ارزش جایگزین تعریف شده استفاده خواهد کرد.
• تنظیم رفتار ارث：باید مشخص شود که ویژگی سفارشی می‌تواند از ارزش پدر عنصر خود ارث ببرد یا خیر.

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولین مرورگر از این قانون است که از آن پشتیبانی می‌کند.

نمونه ساده @property

در مثال زیر، دو ویژگی سفارشی تعریف شده است:--my-bg-color و --my-txt-color. سپس، div در background-color و color از ویژگی سفارشی استفاده می‌کنیم:

مثال

@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

در مثال زیر، ما از ویژگی سفارشی پیش‌فرض در عنصر <div> استفاده می‌کنیم. سپس در .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);
}

آزمایش کنید

با بررسی نوع و ارزش جایگزین از خطاها جلوگیری می‌کند

در مثال زیر، ما: .nature مقدار تنظیم شده برای属性 سفارشی در کلاس به عدد است. این غیرممکن است، مرورگر از initial-value رنگ جایگزین تعریف شده در属性 (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);
}
.fresh {
  --my-bg-color: #ff6347;
}
.nature {
  --my-bg-color: 2;
}

آزمایش کنید

مقدار inherits استفاده می‌کنیم

در مثال زیر، ما: inherits مقدار تنظیم شده: falseاین به این معنی است که属性 سفارشی از ارزش پدر عنصر خود ارث نمی‌برد. نتیجه را بررسی کنید:

مثال

@property --my-bg-color {
  syntax: "<color>";
  inherits: false;
  initial-value: lightgray;
}

آزمایش کنید

مثال بعدی این است که: inherits مقدار تنظیم شده: trueاین به این معنی است که属性 سفارشی از ارزش پدر عنصر خود ارث می‌برد. نتیجه را بررسی کنید:

مثال

@property --my-bg-color {
  syntax: "<color>";
  inherits: true;
  initial-value: lightgray;
}

آزمایش کنید

استفاده از @property برای ایجاد آنی‌سازی‌های نرم

استفاده @property ممکن است که یک قانون جدید برای ایجاد فرصت‌های جدید برای آنی‌سازی محتوایی که قبلاً قابل آنی‌سازی نبود، یعنی ترانسفورمیشن‌ها، باشد: مشاهده مثال زیر:

مثال

برای ایجاد یک ترانسفورمیشن خطی دو ویژگی سفارشی تعیین می‌شود:

@property --startColor {
  syntax: "<color>";
  initial-value: #EADEDB;
  inherits: false;
}
@property --endColor {
  syntax: "<color>";
  initial-value: #BC70A4;
  inherits: false;
}

آزمایش کنید

قانون @property CSS