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

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

סם ריצ'רד

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

מה זה Houdini?

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

תכונות CSS ו-Value API ברמה 1

ה-CSS Properties and values API Level 1 (Houdini Props ו-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 Props ו-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, וכך תוצג אנימציה של ההדרגתיות הלינארית. צפו בתקלה שבהמשך כדי לראות את הקוד המלא בפעולה ולשחק בו בעצמכם.

סיכום

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

צולם על ידי מאייק ג'וניץ ב-UnFlood