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

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

Sam Richard

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

מה זה Houdini?

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

מאפייני CSS ו-Value API ברמה 1

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

Gotchas

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

צולם על ידי מייק ג'וניץ על ביטול הפתיחה