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

Una Kravets

תאריך פרסום: 12 ביולי 2024

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

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

@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 הולכת וגוברת.

מקורות מידע נוספים