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

רק עוד כמה קליקים, אפשר לשפר את שירות ה-CSS שלכם בעזרת לעבודות צבע של Houdini.

Una Kravets

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

שכבת Houdini

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

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

הסבר על worklets של Houdini

worklets של Houdini הם הוראות דפדפן שפועלות מחוץ ל-thread הראשי וניתן לקרוא להם הדרושים. זמני עבודה (worklet) מאפשרים לכתוב ב-CSS מודולרי כדי לבצע משימות ספציפיות, ומחייבים כתובת של JavaScript לייבוא ולרישום. בדומה לעובדי שירות לסגנון 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 בממשקי המשתמש שלכם.

לדוגמה, במקום להמתין לדפדפן להטמיע גבולות זוויתיים, אפשר לכתוב ב-worklet שלכם, או השתמשו ב-worklet קיים שפורסם. לאחר מכן, במקום להשתמש ברדיוס גבול להחיל את ה-worklet הזה על גבולות וקיצוץ.

הדוגמה שלמעלה משתמשת באותו עבודת צבע עם ארגומנטים שונים (ראו את הקוד בהמשך) כדי להשיג את התוצאה הזו. הדגמה (דמו) של Glitch. 
.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 API הנתמכים ביותר, והמפרט שלו הוא W3C המלצה על מועמד. היא מופעלת כרגע בכל הדפדפנים המבוססים על Chromium, באופן חלקי שנתמכת ב-Safari, והיא נמצאת בבדיקה גם ב-Firefox.

תמיכה ב-Caniuse
CSS Painting API נתמך כרגע בדפדפנים המבוססים על Chromium.

אבל גם ללא תמיכה מלאה בדפדפן, אתם עדיין יכולים להיות יצירתיים עם Houdini Paint API ולראות הסגנונות שלך פועלים בכל הדפדפנים המתקדמים באמצעות צבע CSS Polyfill. וכדי להציג כמה בהטמעות, וגם כדי לספק ספריית משאבים ו-worklet, הצוות שלי בנה houdini.how.

Houdini.how

צילום מסך של דף worklet.
צילום מסך מדף הבית של Houdini.how.

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

שימוש ב-Houdini

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

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

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 עם 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.

כמו כן, צריך לכלול את ה-Pcolor Polyfill של שירות CSS באמצעות סקריפט או לייבא אותו ישירות, כמו באמצעות framework או Bundler.

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