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