נכסים מותאמים אישית חכמים יותר עם ה-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, להשתמש ב-polyfilling או ליצור 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 ו-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.

דברים שחשוב לדעת

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

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

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

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

<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, וכך תיצור אנימציה לפס ההדרגתי הליניארי. אתם יכולים להיכנס ל-Glitch שבהמשך כדי לראות את הקוד המלא בפעולה ולשחק איתו בעצמכם.

סיכום

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

תמונה של Maik Jonietz ב-Unsplash