תוך כמה קליקים תוכלו לשפר את ה-CSS באמצעות וורקלטס של Houdini לצביעה.
CSS Houdini הוא מונח-על שמתאר סדרה של ממשקי API ברמה נמוכה לדפדפנים, שמעניקים למפתחים הרבה יותר שליטה וכוח על הסגנונות שהם כותבים.
ב-Houdini אפשר להשתמש ב-CSS סמנטי יותר באמצעות מודל אובייקט מוגדר. מפתחים יכולים להגדיר מאפייני CSS מותאמים אישית מתקדמים עם תחביר, ערכי ברירת מחדל ויורשה באמצעות Properties and Values API.
בנוסף, ה-API כולל 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 ולראות שהסגנונות שלכם פועלים בכל הדפדפנים המודרניים באמצעות CSS Paint Polyfill. כדי להציג כמה הטמעות ייחודיות, וגם כדי לספק ספרייה של משאבים ושל רכיבי 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 של הציור. כדי להתקין את ה-worklet, צריך ליצור כתובת URL שמפנה אל worklet.js של החבילה ולרשום אותה. אפשר לעשות זאת באמצעות:
CSS.paintWorklet.addModule(..file-path/worklet.js)
השם והקישור של חבילת ה-npm מופיעים בכל כרטיס של רכיב עבודה.
תצטרכו גם לכלול את CSS Paint Polyfill באמצעות סקריפט או לייבא אותו ישירות, כמו שאתם עושים עם מסגרת או חבילה.
הנה דוגמה לאופן שבו משתמשים ב-Houdini עם ה-polyfill של paint ב-bundlers מודרניים:
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 לא מתארחים וורקלטים, אלא מוצגים עבודות של חברי הקהילה. אם יש לכם נכס דיגיטלי או משאב שתרצו לשלוח, תוכלו לעיין במאגר ב-GitHub עם ההנחיות לתרומות. נשמח לראות מה תייצרו!