@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:

קובץ JavaScript נפרד (Chromium 78)
CSS.registerProperty({
  name: '--colorPrimary',
  syntax: '<color>',
  initialValue: 'magenta',
  inherits: false
});
הכלול בקובץ CSS (Chromium 85)
@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 (מחרוזת מזהה בהתאמה אישית)

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

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

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

בדוגמה הזו, אחוז העצירה של העקומה נע מ-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 Value API, עיינו במקורות המידע הבאים:

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