ویژگی های سفارشی هوشمندتر با API جدید هودینی

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

Sam Richard

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

هودینی چیست؟

قبل از صحبت در مورد API جدید، اجازه دهید به سرعت در مورد هودینی صحبت کنیم. CSS-TAG Houdini Task Force، که بیشتر با نام CSS Houdini یا به سادگی Houdini شناخته می شود، برای "توسعه ویژگی هایی وجود دارد که "جادویی" استایل و چیدمان در وب را توضیح می دهد. مجموعه مشخصات هودینی برای باز کردن قدرت موتور رندر مرورگر طراحی شده است، که هم بینش عمیق‌تری نسبت به سبک‌های ما و هم توانایی گسترش موتور رندر ما را ممکن می‌سازد. با این کار، مقادیر CSS تایپ شده در جاوا اسکریپت و polyfilling یا اختراع CSS جدید بدون ضربه عملکرد در نهایت امکان پذیر است. هودینی این پتانسیل را دارد که خلاقیت را در وب تقویت کند.

CSS Properties and Values ​​API Level 1

CSS Properties and Values ​​API Level 1 (Houdini Props and Vals) به ما این امکان را می دهد که به ویژگی های سفارشی خود ساختار بدهیم. این وضعیت فعلی هنگام استفاده از ویژگی های سفارشی است:

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

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

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

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

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

آناتومی یک ملک ثبت شده

ثبت ملک به صورت زیر است:

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

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

name: string

نام ملک سفارشی.

syntax: string

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

inherits: boolean

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

initialValue: string

ارزش اولیه ملک سفارشی

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

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

گوچاس

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

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

متحرک سازی خواص سفارشی

یک ویژگی سفارشی ثبت‌شده یک جایزه سرگرم‌کننده فراتر از بررسی نوع ارائه می‌کند: توانایی متحرک کردن آن! یک مثال اولیه انیمیشن به این صورت است:

<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 متحرک می کند، بنابراین شیب خطی ما را متحرک می کند. اشکال زیر را بررسی کنید تا کد کامل را در عمل ببینید و خودتان با آن بازی کنید.

نتیجه

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

عکس از Maik Jonietz در Unsplash