נכסים מותאמים אישית חכמים יותר עם ה-API החדש של Houdini

מעברים והגנה על נתונים ב-CSS

Sam Richard

מאפיינים מותאמים אישית של CSS, שנקראים גם משתני CSS, מאפשרים לכם להגדיר מאפיינים משלכם ב-CSS ולהשתמש בערכים שלהם בכל ה-CSS. למרות שהם שימושיים מאוד כיום, יש להם חסרונות שיכולים להקשות על העבודה איתם: הם יכולים לקבל כל ערך, כך שניתן להחליף אותם בטעות במשהו לא צפוי, הם תמיד יורשים את הערכים שלהם מההורה שלהם, ואי אפשר להעביר אותם. עם CSS Properties and Values API Level 1 של Houdini, שזמין עכשיו ב-Chrome 78, אפשר להתגבר על החסרונות האלה ולהפוך את המאפיינים המותאמים אישית של CSS לעוצמתיים במיוחד.

מה זה Houdini?

לפני שנדבר על ה-API החדש, נדבר בקצרה על Houdini. כוח המשימה CSS-TAG Houdini, שמוכר יותר בשם CSS Houdini או פשוט Houdini, קיים כדי "לפתח תכונות שמסבירות את 'הקסם' של העיצוב והפריסה באינטרנט". אוסף המפרטים של Houdini נועד לפתוח את היכולות של מנוע הרינדור של הדפדפן, כדי לאפשר תובנות מעמיקות יותר לגבי הסגנונות שלנו ואת היכולת להרחיב את מנוע הרינדור. הוא מאפשר להקליד ערכי CSS ב-JavaScript, להשתמש ב-polyfill או להמציא CSS חדש בלי לפגוע בביצועים. ‫Houdini יכול לשפר את היצירתיות באינטרנט.

CSS Properties and Values API Level 1

CSS Properties and Values API Level 1 (Houdini Props and Vals) מאפשר לנו לתת מבנה למאפיינים המותאמים אישית שלנו. זה המצב הנוכחי כשמשתמשים במאפיינים מותאמים אישית:

.thing {
  --my-color: green;
}

בגלל שלמאפיינים מותאמים אישית אין סוגים, אפשר לשנות אותם בדרכים לא צפויות. לדוגמה, מה קורה אם מגדירים את --my-color עם כתובת URL.

.thing {
  --my-color: url('not-a-color');
  color: var(--my-color);
}

כאן, מכיוון ש---my-color לא מוקלד, הוא לא יודע שכתובת URL היא לא ערך צבע חוקי. כשאנחנו משתמשים בו, הוא חוזר לערכי ברירת המחדל (שחור עבור color, שקוף עבור background). באמצעות Houdini Props and Vals, אפשר לרשום מאפיינים מותאמים אישית כדי שהדפדפן יידע מה הם אמורים להיות.

עכשיו המאפיין המותאם אישית --my-color רשום כצבע. ככה הדפדפן יודע אילו סוגי ערכים מותרים ואיך הוא יכול להקליד את המאפיין הזה ולהתייחס אליו.

המבנה של נכס רשום

כך נראה רישום של נכס:

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

הוא תומך באפשרויות הבאות:

name: string

השם של המאפיין המותאם אישית.

syntax: string

איך לנתח את המאפיין המותאם אישית. רשימה מלאה של ערכים אפשריים זמינה במפרט ערכים ויחידות של CSS. ברירת המחדל היא *.

inherits: boolean

אם הוא מקבל בירושה את הערך של ההורה שלו. ברירת המחדל היא true.

initialValue: string

הערך הראשוני של המאפיין המותאם אישית.

בודק לעומק את syntax. יש כמה אפשרויות תקינות, החל ממספרים וצבעים ועד לסוגי <custom-ident>. אפשר גם לשנות את התחביר הזה באמצעות הערכים הבאים:

• הוספת + מציינת שהיא מקבלת רשימה של ערכים של התחביר הזה, שמופרדים ברווחים. לדוגמה, <length>+ תהיה רשימה של אורכים מופרדים ברווחים
• הוספת # מציינת שהיא מקבלת רשימה מופרדת בפסיקים של ערכים של התחביר הזה. לדוגמה, <color># תהיה רשימה מופרדת בפסיקים של צבעים
• הוספת | בין תחבירים או מזהים מציינת שכל אחת מהאפשרויות שצוינו תקינה. לדוגמה, <color># | <url> | magic יאפשר רשימה מופרדת בפסיקים של צבעים, כתובת URL או המילה magic.

Gotchas

יש שני דברים שצריך לשים לב אליהם כשמשתמשים ב-Houdini Props and Vals. הראשונה היא שאחרי שמגדירים נכס רשום קיים, אי אפשר לעדכן אותו. אם תנסו לרשום מחדש נכס, תופיע הודעת שגיאה שמציינת שהוא כבר הוגדר.

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

הנפשה של מאפיינים מותאמים אישית

מאפיין מותאם אישית רשום מספק בונוס מהנה מעבר לבדיקת סוג: היכולת להוסיף לו אנימציה! דוגמה לאנימציה בסיסית:

<script>
CSS.registerProperty({
  name: '--stop-color',
  syntax: '<color>',
  inherits: false,
  initialValue: 'blue',
});
</script>

<style>
button {
  --stop-color: red;
  transition: --stop-color 1s;
}

button:hover {
  --stop-color: green;
}
</style>

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

button {
  --stop-color: red;
  background: linear-gradient(var(--stop-color), black);
  transition: --stop-color 1s;
}

button:hover {
  --stop-color: green;
}

כך המאפיין המותאם אישית שהוא חלק מ-linear-gradient יונפש, וכתוצאה מכך גם המעבר הלינארי בין הצבעים יונפש. אתם יכולים לעיין ב-Codepen שבהמשך כדי לראות את הקוד המלא בפעולה ולשחק איתו בעצמכם.

סיכום

Houdini בדרך לדפדפנים, ואיתו דרכים חדשות לגמרי לעבוד עם CSS ולהרחיב אותו. עם Paint API שכבר נשלח ועכשיו עם Custom Props and Vals, ארגז הכלים היצירתי שלנו מתרחב, ומאפשר לנו להגדיר מאפייני CSS מוקלדים ולהשתמש בהם כדי ליצור עיצובים חדשים ומרגשים ולהוסיף להם אנימציה. יש עוד דברים בדרך, גם בתור הבעיות של Houdini, שבו אתם יכולים לתת משוב ולראות מה השלב הבא של Houdini. ‫Houdini נוצר כדי לפתח תכונות שמסבירות את "הקסם" של העיצוב והפריסה באינטרנט, אז צאו לדרך והשתמשו בתכונות הקסומות האלה.