מאפיינים מותאמים אישית

נניח שאתם יוצרים סגנונות ראשוניים לאתר שלכם, ואתם מגלים שאתם חוזרים על חלק מהערכים ב-CSS. הצבע הראשי שלכם הוא dodgerblue, ואתם מוסיפים אותו לגבולות של כפתורים, לטקסט של קישורים ולרקעים של כותרות. אתם גם משתמשים בכלי עיצוב כדי לבחור כמה וריאציות של הכחול הזה לחלקים אחרים באתר. לאחר מכן תקבלו מדריך סגנון, והצבע הראשי יהיה oklch(70% 0.15 270).

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

יצירת נכסים

הדרך הכי פשוטה ליצור נכס היא להגדיר ערך לנכס חדש עם שם שאתם מגדירים.

.card {
  --base-size: 1em;
}

כל שמות המאפיינים צריכים להתחיל בשני מקפים. כך לא תנסו להשתמש בשם של מאפיין CSS קיים בשביל ערך מותאם אישית. במפרט CSS לעולם לא יתווסף מאפיין שמתחיל בשני מקפים.

אחר כך אפשר לגשת למאפיין הזה באמצעות הפונקציה var(). בדוגמה הזו, גודל הגופן מוגדר בתוך .card-title כפול מהערך של --base-size.

.card .card-title {
  font-size: calc(2 * var(--base-size));
}

שימוש במאפיין מותאם אישית

כפי שראיתם, אפשר להשתמש בערך של מאפיין מותאם אישית עם הפונקציה var(). אפשר להשתמש בפונקציה var() בערכים, אבל לא בשאילתות מדיה. הן שימושיות במיוחד כארגומנטים לפונקציות CSS אחרות.

חלופות

מה קורה אם מנסים להשתמש במאפיין מותאם אישית שלא הוגדר לו ערך? הפונקציה var() מקבלת ערך שני שישמש כערך ברירת מחדל. ערך ברירת המחדל יכול להיות אפילו מאפיין מותאם אישית אחר עם var() מוטמע.

#my-element {
  background: var(
    --alert-variant-background,
    var(--alert-primary-background)
  );
}

ערכים לא תקינים

אם ערך של מאפיין מותאם אישית לא תקין, למשל הערך 1em במאפיין background-color, לא ייעשה שימוש בהצהרות תקינות אחרות באותו רכיב לגבי אותו מאפיין. הסיבה לכך היא שהדפדפן לא יכול לדעת אם ערך מסוים לא תקין עד שהוא מבטל הצהרות אחרות במהלך חישוב הערך. במקום זאת, הערך שבו נעשה שימוש יהיה ערך שעובר בירושה או ערך ראשוני.

.content {
  background-color: blue;
}

.content.invalid {
  --length: 2rem;
  background-color: var(--length);
}

בדוגמה הקודמת, לרכיב .invalid לא יהיה רקע כחול. במקום זאת, מכיוון ש-background-color לא מקבל בירושה, הערך יהיה transparent, שהוא הערך הראשוני שלו.

ביטול תבנית מעקב והעברה בירושה

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

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

שליטה רבה יותר עם @property

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

ההצהרה @property הזו שקולה לנכס --base-size שיצרנו קודם.

@property --base-size {
  syntax: "*";
  inherits: true;
  initial-value: 18px;
}

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

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

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

עדכון מאפיינים מותאמים אישית באמצעות JavaScript

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

const element = document.getElementById("my-button");
getComputedStyle(element).setPropertyValue("--color", orange);

בדוגמה הזו, תג הסגנון מתעדכן ברכיב #my-button, ובדיקה שלו בכלי הפיתוח מראה:

<button id="my-button" style="--color: orange">Click me</button>

בדוגמה שלמעלה אפשר לראות איך מגדירים מאפיינים בהתאמה אישית על ידי גישה לנתונים שמאוחסנים במאפייני HTML בהתאמה אישית. לכל לחצן יש מאפיין data-color עם ערך של צבע ספציפי. המאפיין המותאם אישית --background שמוגדר ברכיב body מאופס לערך data-color בכל כפתור שלוחצים עליו.

אפשר גם להשתמש ב-getComputedStyle(element).getPropertyValue("--variable") כדי לקבל את הערך של מאפיין ברכיב ספציפי. האפשרות הזו שימושית אם הלוגיקה שלכם צריכה להגיב לערך מדורג.