ویژگی‌های سفارشی هوشمندتر با میانای برنامه‌سازی کاربردی جدید Houdini

انتقال‌ها و حفاظت از داده‌ها در CSS

Sam Richard

ویژگی‌های سفارشی CSS، که با نام متغیرهای CSS نیز شناخته می‌شوند، به شما امکان می‌دهند ویژگی‌های خودتان را در CSS تعریف کنید و از مقادیر آن‌ها در سراسر CSS استفاده کنید. اگرچه این ویژگی‌ها امروزه بسیار مفید هستند، اما کاستی‌هایی دارند که می‌تواند کار با آن‌ها را دشوار کند: آن‌ها می‌توانند هر مقداری را بپذیرند، بنابراین ممکن است به‌طور تصادفی با چیزی غیرمنتظره بازنویسی شوند، همیشه مقادیر خود را از والد خود به ارث می‌برند، و نمی‌توانید آن‌ها را انتقال دهید. با CSS Properties and Values API Level 1 Houdini، که اکنون در Chrome 78 دردسترس است، این کاستی‌ها برطرف شده‌اند و ویژگی‌های سفارشی CSS را بسیار قدرتمند کرده‌اند!

‫Houdini چیست؟

قبل‌از صحبت درباره API جدید، بیایید به‌طور خلاصه درباره Houdini صحبت کنیم. The CSS-TAG Houdini Task Force, better known as CSS Houdini or simply Houdini, exists to "develop features that explain the 'magic' of styling and layout on the web". مجموعه مشخصات Houdini طراحی شده‌اند تا قدرت موتور رندرینگ مرورگر را باز کنند، که هم بینش عمیق‌تری به سبک‌های ما می‌دهد و هم توانایی گسترش موتور رندرینگ ما را فراهم می‌کند. با این کار، مقادیر CSS تایپ‌شده در جاوا اسکریپت و شبیه‌سازی مرورگر یا ابداع CSS جدید بدون افت عملکرد بالاخره امکان‌پذیر شده است. Houdini این پتانسیل را دارد که خلاقیت را در وب به‌شدت تقویت کند.

CSS Properties and Values API Level 1

سطح ۱ میانای برنامه‌سازی کاربردی مقادیر و ویژگی‌های CSS (Houdini Props and Vals) به ما امکان می‌دهد به ویژگی‌های سفارشی‌مان ساختار بدهیم. این وضعیت فعلی هنگام استفاده از ویژگی‌های سفارشی است:

.thing {
  --my-color: green;
}

چون ویژگی‌های سفارشی نوع ندارند، ممکن است به‌روش‌های غیرمنتظره‌ای لغو شوند. برای مثال، ببینید اگر --my-color را با نشانی وب تعریف کنید چه اتفاقی می‌افتد.

.thing {
  --my-color: url('not-a-color');
  color: var(--my-color);
}

در اینجا، چون --my-color تایپ نشده است، نمی‌داند که نشانی وب مقدار رنگ معتبری نیست! وقتی از آن استفاده می‌کنیم، به مقادیر پیش‌فرض برمی‌گردد (سیاه برای color، شفاف برای background). با Houdini Props و Vals، ویژگی‌های سفارشی را می‌توان ثبت کرد تا مرورگر بداند چه چیزی باید باشد!

اکنون، ویژگی سفارشی --my-color به‌عنوان رنگ ثبت شده است! این کار به مرورگر می‌گوید چه نوع مقادیری مجاز است و چطور می‌تواند آن ویژگی را تایپ کند و با آن رفتار کند!

ساختار دارایی ثبت‌شده

ثبت دارایی به این شکل است:

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

از گزینه‌های زیر پشتیبانی می‌کند:

name: string

نام مشخصه سفارشی.

syntax: string

نحوه تجزیه کردن ویژگی سفارشی. می‌توانید فهرست کاملی از مقادیر ممکن را در مشخصات مقادیر و واحدهای CSS پیدا کنید. پیش‌فرض‌ها به *.

inherits: boolean

اینکه آیا مقدار والدش را به ارث می‌برد یا نه. پیش‌فرض‌ها به true.

initialValue: string

مقدار اولیه ویژگی سفارشی.

درحال بررسی دقیق‌تر syntax. تعدادی گزینه معتبر وجود دارد که از عدد تا رنگ و انواع <custom-ident> را شامل می‌شود. این نحوها را می‌توان بااستفاده از مقادیر زیر نیز اصلاح کرد

• افزودن + نشان می‌دهد که فهرستی از مقادیر آن نحو را که با فاصله از هم جدا شده‌اند می‌پذیرد. برای مثال، <length>+ فهرستی از طول‌ها خواهد بود که با فاصله از هم جدا شده‌اند
• افزودن# نشان می‌دهد که فهرستی از مقادیر جداشده با کاما از آن نحو را می‌پذیرد. برای مثال، <color># فهرستی از رنگ‌ها خواهد بود که با کاما از هم جدا شده‌اند
• افزودن | بین نحوها یا شناسه‌ها نشان می‌دهد که هرکدام از گزینه‌های ارائه‌شده معتبر هستند. برای مثال، <color># | <url> | magic می‌تواند فهرست رنگ‌های جداشده با کاما، نشانی وب، یا کلمه magic باشد.

Gotchas

دو نکته مهم درباره Houdini Props و Vals وجود دارد. اولین مورد این است که پس‌از تعریف، هیچ راهی برای به‌روزرسانی ویژگی ثبت‌شده موجود وجود ندارد و تلاش برای ثبت مجدد ویژگی خطایی را نشان می‌دهد که نشان می‌دهد قبلاً تعریف شده است.

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

پویانمایی کردن ویژگی‌های سفارشی

A registered custom property provides a fun bonus beyond type checking: the ability to animate it! نمونه پویانمایی پایه به‌این‌صورت است:

<script>
CSS.registerProperty({
  name: '--stop-color',
  syntax: '<color>',
  inherits: false,
  initialValue: 'blue',
});
</script>

<style>
button {
  --stop-color: red;
  transition: --stop-color 1s;
}

button:hover {
  --stop-color: green;
}
</style>

وقتی نشانگر را روی دکمه نگه دارید، رنگ آن از قرمز به سبز تغییر می‌کند! بدون ثبت ویژگی، از یک رنگ به رنگ دیگر می‌پرد زیرا بدون ثبت، مرورگر نمی‌داند چه چیزی بین یک مقدار و مقدار بعدی انتظار می‌رود و بنابراین نمی‌تواند توانایی انتقال آن‌ها را تضمین کند. بااین‌حال، این مثال را می‌توان یک گام فراتر برد تا گرادیان‌های CSS را پویانمایی کرد! CSS زیر را می‌توان با همان دارایی ثبت‌شده نوشت:

button {
  --stop-color: red;
  background: linear-gradient(var(--stop-color), black);
  transition: --stop-color 1s;
}

button:hover {
  --stop-color: green;
}

این کار ویژگی سفارشی ما را که بخشی از linear-gradient است پویانمایی می‌کند، بنابراین شیب خطی ما را پویانمایی می‌کند. برای دیدن کد کامل در عمل و بازی کردن با آن، Codepen زیر را بررسی کنید.

نتیجه‌گیری

Houdini در راه است تا به مرورگرها برسد و با آن، روش‌های کاملاً جدیدی برای کار با CSS و گسترش آن ارائه می‌شود. با Paint API که قبلاً عرضه شده است و اکنون Custom Props و Vals، جعبه ابزار خلاقانه ما درحال گسترش است و به ما امکان می‌دهد ویژگی‌های CSS تایپ‌شده را تعریف کنیم و از آن‌ها برای ایجاد و پویانمایی طرح‌های جدید و هیجان‌انگیز استفاده کنیم. موارد بیشتری نیز در راه است، در صف مشکلات Houdini که می‌توانید بازخورد ارائه دهید و ببینید چه چیزی در آینده برای Houdini در نظر گرفته شده است. Houdini برای توسعه ویژگی‌هایی وجود دارد که «جادوی» سبک‌بندی و چیدمان در وب را توضیح می‌دهند، پس دست‌به‌کار شوید و از این ویژگی‌های جادویی به‌خوبی استفاده کنید.