M

MLOG

עברית

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

כלל @when ב-CSS: שליטה בהחלת סגנונות מותנים

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

מהו כלל @when ב-CSS?

כלל @when הוא at-rule מותנה ב-CSS המאפשר להגדיר סגנונות שיוחלו רק אם תנאים מסוימים מתקיימים. חשבו על זה כעל הצהרת if עבור ה-CSS שלכם. בניגוד לשאילתות מדיה (media queries), שמתמקדות בעיקר במאפייני התצוגה (גודל מסך, כיוון וכו'), @when מספק דרך כללית וניתנת להרחבה לטיפול בעיצוב מותנה. הוא מרחיב את ה-at-rules המותנים הקיימים כמו @supports ו-@media.

יתרונות מרכזיים של שימוש ב-@when

תחביר כלל @when

התחביר הבסיסי של כלל @when הוא כדלקמן: 
@when <condition> {
  /* כללי CSS להחלה כאשר התנאי מתקיים */
}

ה-<condition> יכול להיות כל ביטוי בוליאני חוקי המוערך ל-true או false. ביטוי זה כולל לעתים קרובות:

דוגמאות מעשיות של @when בפעולה

בואו נבחן כמה דוגמאות מעשיות כדי להמחיש את העוצמה והרבגוניות של כלל @when.

1. עיצוב רספונסיבי עם @when ושאילתות מדיה

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

@when (min-width: 768px) and (max-width: 1023px) {
  body {
    font-size: 18px;
    line-height: 1.6;
  }
  .container {
    width: 720px;
    margin: 0 auto;
  }
}

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

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

2. זיהוי תכונות עם @when ו-@supports

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

@when supports(display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 20px;
  }
}

@when not supports(display: grid) {
  .container {
    /* סגנונות גיבוי לדפדפנים שאינם תומכים ב-grid */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .item {
    width: calc(50% - 10px); /* התאמת רוחב לדפדפנים ישנים */
  }
}

כאן, אנו משתמשים ב-@supports כדי לבדוק אם הדפדפן תומך ב-CSS Grid Layout. אם כן, אנו מחילים סגנונות מבוססי grid על ה-.container. אם לא, אנו מספקים סגנונות גיבוי באמצעות flexbox כדי להבטיח פריסה דומה בדפדפנים ישנים.

הערת נגישות גלובלית: זיהוי תכונות חשוב לנגישות. דפדפנים ישנים עשויים לחסור תמיכה בתכונות ARIA חדשות יותר או באלמנטים סמנטיים של HTML5. ספקו גיבויים מתאימים כדי להבטיח שהתוכן יישאר נגיש.

3. שילוב שאילתות מדיה ושאילתות תכונה

העוצמה האמיתית של @when נובעת מהיכולת שלו לשלב שאילתות מדיה ושאילתות תכונה כדי ליצור כללי עיצוב מותנים מורכבים ומדויקים יותר.

@when (min-width: 768px) and supports(backdrop-filter: blur(10px)) {
  .modal {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
  }
}

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

4. עיצוב מבוסס על מאפיינים מותאמים אישית (משתני CSS)

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

ראשית, הגדירו מאפיין מותאם אישית:

:root {
  --theme-color: #007bff; /* צבע ערכת נושא ברירת מחדל */
  --is-dark-mode: false;
}

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

@when var(--is-dark-mode) = true {
  body {
    background-color: #333;
    color: #fff;
  }
  a {
    color: #ccc;
  }
}

לבסוף, השתמשו ב-JavaScript כדי להחליף את הערך של המאפיין המותאם אישית --is-dark-mode:

document.getElementById('darkModeToggle').addEventListener('click', function() {
  document.documentElement.style.setProperty('--is-dark-mode', this.checked);
});

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

@when ( --is-dark-mode > 0 ) { ... }

עם זאת, ודאו שלמאפיין המותאם אישית יש ערך מספרי כדי שזה יפעל כראוי.

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

5. עיצוב מבוסס על תכונות נתונים (Data Attributes)

אתם יכולים גם להשתמש ב-@when עם תכונות נתונים (data attributes) כדי לעצב אלמנטים על סמך ערכי הנתונים שלהם. זה יכול להיות שימושי ליצירת ממשקים דינמיים שבהם אלמנטים משנים את המראה שלהם בהתבסס על אינטראקציה של המשתמש או עדכוני נתונים.

לדוגמה, נניח שיש לכם רשימת משימות, ולכל משימה יש תכונת data-status המציינת את הסטטוס שלה (למשל, "todo", "in-progress", "completed"). אתם יכולים להשתמש ב-@when כדי לעצב כל משימה באופן שונה בהתבסס על הסטטוס שלה.

[data-status="todo"] {
  /* סגנונות ברירת מחדל למשימות לביצוע */
  color: #333;
}

@when attribute(data-status string equals "in-progress") {
  [data-status="in-progress"] {
    color: orange;
    font-style: italic;
  }
}

@when attribute(data-status string equals "completed") {
  [data-status="completed"] {
    color: green;
    text-decoration: line-through;
  }
}

שימו לב: התמיכה בתנאי הבדיקה attribute() עשויה להיות מוגבלת או לא מיושמת במלואה בכל הדפדפנים כרגע. בדקו תמיד ביסודיות.

תאימות דפדפנים ו-Polyfills

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

תמיד התייעצו עם משאבים כמו Can I use... כדי לבדוק את מצב תמיכת הדפדפנים הנוכחי של @when ותכונות קשורות.

שיטות עבודה מומלצות לשימוש ב-@when

סיכום

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

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