Worklets رنگ متقابل مرورگر و Houdini.how

شارژ کردن CSS خود با استفاده از رنگ Houdini تنها با چند کلیک فاصله دارد.

Una Kravets

CSS Houdini اصطلاحی است که مجموعه‌ای از APIهای مرورگر سطح پایین را توصیف می‌کند که به توسعه‌دهندگان کنترل و قدرت بسیار بیشتری بر سبک‌هایی که می‌نویسند می‌دهد.

هودینی CSS معنایی بیشتری را با مدل شیء تایپ شده فعال می کند. توسعه‌دهندگان می‌توانند ویژگی‌های سفارشی پیشرفته CSS را با نحو، مقادیر پیش‌فرض و ارث از طریق Properties and Values ​​API تعریف کنند.

همچنین مجموعه‌های رنگ، طرح‌بندی و انیمیشن را معرفی می‌کند که دنیایی از امکانات را باز می‌کند و نویسندگان را آسان‌تر می‌کند تا به فرآیند استایل و طرح‌بندی موتور رندر مرورگر متصل شوند.

درک ورکلت هودینی

Houdini worklets دستورالعمل‌های مرورگر هستند که از رشته اصلی خارج می‌شوند و می‌توانند در صورت نیاز فراخوانی شوند. Worklet ها به شما امکان می دهند CSS مدولار را برای انجام وظایف خاص بنویسید و برای وارد کردن و ثبت نام به یک خط جاوا اسکریپت نیاز دارید. تقریباً مانند Service Workers برای سبک CSS، Worklet های Houdini در برنامه شما ثبت می شوند و پس از ثبت نام می توانند در CSS شما با نام استفاده شوند.

نوشتن فایل Worklet ثبت ماژول worklet ( CSS.paintWorklet.addModule(workletURL) ) استفاده از worklet ( background: paint(confetti) )

پیاده سازی ویژگی های خود با CSS Painting API

CSS Painting API نمونه‌ای از چنین Worklet (Worklet Paint) است و توسعه دهندگان را قادر می‌سازد تا توابع نقاشی سفارشی بوم مانندی را تعریف کنند که می‌تواند مستقیماً در CSS به عنوان پس‌زمینه، حاشیه، ماسک و موارد دیگر استفاده شود. دنیای کاملی از امکانات برای استفاده از CSS Paint در رابط های کاربری خود وجود دارد.

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

.angled {
  --corner-radius: 15 0 0 0;
  --paint-color: #6200ee;
  --stroke-weight: 0;

  /* Mask every angled button with fill mode */
  -webkit-mask: paint(angled-corners, filled);
}

.outline {
  --stroke-weight: 1;

  /* Paint outline */
  border-image: paint(angled-corners, outlined) 0 fill !important;
}

CSS Painting API در حال حاضر یکی از APIهای Houdini است که بهترین پشتیبانی را دارد و مشخصات آن یک توصیه نامزد W3C است. در حال حاضر در تمام مرورگرهای مبتنی بر Chromium فعال است، تا حدی در Safari پشتیبانی می‌شود و برای Firefox در دست بررسی است.

اما حتی بدون پشتیبانی کامل از مرورگر، همچنان می‌توانید با Houdini Paint API خلاق باشید و با CSS Paint Polyfill استایل‌های خود را در تمام مرورگرهای مدرن مشاهده کنید. و برای نمایش چند پیاده‌سازی منحصربه‌فرد، و همچنین ارائه یک منبع و کتابخانه Worklet، تیم من houdini.how را ساخت.

هودینی.چگونه

Houdini.how یک کتابخانه و مرجع برای کارنامه ها و منابع هودینی است. همه چیزهایی را که باید در مورد CSS Houdini بدانید ارائه می‌کند: پشتیبانی مرورگر، مروری بر API‌های مختلف آن، اطلاعات استفاده ، منابع اضافی و نمونه‌های Worklet paint زنده. هر نمونه در Houdini.how توسط CSS Paint API پشتیبانی می شود، به این معنی که هر کدام روی همه مرورگرهای مدرن کار می کنند. یک چرخش بده!

با استفاده از هودینی

Worklet های Houdini یا باید از طریق یک سرور به صورت محلی اجرا شوند یا در حال تولید بر روی HTTPS. برای کار با یک Worklet Houdini، باید آن را به صورت محلی نصب کنید یا از یک شبکه تحویل محتوا (CDN) مانند unpkg برای ارائه فایل ها استفاده کنید. سپس باید worklet را به صورت محلی ثبت کنید.

چند راه برای گنجاندن Worklets Houdini.how در پروژه های وب خود وجود دارد. آنها می توانند از طریق CDN در ظرفیت نمونه سازی مورد استفاده قرار گیرند، یا می توانید با استفاده از ماژول های npm، Worklet ها را به تنهایی مدیریت کنید. در هر صورت، باید CSS Paint Polyfill را نیز اضافه کنید تا اطمینان حاصل کنید که آنها با مرورگرها سازگار هستند.

1. نمونه سازی با CDN

هنگام ثبت نام از unpkg، می توانید بدون نیاز به نصب محلی Worklet، مستقیماً به فایل worklet.js پیوند دهید. Unpkg به worklet.js به عنوان اسکریپت اصلی حل می شود، یا می توانید آن را خودتان مشخص کنید. Unpkg باعث مشکلات CORS نمی شود، زیرا از طریق HTTPS ارائه می شود.

CSS.paintWorklet.addModule("https://unpkg.com/<package-name>");

توجه داشته باشید که این ویژگی های سفارشی برای مقادیر دستوری و بازگشتی را ثبت نمی کند. در عوض، هر کدام دارای مقادیر بازگشتی هستند که در Worklet تعبیه شده است.

برای ثبت اختیاری خواص سفارشی، فایل properties.js را نیز وارد کنید.

<script src="https://unpkg.com/<package-name>/properties.js"></script>

برای اضافه کردن CSS Paint Polyfill با unpkg:

<script src="https://unpkg.com/css-paint-polyfill"></script>

2. مدیریت Worklet ها از طریق NPM

Worklet خود را از npm نصب کنید:

npm install <package-name>
npm install css-paint-polyfill

وارد کردن این بسته به صورت خودکار رنگ را تزریق نمی کند. برای نصب worklet، باید یک URL ایجاد کنید که به worklet.js بسته می‌رسد و آن را ثبت کنید. شما این کار را با:

CSS.paintWorklet.addModule(..file-path/worklet.js)

نام بسته npm و پیوند را می توان در هر کارت Worklet یافت.

شما همچنین باید CSS Paint Polyfill را از طریق اسکریپت وارد کنید یا مستقیماً آن را وارد کنید، همانطور که با یک چارچوب یا باندلر انجام می دهید.

در اینجا مثالی از نحوه استفاده از هودینی با پلی فیل رنگ در باندلرهای مدرن آورده شده است:

import 'css-paint-polyfill';
import '<package-name>/properties.js'; // optionally register properties
import workletURL from 'url:<package-name>/worklet.js';

CSS.paintWorklet.addModule(workletURL);

مشارکت

اکنون که با چند نمونه هودینی بازی کرده‌اید، نوبت شماست که خودتان مشارکت کنید! Houdini.how خودش میزبان هیچ Worklet نیست و در عوض کار جامعه را به نمایش می گذارد. اگر کارنامه یا منبعی دارید که می‌خواهید ارسال کنید، مخزن github را با دستورالعمل‌های مشارکت بررسی کنید. ما دوست داریم ببینیم شما با چه چیزی روبرو می شوید!