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

Una Kravets

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

אחת התוספות הכי מלהיבות ל-CSS במטריית Houdini היא מאפיינים וערכים 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, אם הגדרת FALSE כשמבטלים אותו, מנגנון העיבוד של 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 Value API, משאבים:

תמונה מאת כריסטיאן אסקובר ב-Unbounce.