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

Una Kravets

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

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

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

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

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

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

@property --colorPrimary {
  syntax: '';
  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 כך:

/* Check for Houdini support & register property */
@supports (background: paint(something)) {
  @property --gradPoint {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 40%;
  }
}

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

@supports (background: paint(something)) {
  .post:hover,
  .post:focus {
    --gradPoint: 100%;
  }
}

פעולה זו תאפשר עכשיו מעבר חלק של ההדרגתיות.

סיכום

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

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

תמונה מאת Cristian Escobar ב-UnFlood.