@property: מתן כוחות-על למשתני CSS

Una Kravets

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

אחת מהתוספות המעניינות ביותר ל-CSS במסגרת Houdini היא Properties and Values API.

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

כתיבת מאפיינים מותאמים אישית ב-Houdini

הנה דוגמה להגדרת מאפיין מותאם אישית (למשל: משתנה CSS), אבל עכשיו עם תחביר (סוג), ערך ראשוני (חלופה) וערכו של בוליאני בירושה (האם הוא יקבל בירושה את הערך מההורה או לא?). הדרך הנוכחית לעשות זאת היא באמצעות CSS.registerProperty() ב-JavaScript, אבל בדפדפנים שתומכים בכך אפשר להשתמש ב-@property:

CSS.registerProperty({
  name: '--colorPrimary',
  syntax: '<color>',
  initialValue: 'magenta',
  inherits: false
});

@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

עכשיו אפשר לגשת אל --colorPrimary כמו לכל מאפיין CSS בהתאמה אישית אחר, דרך var(--colorPrimary). עם זאת, ההבדל הוא ש---colorPrimary לא נקרא רק כמחרוזת. יש בו נתונים!

ערכים חלופיים

כמו בכל מאפיין מותאם אישית אחר, אפשר לקבל (באמצעות var) או להגדיר (כתיבה/כתיבה מחדש) ערכים, אבל במאפיינים מותאמים אישית של Houdini, אם מגדירים ערך שקרי בזמן שמבטלים את ההגדרה שלו, מנוע העיבוד של CSS ישלח את הערך הראשוני (ערך החלופות שלו) במקום להתעלם מהשורה.

דוגמה: המשתנה --colorPrimary מכיל initial-value של magenta. אבל המפתח הגדיר לו את הערך הלא תקין '23'. בלי @property, מנתח ה-CSS יתעלם מהקוד הלא חוקי. עכשיו, המנתח חוזר ל-magenta. כך אפשר להשתמש באפשרויות חלופיות אמיתיות ובבדיקות בתוך CSS. נהדר!

.card {
  background-color: var(--colorPrimary); /* magenta */
}

.highlight-card {
  --colorPrimary: yellow;
  background-color: var(--colorPrimary); /* yellow */
}

.another-card {
  --colorPrimary: 23;
  background-color: var(--colorPrimary); /* magenta */
}

תחביר

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

• length
• number
• percentage
• length-percentage
• color
• image
• url
• integer
• angle
• time
• resolution
• transform-list
• transform-function
• custom-ident (מחרוזת מזהה בהתאמה אישית)

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

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

בדוגמה הזו, אחוז העצירה של העקומה נע במעבר אנכי מערך התחלה של 40% לערך סיום של 100% באמצעות אינטראקציה של עכבר מרחף. אמורה להופיע מעבר חלק של צבע הדרגתי העליון כלפי מטה.

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

עם זאת, אם תצהירו על סוג תחביר בזמן כתיבת מאפיינים מותאמים אישית, ואז תשתמשו במאפיינים המותאמים אישית האלה כדי להפעיל את האנימציה, תוכלו לראות את המעבר. אפשר ליצור מופע של המאפיין המותאם אישית --gradPoint באופן הבא:

@property --gradPoint {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 40%;
}

ואז, כשמגיע הזמן להוסיף אנימציה, אפשר לעדכן את הערך מ-40% הראשוני ל-100%:

.post:hover,
.post:focus {
  --gradPoint: 100%;
}

כך תהיה לך אפשרות ליצור את המעבר החלק בין הצבעים.

סיכום

הכלל @property מאפשר לכתוב CSS בעל משמעות סמנטית בתוך קובץ ה-CSS עצמו, וכך הופך טכנולוגיה מלהיבה לנגישה יותר. למידע נוסף על CSS Houdini ועל Properties and Values API, אפשר לעיין במקורות המידע הבאים:

• האם Houdini מוכן?
• חומר עזר בנושא Houdini ב-MDN
• נכסים מותאמים אישית חכמים יותר באמצעות ה-API החדש של Houdini
• תור הבעיות של Houdini CSSWG

תמונה של Cristian Escobar ב-Unsplash.