שליטה בחוק ה-@when של CSS: החלת סגנונות מותנית לעיצוב אתרים דינמי

חוק ה-@when של CSS, חלק ממפרט CSS Conditional Rules Module Level 5, מציע דרך עוצמתית להחיל סגנונות באופן מותנה על בסיס תנאים מסוימים. הוא חורג משאילתות מדיה מסורתיות, ומאפשר שליטה פרטנית יותר על העיצוב על בסיס גודלי קונטיינר, מאפיינים מותאמים אישית, ואף מצבם של אלמנטים. הדבר יכול לשפר משמעותית את הרספונסיביות וההסתגלות של עיצובי האתרים שלכם, ולהוביל לחוויית משתמש טובה יותר במכשירים ובהקשרים שונים.

הבנת יסודות חוק ה-@when

בבסיסו, חוק ה-@when מספק מנגנון להפעלת בלוק של סגנונות CSS רק כאשר תנאי ספציפי מתקיים. זה דומה להצהרות if בשפות תכנות. בואו נפרק את התחביר:

@when condition {
  /* חוקי CSS להחלה כאשר התנאי מתקיים */
}

ה-condition יכול להתבסס על גורמים שונים, כולל:

• שאילתות קונטיינר (Container Queries): עיצוב אלמנטים על בסיס גודל האלמנט המכיל אותם ולא על בסיס אזור התצוגה (viewport).
• מצבים מותאמים אישית (Custom States): תגובה לאינטראקציות משתמש או למצבי יישום.
• משתני CSS: החלת סגנונות על בסיס הערך של מאפיינים מותאמים אישית של CSS.
• שאילתות טווח (Range Queries): בדיקה אם ערך נופל בתוך טווח ספציפי.

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

שאילתות קונטיינר עם @when

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

דוגמה בסיסית לשאילתת קונטיינר

ראשית, עליכם להכריז על קונטיינר. ניתן לעשות זאת באמצעות המאפיין container-type:

.container {
  container-type: inline-size;
}

inline-size מאפשר לשאול את הקונטיינר על בסיס הגודל ה-inline שלו (רוחב במצבי כתיבה אופקיים, גובה במצבי כתיבה אנכיים). ניתן גם להשתמש ב-size כדי לשאול את שני הממדים, או ב-normal כדי לא ליצור קונטיינר לשאילתות.

כעת, ניתן להשתמש ב-@container (שלעיתים קרובות משולב עם @when) כדי להחיל סגנונות על בסיס גודל הקונטיינר:

@container (min-width: 300px) {
  .card {
    flex-direction: row;
    align-items: center;
  }
  .card__image {
    width: 100px;
    height: 100px;
  }
}

@container (max-width: 299px) {
  .card {
    flex-direction: column;
    align-items: flex-start;
  }
  .card__image {
    width: 100%;
    height: auto;
  }
}

בדוגמה זו, הפריסה של .card משתנה בהתבסס על רוחב הקונטיינר. כאשר הקונטיינר הוא ברוחב 300px לפחות, הכרטיסייה מציגה את התמונה והטקסט זה לצד זה. כאשר הוא צר יותר, הם נערמים אנכית.

כך נוכל להשתמש ב-@when כדי להשיג את אותה התוצאה, פוטנציאלית בשילוב עם @container בהתאם לתמיכת הדפדפן והעדפות הקידוד (מכיוון ש-@when מציע יותר גמישות בתרחישים מסוימים מעבר לגודל הקונטיינר בלבד):

@container card-container (min-width: 300px) {
  @when container(card-container) {
    .card {
      flex-direction: row;
      align-items: center;
    }
    .card__image {
      width: 100px;
      height: 100px;
    }
  }
}

@container card-container (max-width: 299px) {
  @when container(card-container) {
    .card {
      flex-direction: column;
      align-items: flex-start;
    }
    .card__image {
      width: 100%;
      height: auto;
    }
  }
}

במקרה זה, `card-container` הוא שם קונטיינר שהוקצה עם `@container`, ו-`container(card-container)` ב-`@when` בודק אם הקשר הקונטיינר שצוין פעיל. הערה: התמיכה בפונקציה `container()` ובתחביר המדויק עשויה להשתנות בין דפדפנים וגרסאות. יש לעיין בטבלאות תאימות הדפדפנים לפני היישום.

דוגמאות בינלאומיות מעשיות

• רשימות מוצרים במסחר אלקטרוני: הציגו רשימות מוצרים באופן שונה בהתבסס על השטח הפנוי ברשת עמוד הקטגוריה. קונטיינר קטן יותר עשוי להציג רק את תמונת המוצר והמחיר, בעוד שקונטיינר גדול יותר יכול לכלול תיאור קצר ודירוג. זה שימושי באזורים שונים עם מהירויות אינטרנט וסוגי מכשירים משתנים, ומאפשר חוויות מותאמות הן למחשבים שולחניים מתקדמים והן לחיבורי מובייל ברוחב פס נמוך במדינות מתפתחות.
• תקצירי כתבות חדשות: התאימו את אורך תקצירי הכתבות המוצגים בדף הבית של אתר חדשות על בסיס רוחב הקונטיינר. בסרגל צד צר, הציגו רק כותרת ומספר מילים; באזור התוכן הראשי, ספקו תקציר מפורט יותר. יש לקחת בחשבון הבדלי שפות, כאשר שפות מסוימות (למשל, גרמנית) נוטות למילים וביטויים ארוכים יותר, המשפיעים על המקום הנדרש לתקצירים.
• ווידג'טים בלוח מחוונים (דשבורד): שנה את פריסת הווידג'טים בלוח המחוונים על בסיס גודל הקונטיינר שלהם. ווידג'ט קטן עשוי להציג תרשים פשוט, בעוד שווידג'ט גדול יותר יכול לכלול נתונים סטטיסטיים מפורטים ובקרים. התאימו את חוויית לוח המחוונים למכשיר ולגודל המסך הספציפי של המשתמש, תוך התחשבות בהעדפות תרבותיות להצגת נתונים. לדוגמה, תרבויות מסוימות עשויות להעדיף תרשימי עמודות על פני תרשימי עוגה.

שימוש ב-@when עם מצבים מותאמים אישית

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

דוגמה רעיונית (שימוש במשתני CSS להדמיית מצבים)

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

/* CSS */
.my-element {
  --is-active: 0;
  background-color: #eee;
}

@when var(--is-active) = 1 {
  .my-element {
    background-color: #aaf;
  }
}

/* JavaScript */
const element = document.querySelector('.my-element');
element.addEventListener('click', () => {
  element.style.setProperty('--is-active', element.style.getPropertyValue('--is-active') === '0' ? '1' : '0');
});

בדוגמה זו, אנו משתמשים במשתנה CSS --is-active כדי לעקוב אחר מצב האלמנט. קוד ה-JavaScript מחליף את ערך המשתנה הזה כאשר לוחצים על האלמנט. חוק ה-@when מחיל אז צבע רקע שונה כאשר --is-active שווה ל-1. אמנם זהו פתרון עוקף, אך הוא מדגים את הרעיון של עיצוב מותנה על בסיס מצב.

מקרי שימוש עתידיים פוטנציאליים עם מצבים מותאמים אישית אמיתיים

כאשר מצבים מותאמים אישית אמיתיים ייושמו, התחביר עשוי להיראות כך (הערה: זהו ניחוש המבוסס על הצעות):

.my-element {
  /* סגנונות ראשוניים */
}

@when :state(my-custom-state) {
  .my-element {
    /* סגנונות כאשר המצב המותאם אישית פעיל */
  }
}

לאחר מכן תשתמשו ב-JavaScript כדי להגדיר ולבטל את המצב המותאם אישית:

element.states.add('my-custom-state'); // הפעלת המצב
element.states.remove('my-custom-state'); // כיבוי המצב

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

שיקולי בינאום ולוקליזציה

• שפות מימין לשמאל (RTL): ניתן להשתמש במצבים מותאמים אישית כדי להתאים את הפריסה והעיצוב של רכיבים לשפות RTL כמו ערבית ועברית. לדוגמה, שיקוף הפריסה של תפריט ניווט כאשר מצב RTL ספציפי פעיל.
• נגישות: השתמשו במצבים מותאמים אישית כדי לספק תכונות נגישות משופרות, כגון הדגשת אלמנטים ממוקדים או מתן תיאורי טקסט חלופיים כאשר מופעל מצב אינטראקציה של משתמש. ודאו ששינויי מצב אלה מועברים ביעילות לטכנולוגיות מסייעות.
• העדפות עיצוב תרבותיות: התאימו את המראה החזותי של רכיבים על בסיס העדפות עיצוב תרבותיות. לדוגמה, שימוש בסכמות צבעים או סטים של אייקונים שונים על בסיס האזור או השפה של המשתמש.

עבודה עם משתני CSS ושאילתות טווח

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

דוגמה: החלפת ערכת נושא (Theme)

:root {
  --theme-color: #fff;
  --text-color: #000;
}

body {
  background-color: var(--theme-color);
  color: var(--text-color);
}

@when var(--theme-color) = #000 {
  body {
    --text-color: #fff;
  }
}

בדוגמה זו, המשתנה --theme-color שולט בצבע הרקע של ה-body. כאשר הוא מוגדר ל-#000, חוק ה-@when משנה את --text-color ל-#fff, ויוצר ערכת נושא כהה. משתמשים יכולים אז לשנות את הערך של --theme-color באמצעות JavaScript או על ידי הגדרת משתנה CSS שונה בגיליון סגנונות משתמש.

שאילתות טווח

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

@when (400px <= width <= 800px) {
  .element {
    /* סגנונות המוחלים כאשר הרוחב הוא בין 400px ל-800px */
  }
}

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

נגישות גלובלית והעדפות משתמש

• ערכות נושא עם ניגודיות גבוהה: השתמשו במשתני CSS ובחוק ה-@when כדי ליישם ערכות נושא עם ניגודיות גבוהה המיועדות למשתמשים עם לקויות ראייה. אפשרו למשתמשים להתאים אישית את פלטת הצבעים ואת גודלי הגופנים כדי לענות על צרכיהם הספציפיים.
• הפחתת תנועה: כבדו את העדפת המשתמש להפחתת תנועה על ידי שימוש במשתני CSS לנטרול אנימציות ומעברים כאשר המשתמש הפעיל את הגדרת "הפחתת תנועה" במערכת ההפעלה שלו. ניתן לשלב את שאילתת המדיה prefers-reduced-motion עם @when לשליטה מדויקת יותר.
• התאמות גודל גופן: אפשרו למשתמשים להתאים את גודל הגופן של האתר באמצעות משתני CSS. השתמשו בחוק ה-@when כדי להתאים את הפריסה והריווח של אלמנטים כדי להכיל גדלי גופנים שונים, ולהבטיח קריאות ושימושיות לכל המשתמשים.

שיטות עבודה מומלצות ושיקולים

• תאימות דפדפנים: חוק ה-@when עדיין חדש יחסית, והתמיכה בדפדפנים אינה אוניברסלית עדיין. בדקו תמיד טבלאות תאימות דפדפנים לפני השימוש בו בסביבת ייצור. שקלו להשתמש ב-polyfills או בפתרונות חלופיים לדפדפנים ישנים יותר. נכון לסוף 2024, תמיכת הדפדפנים נותרה מוגבלת, והסתמכות רבה על @container ושימוש מושכל במשתני CSS עם חלופות JavaScript היא לעיתים קרובות גישה מעשית יותר.
• ספציפיות (Specificity): היו מודעים לספציפיות של CSS בעת שימוש בחוק ה-@when. ודאו שהסגנונות המותנים שלכם ספציפיים מספיק כדי לעקוף סגנונות מתנגשים אחרים.
• תחזוקתיות (Maintainability): השתמשו במשתני CSS ובהערות כדי להפוך את הקוד שלכם לקריא וקל לתחזוקה. הימנעו מיצירת חוקים מותנים מורכבים מדי שקשה להבין ולנפות באגים.
• ביצועים: בעוד שחוק ה-@when יכול לשפר ביצועים על ידי הפחתת כמות ה-CSS שצריך לנתח, חשוב להשתמש בו בחוכמה. שימוש יתר בחוקים מותנים עלול להשפיע לרעה על הביצועים, במיוחד במכשירים ישנים.
• שיפור הדרגתי (Progressive Enhancement): השתמשו בשיפור הדרגתי כדי להבטיח שהאתר שלכם עובד היטב גם אם הדפדפן אינו תומך בחוק ה-@when. ספקו חוויה בסיסית ופונקציונלית לכל המשתמשים ולאחר מכן שפרו אותה בהדרגה עבור דפדפנים התומכים בתכונה.

העתיד של עיצוב מותנה

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

התקדמויות נוספות ב-CSS Houdini והסטנדרטיזציה של מצבים מותאמים אישית ישפרו עוד יותר את היכולות של @when, ויאפשרו שליטה פרטנית עוד יותר על העיצוב ושילוב חלק יותר עם JavaScript.

סיכום

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

ככל שהאינטרנט ממשיך להתפתח, אימוץ תכונות CSS חדשות כמו @when הוא חיוני כדי להישאר בחזית ולהעניק חוויות אינטרנט מתקדמות לקהל גלובלי.