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

Una Kravets

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

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

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

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

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

CSS.registerProperty({
  name: '--colorPrimary',
  syntax: '<color>',
  initialValue: 'magenta',
  inherits: false
});

@property --colorPrimary {
  syntax: '<color>';
  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 را مانند این نمونه سازی کنید:

@property --gradPoint {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 40%;
}

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

.post:hover,
.post:focus {
  --gradPoint: 100%;
}

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

نتیجه گیری

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

• آیا هودینی هنوز آماده است؟
• مرجع MDN هودینی
• ویژگی های سفارشی هوشمندتر با API جدید هودینی
• هودینی CSSWG Issue Queue

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