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

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

אונה קראבטס

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

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

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

הבנת worklet של Houdini

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

API ל'ציור ב-CSS' נתמך בשלב זה בדפדפנים המבוססים על Chromium.

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

Houdini.how

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

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

שימוש ב-Hudini

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

יש כמה דרכים לכלול את worklet של Houdini.how בפרויקטים שלכם באינטרנט. אפשר להשתמש בהם דרך CDN בתור אב טיפוס, או לנהל את סביבות העבודה בעצמכם באמצעות מודולים של 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 של הצבע. כדי להתקין את ה-worklet, צריך ליצור כתובת URL שתואמת ל-worklet.js של החבילה, ולרשום אותה. אתם עושים זאת באמצעות:

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

השם והקישור של חבילת ה-NPM מופיעים בכל כרטיס worklet.

בנוסף, תצטרכו לכלול את ה-CSS Paint Polyfill באמצעות סקריפט או לייבא אותו ישירות, כמו עם framework או Bundler.

לפניכם דוגמה לשימוש ב-Hudini עם פוליפיל צבע במארזי חבילות מודרניים:

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

CSS.paintWorklet.addModule(workletURL);

הערה: הוראות ספציפיות יותר לכל bundler מופיעות בדף השימוש באתר Houdini.how.

הוספת תוכן

עכשיו, אחרי ששיחקתם עם כמה דוגמאות של Houdini, תורכם להוסיף תוכן משלכם! Houdini.how לא מארחת worklet בעצמו, אלא מציגה את העבודה של הקהילה. אם יש לכם worklet או משאב שאתם רוצים לשלוח, קראו את מאגר github וההנחיות לתרומות. נשמח לשמוע מה דעתך.