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

API של מאפיינים וערכים של CSS ברמה 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.

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

יש שני דברים שחשוב לדעת לגבי נכסי 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