תנאים מותנים ב-CSS באמצעות הפונקציה החדשה if()‎

Una Kravets

תאריך פרסום: 1 ביולי 2025

החל מגרסה 137 של Chrome, אפשר לנסות את הפונקציה if() של CSS inline conditionals. ‫if() מאפשר ממשק מפתח נקי יותר לסגנונות דינמיים כמו שאילתות סגנון ושאילתות מדיה, עם כמה הבדלים חשובים שמוסברים בפוסט הזה.

הפונקציה if() ב-CSS פועלת באמצעות סדרה של צמדים של תנאי-ערך, שמובנים באופן הבא:

property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3);

אפשר לספק הצהרת else, שמשמשת אם אף אחד מהתנאים האחרים לא מתקיים:

property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3; else: value-4);

בשלב הזה, if() פועל עם שלושה סוגים שונים של שאילתות:

• ‫style(): שאילתות סגנון
• ‫media(): שאילתות מדיה
• ‫supports(): תומך בשאילתות

הנה כמה דוגמאות להמחשה:

הדגמה: שאילתות מדיה מוטבעות

שימוש ב-if() הוא דרך מצוינת לכלול שאילתות מדיה מוטבעות בסגנונות שלכם. לדוגמה, אפשר לבדוק את העדפת העיצוב של משתמש (בהיר או כהה), או לבצע שאילתות מדיה מוטבעות לגבי רוחב אזור התצוגה. בדוגמה הבאה מוצגת שאילתת המדיה למכשירי הצבעה. גודל ברירת המחדל של הלחצן יהיה 30px במכשיר עם מצביע מדויק, כמו עכבר, אבל במכשירים עם מסך מגע, כמו אלה עם מצביע גס, גודל הלחצן יהיה 44px, שהוא הגודל המינימלי המומלץ למרווח נגיעה מתאים לגישה קלה יותר.

button {
  aspect-ratio: 1;
  width: if(media(any-pointer: fine): 30px; else: 44px);
}

הקוד שלמעלה נותן את אותה תוצאה כמו שאילתת המדיה הבאה:

button {
  aspect-ratio: 1;
  width: 44px;
}

@media (any-pointer: fine) {
  button {
    width: 30px;
  }
}

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

הדגמה: שאילתות תמיכה בתוך הטקסט

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

body {
  background-color: if(
    supports(color: oklch(0.7 0.185 232)): oklch(0.7 0.185 232);
    else: #00adf3;
  );
  
  &::after {
    content: if(
    supports(color: oklch(0.7 0.185 232)): "Your browser supports OKLCH";
    else: "Your browser does not support OKLCH";
    );
  }
}

אם הדפדפן תומך במרחב הצבעים oklch, המשתמש יראה את הצבע הבהיר יותר, וגם יקבל את ההודעה: 'הדפדפן שלך תומך ב-OKLCH' בתוכן פסאודו ::after.

כדי לקבל מידע נוסף ולראות את ההבדל בין rgb לבין מרחבי צבעים מתקדמים יותר, אפשר לעיין בכלי לבחירת צבעים ובמקורות מידע בכתובת oklch.com.

הדגמה: המחשה של מצב ממשק המשתמש

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

<div class="card" data-status="complete">
  ...
</div>

.card {
  --status: attr(data-status type(<custom-ident>));
  border-color: if(
                style(--status: pending): royalblue;
                style(--status: complete): seagreen;
                else: gray);
  background-color: if(
                style(--status: pending): #eff7fa;
                style(--status: complete): #f6fff6;
                else: #f7f7f7);
}

כשמשתמשים ב-style() בתוך פונקציית if(), אפשר להגדיר סגנון ישירות לרכיב שמטרגטים, בלי צורך ברכיב הורה כמו במקרה של שאילתות סגנון CSS.

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

המאמרים הבאים

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

מידע נוסף על התכונות האלה זמין במאמרים הבאים:

• סרטון הדרכה באורך 3 דקות על הדגמה מס' 3
• מאמר של Lea Verou