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

Una Kravets

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

החל מגרסה 137 של Chrome, אפשר לנסות תנאים ב-CSS בשורה עם הפונקציה if(). 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, המשתמש יראה את הצבע העז יותר, וגם יקבל את ההודעה: "Your browser supports 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