@property: הדור הבא של משתני CSS עם תמיכה בדפדפן אוניברסלי

Una Kravets

מוכנים לשיפור של שירות ה-CSS? הכלל @property, שהוא חלק ממטריית ממשקי ה-API של CSS Houdini, נתמך עכשיו באופן מלא בכל הדפדפנים המתקדמים. התכונה המהפכנית הזו פותחת בפניכם רמות חדשות של שליטה וגמישות עבור נכסים מותאמים אישית של CSS (שנקראים גם משתני CSS), והופכים את גיליונות הסגנון שלכם לחכמים ודינמיים יותר.

היתרונות של @property

• משמעות סמנטית: אפשר להשתמש ב-@property כדי להגדיר סוג (תחביר) לנכסים המותאמים אישית. התכונה הזו מנחה את הדפדפן לגבי סוג הנתונים שנכללים בנכס המותאם אישית (לדוגמה, צבעים, אורכים או מספרים), וכך מונעים תוצאות בלתי צפויות ותמיכה באפשרויות חדשות כמו אנימציות הדרגתיות.
• ערכים חלופיים: אין יותר סגנונות נעלמים! השתמשו ב-@property כדי להגדיר ערך ראשוני עבור מאפיין מותאם אישית. אם יוקצה ערך לא חוקי בשלב מאוחר יותר, הדפדפן ישתמש בחלופות שהגדרת בצורה חלקה.
• טיפול משופר בשגיאות: אבטחת סוגים משופרת והיכולת להגדיר חלופות פותחות הזדמנויות חדשות לבדיקה ולאימות ישירות בשירות ה-CSS.

יצירת מאפיינים מתקדמים בהתאמה אישית

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

הדוגמה הבאה מראה איך מופעל נכס מותאם אישית שמוגדר כברירת מחדל (מבוסס-מחרוזת).

:root {
 --myColor: hotpink;
}

כדי ליהנות מהיתרונות של 'נכסים מותאמים אישית מתקדמים' האלה, כולל סמנטיקה מעבר למחרוזת, צריך לרשום את נכס ה-CSS המותאם אישית ב-@property.

בדוגמה הזו, אותו נכס מותאם אישית מאותחל עם @property.

@property --myColor {
    syntax: '<color>';
    inherits: false;
    initial-value: hotpink;
  }

המאפיין המותאם אישית שאותחל עם @property מספק הרבה יותר פרטים מאשר שם וערך בלבד. הוא כולל את סוג התחביר ומגדיר את הירושה כ-true או כ-false.

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

הדגמה: רקע הדרגתי של מנצנצים

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

אפשר לעשות זאת על ידי הגדרת הערכים של הנכס המותאם אישית כצבעים:

@property --card-bg {
  syntax: "<color>";
  inherits: false;
  initial-value: lavender;
}

@property --shine-1 {
  syntax: "<color>";
  inherits: false;
  initial-value: wheat;
}

@property --shine-2 {
  syntax: "<color>";
  inherits: false;
  initial-value: lightpink;
}

לאחר מכן, ניגשים אליהם כדי ליצור את הרקע ההדרגתי הראשוני:

.card {
background: radial-gradient(
      300px circle at 55% 60% in oklab,
      var(--shine-2), transparent 100% 100%),
      radial-gradient(farthest-side circle at 75% 30% in oklab,
      var(--shine-1) 0%, var(--card-bg) 100%);
}

לאחר מכן, מעדכנים את הערכים בתמונות מפתח:

@keyframes animate-color-1 {
  to {
    --shine-1: orange;
  }
}

@keyframes animate-color-2 {
  to {
    --shine-2: hotpink;
  }
}

ניתן להוסיף אנימציה לכל אחת מהן:

animation: animate-color-1 8s infinite linear alternate, animate-color-2 1s infinite linear alternate;

סיכום

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

קריאה נוספת

• מסמכי אינטרנט של MDN
• @property: הענקת כוחות-על למשתני CSS