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

یونا کراوتس

CSS Houdini یک اصطلاح جامع است که مجموعه‌ای از APIهای سطح پایین را پوشش می‌دهد که بخش‌هایی از موتور رندر CSS را در معرض دید قرار می‌دهند و به توسعه‌دهندگان اجازه دسترسی به مدل شیء CSS را می‌دهند. این یک تغییر بزرگ برای اکوسیستم CSS است، زیرا توسعه دهندگان را قادر می سازد تا به مرورگر بگویند که چگونه CSS سفارشی را بخواند و آن را تجزیه کند بدون اینکه منتظر بمانید تا فروشندگان مرورگر پشتیبانی داخلی برای این ویژگی ها ارائه دهند. بسیار مهیج!

یکی از هیجان انگیزترین موارد اضافه شده به CSS در چتر هودینی ، API Properties and Values ​​است.

این API ویژگی‌های سفارشی CSS شما (که معمولاً به آن‌ها متغیرهای CSS نیز گفته می‌شود) با دادن معنای معنایی (تعریف شده توسط نحو) و حتی مقادیر بازگشتی به آنها اضافه می‌کند و آزمایش CSS را امکان‌پذیر می‌کند.

نوشتن خواص سفارشی هودینی

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

فایل جاوا اسکریپت جدا (Chromium 78)
CSS.registerProperty({
  name: '--colorPrimary',
  syntax: '',
  initialValue: 'magenta',
  inherits: false
});
موجود در فایل CSS (Chromium 85)
@property --colorPrimary {
  syntax: '';
  initial-value: magenta;
  inherits: false;
}

اکنون می توانید از طریق var(--colorPrimary) مانند هر ویژگی سفارشی CSS دیگری به --colorPrimary دسترسی داشته باشید. با این حال، تفاوت در اینجا این است که --colorPrimary فقط به عنوان یک رشته خوانده نمی شود. داده دارد!

مقادیر بازگشتی

مانند هر ویژگی سفارشی دیگری، می‌توانید مقادیر (با استفاده از var ) یا تنظیم (نوشتن/بازنویسی) مقادیر را دریافت کنید، اما با ویژگی‌های سفارشی Houdini، اگر یک مقدار نادرست را هنگام لغو آن تنظیم کنید، موتور رندر CSS مقدار اولیه را ارسال می‌کند. مقدار بازگشتی) به جای نادیده گرفتن خط.

مثال زیر را در نظر بگیرید. متغیر --colorPrimary دارای initial-value magenta است. اما توسعه دهنده به آن مقدار نامعتبر "23" داده است. بدون @property ، تجزیه کننده CSS کد نامعتبر را نادیده می گیرد. اکنون، تجزیه کننده به magenta باز می گردد. این اجازه می دهد تا برای بازگشت واقعی و تست در CSS. مرتب!

.card {
  background-color: var(--colorPrimary); /* magenta */
}

.highlight-card {
  --colorPrimary: yellow;
  background-color: var(--colorPrimary); /* yellow */
}

.another-card {
  --colorPrimary: 23;
  background-color: var(--colorPrimary); /* magenta */
}

نحو

با ویژگی نحو، اکنون می توانید CSS معنایی را با تعیین یک نوع بنویسید. انواع فعلی مجاز عبارتند از:

  • length
  • number
  • percentage
  • length-percentage
  • color
  • image
  • url
  • integer
  • angle
  • time
  • resolution
  • transform-list
  • transform-function
  • custom-ident (رشته شناسه سفارشی)

تنظیم یک نحو به مرورگر امکان می دهد تا خصوصیات سفارشی را تایپ کند. این فواید زیادی دارد.

برای نشان دادن این نکته، من به شما نشان خواهم داد که چگونه یک گرادیان را متحرک کنید. در حال حاضر، هیچ راهی برای متحرک سازی (یا درون یابی) هموار بین مقادیر گرادیان وجود ندارد، زیرا هر اعلان گرادیان به عنوان یک رشته تجزیه می شود.

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

در این مثال، درصد توقف گرادیان از مقدار شروع 40% به مقدار پایانی 100% از طریق یک تعامل شناور متحرک می شود. شما باید یک انتقال صاف از آن رنگ گرادیان بالا به سمت پایین را ببینید.

مرورگر سمت چپ از Houdini Properties and Values ​​API پشتیبانی می‌کند و یک انتقال صاف گرادیان توقف را ممکن می‌سازد. مرورگر سمت راست این کار را نمی کند. مرورگر غیر پشتیبانی فقط قادر است این تغییر را به‌عنوان رشته‌ای که از نقطه A به نقطه B می‌رود درک کند. فرصتی برای درون‌یابی مقادیر وجود ندارد و بنابراین شما آن انتقال صاف را نمی‌بینید.

با این حال، اگر هنگام نوشتن ویژگی های سفارشی، نوع نحو را اعلام کنید و سپس از آن ویژگی های سفارشی برای فعال کردن انیمیشن استفاده کنید، انتقال را مشاهده خواهید کرد. شما می توانید ویژگی سفارشی --gradPoint مانند این نمونه سازی کنید:

/* Check for Houdini support & register property */
@supports (background: paint(something)) {
  @property --gradPoint {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 40%;
  }
}

و وقتی نوبت به انیمیشن آن رسید، می توانید مقدار را از 40% اولیه به 100% به روز کنید:

@supports (background: paint(something)) {
  .post:hover,
  .post:focus {
    --gradPoint: 100%;
  }
}

این اکنون آن انتقال گرادیان صاف را فعال می کند.

مرزهای گرادیان به آرامی در حال انتقال هستند. نسخه ی نمایشی در Glitch را ببینید

نتیجه

قانون @property با اجازه دادن به شما برای نوشتن CSS معنی دار در خود CSS، یک فناوری هیجان انگیز را حتی بیشتر در دسترس می کند. برای کسب اطلاعات بیشتر در مورد CSS Houdini و Properties and Values ​​API، این منابع را بررسی کنید:

عکس کریستین اسکوبار در Unsplash.