worklets של צבעים בדפדפנים שונים ו-Houdini.how

תוך כמה קליקים תוכלו לשפר את ה-CSS באמצעות וורקלטס של Houdini לצביעה.

Una Kravets

CSS Houdini הוא מונח-על שמתאר סדרה של ממשקי API ברמה נמוכה לדפדפנים, שמעניקים למפתחים הרבה יותר שליטה וכוח על הסגנונות שהם כותבים.

ב-Houdini אפשר להשתמש ב-CSS סמנטי יותר באמצעות מודל אובייקט מוגדר. מפתחים יכולים להגדיר מאפייני CSS מותאמים אישית מתקדמים עם תחביר, ערכי ברירת מחדל ויורשה באמצעות Properties and Values API.

בנוסף, הוספנו worklets של צביעה, פריסה ואנימציה, שמאפשרים ליוצרים להתחבר בקלות לתהליך העיצוב והפריסה של מנוע הרינדור בדפדפן, וכך פותחים עולם של אפשרויות.

הסבר על worklets של Houdini

הוראות ל-Houdini worklets הן הוראות לדפדפן שפועלות מחוץ ל-thread הראשי, ואפשר להפעיל אותן לפי הצורך. באמצעות Worklets אפשר לכתוב CSS מודולרי כדי לבצע משימות ספציפיות, ונדרש רק שורה אחת של JavaScript כדי לייבא ולרשום אותם. בדומה ל-service workers לסגנון CSS, worklets של Houdini רשומים באפליקציה, ואחרי הרישום אפשר להשתמש בהם ב-CSS לפי שם.

כתיבת קובץ worklet רישום מודול worklet (CSS.paintWorklet.addModule(workletURL)) שימוש ב-worklet (background: paint(confetti))

הטמעת תכונות משלכם באמצעות CSS Painting API

CSS Painting API הוא דוגמה ל-worklet כזה (ה-worklet של Paint), ומאפשר למפתחים להגדיר פונקציות ציור בהתאמה אישית שדומות ללוח, שאפשר להשתמש בהן ישירות ב-CSS כרקעים, גבולות, מסכות ועוד. יש עולם שלם של אפשרויות לשימוש ב-CSS Paint בממשקי המשתמש שלכם.

לדוגמה, במקום להמתין עד שדפדפן יטמיע את התכונה 'גבולות בזווית', אפשר לכתוב וורקלט משלכם של Paint או להשתמש בוורקלט שפורסם. לאחר מכן, במקום להשתמש ב-border-radius, מחילים את ה-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 ולראות את הסגנונות שלכם בכל הדפדפנים המתקדמים – בעזרת צבע ה-Polyfill של CSS. כדי להציג כמה הטמעות ייחודיות, וכדי לספק ספריית משאבים ו-worklet, הצוות שלי יצר את houdini.how.

Houdini.how

Houdini.how היא ספרייה ומקור מידע ל-worklets ולמשאבים של Houdini. באתר תוכלו למצוא את כל מה שצריך לדעת על CSS Houdini: תמיכה בדפדפנים, סקירה כללית של ממשקי ה-API השונים, מידע על שימוש, משאבים נוספים ודוגמאות ל-worklet של ציור בזמן אמת. כל דוגמה ב-Houdini.how נתמכת על ידי CSS Paint API, כלומר כל אחת מהן פועלת בכל הדפדפנים המודרניים. כדאי לנסות!

שימוש ב-Houdini

צריך להריץ את ה-worklets של Houdini דרך שרת באופן מקומי, או ב-HTTPS בסביבת הייצור. כדי לעבוד עם וורקלט של Houdini, צריך להתקין אותו באופן מקומי או להשתמש ברשת CDN (רשת להצגת תכנים) כמו unpkg כדי להציג את הקבצים. לאחר מכן תצטרכו לרשום את ה-worklet באופן מקומי.

יש כמה דרכים להוסיף את worklets של Houdini.how כדי להציג בפרויקטים שלכם באינטרנט. אפשר להשתמש בהם דרך CDN לצורך יצירת אב טיפוס, או לנהל את ה-worklets בעצמכם באמצעות מודולים של npm. בכל מקרה, כדאי לכלול גם את ה-CSS Paint Polyfill כדי לוודא שהם תואמים לדפדפנים שונים.

1. יצירת אב טיפוס באמצעות CDN

כשמפעילים רישום מ-unpkg, אפשר לקשר ישירות לקובץ worklet.js בלי צורך להתקין את ה-worklet באופן מקומי. 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 מופיעים בכל כרטיס של רכיב עבודה.

תצטרכו גם לכלול את CSS Paint Polyfill באמצעות סקריפט או לייבא אותו ישירות, כמו שאתם עושים עם מסגרת או חבילה.

הנה דוגמה לשימוש ב-Houdini עם פוליפילם של צבע בחבילות מודרניות:

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, הגיע הזמן לתרום דוגמאות משלכם! ב-Houdini.how לא מתארחים וורקלטים, אלא מוצגים עבודות של חברי הקהילה. אם יש לכם worklet או משאב שאתם רוצים לשלוח, תוכלו לעיין במאגר github שכולל הנחיות לתרומות. נשמח לראות מה תייצרו!