@property: متغیرهای CSS نسل بعدی اکنون با پشتیبانی از مرورگر جهانی

Una Kravets

برای تقویت CSS آماده شوید! قانون @property ، بخشی از چتر CSS Houdini از APIها، اکنون به طور کامل در تمام مرورگرهای مدرن پشتیبانی می‌شود. این ویژگی تغییر دهنده بازی سطوح جدیدی از کنترل و انعطاف پذیری را برای ویژگی های سفارشی CSS (همچنین به عنوان متغیرهای CSS شناخته می شود) باز می کند، و استایل شیت های شما را هوشمندتر و پویاتر می کند.

مزایای @property

• معنای معنایی: از @property برای تعریف یک نوع (syntax) برای ویژگی های سفارشی خود استفاده کنید. این به مرورگر می‌گوید که ویژگی سفارشی شما چه نوع داده‌هایی را در خود نگه می‌دارد (مثلاً رنگ‌ها، طول‌ها یا اعداد)، از نتایج غیرمنتظره جلوگیری می‌کند و از امکانات جدیدی مانند متحرک کردن گرادیان‌ها پشتیبانی می‌کند.
• مقادیر بازگشتی: دیگر سبک های ناپدید نمی شوند! برای تنظیم مقدار اولیه برای یک ویژگی سفارشی از @property استفاده کنید. اگر بعداً یک مقدار نامعتبر تخصیص داده شود، مرورگر به خوبی از بازگشت تعریف شده شما استفاده می کند.
• مدیریت خطا بهبود یافته: ایمنی نوع پیشرفته و توانایی تنظیم نسخه های بازگشتی فرصت های جدیدی را برای آزمایش و اعتبارسنجی مستقیماً در CSS شما باز می کند.

ایجاد ویژگی های سفارشی پیشرفته

برای ایجاد یک ویژگی سفارشی "استاندارد"، یک نام دارایی اضافه شده توسط -- تنظیم کنید و به این ویژگی یک مقدار بدهید. مقدار این ویژگی های سفارشی به عنوان یک رشته توسط مرورگر تجزیه می شود.

مثال زیر نشان می دهد که چگونه یک ویژگی سفارشی پیش فرض (مبتنی بر رشته) مقداردهی اولیه می شود.

:root {
 --myColor: hotpink;
}

برای به دست آوردن مزایای این "ویژگی های سفارشی پیشرفته"، از جمله معنایی فراتر از یک رشته، ویژگی سفارشی CSS خود را با @property ثبت کنید.

در این مثال همان ویژگی سفارشی با @property مقداردهی اولیه می شود.

@property --myColor {
    syntax: '<color>';
    inherits: false;
    initial-value: hotpink;
  }

ویژگی سفارشی که با @property مقداردهی شده است، جزئیات بسیار بیشتری از یک نام و مقدار را ارائه می دهد. این شامل نوع نحو است و وراثت را درست یا نادرست تنظیم می کند.

مزیت این رویکرد این است که با ویژگی استاندارد، انتظار دارید که آن ویژگی حاوی یک رنگ به عنوان یک مقدار باشد و می‌خواهید از آن رنگ در جای دیگری در شیوه نامه استفاده کنید. اگر شخصی آن ویژگی را به‌روزرسانی کند تا یک عدد به‌عنوان یک مقدار داشته باشد، هرگونه استفاده از ویژگی در جای دیگر با شکست مواجه می‌شود. با استفاده از @property یک رنگ بازگشتی تعریف شده است، همراه با syntax که اعلام می کند این ویژگی باید یک مقدار رنگ داشته باشد. اگر مقداری غیر رنگی استفاده شود، به جای آن از بک گراند استفاده می شود.

نسخه ی نمایشی: پس زمینه گرادیان چشمک زن

یکی از برنامه های کاربردی @property ، انیمیشن صاف ویژگی هایی است که قبلاً انتقال آنها غیرممکن بود، مانند گرادیان ها که توسط مرورگر به عنوان تصاویر درک می شوند. با این حال، اگر از طریق @property به متغیرها معنای نحوی بدهید، می‌توان از آنها در یک دستور گرادیان استفاده کرد. اکنون شما در حال توصیف یک انیمیشن بین دو مقدار اعلام شده در گرادیان هستید که انیمیشن را فعال می کند. مثال زیر را در نظر بگیرید: کارتی با یک انیمیشن پس زمینه ظریف که از دو شیب شعاعی تشکیل شده است که رنگ را در خطوط زمانی مختلف تغییر می دهد:

این را می توان با تنظیم مقادیر ویژگی سفارشی خود به عنوان رنگ به دست آورد:

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

@property --shine-1 {
  syntax: "<color>";
  inherits: false;
  initial-value: wheat;
}

@property --shine-2 {
  syntax: "<color>";
  inherits: false;
  initial-value: lightpink;
}

سپس، برای ایجاد پس‌زمینه گرادیان اولیه به آن‌ها دسترسی دارید:

.card {
background: radial-gradient(
      300px circle at 55% 60% in oklab,
      var(--shine-2), transparent 100% 100%),
      radial-gradient(farthest-side circle at 75% 30% in oklab,
      var(--shine-1) 0%, var(--card-bg) 100%);
}

علاوه بر این، سپس مقادیر موجود در فریم های کلیدی را به روز می کنید:

@keyframes animate-color-1 {
  to {
    --shine-1: orange;
  }
}

@keyframes animate-color-2 {
  to {
    --shine-2: hotpink;
  }
}

و هر کدام را متحرک کنید:

animation: animate-color-1 8s infinite linear alternate, animate-color-2 1s infinite linear alternate;

نتیجه گیری

ویژگی های سفارشی ثبت شده CSS یک ویژگی بسیار قدرتمند است که زبان CSS را با ارائه معنا و زمینه به متغیرهای CSS گسترش می دهد. اکنون، با فرود @property در پایه، این ابرقدرت CSS در حال افزایش است.

خواندن اضافی

• اسناد وب MDN
• @property: دادن قدرت های فوق العاده به متغیرهای CSS