על התכונה supports@ ב CSS, כיצד להשתמש בה נכון?

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

אך ישנו פיצ׳ר הקיים ב CSS שנים רבות המאפשר לנו לבדוק אם הדפדפן תומך בתכונה מסויימת לפני שאנו מוסיפים תכונונת CSS כלשהן, ממש בדומה לשימוש ב @media לטובת עיצוב ריספונסיבי – בו אם רוחב הדפדפן קטן יותר מרוחב ספציפי תכונות ה CSS המצויינות באותו media query ייכנסו לפעולה.

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

@supports (display: grid) {

   /* code that will only run if CSS Grid is supported by the browser.  */
   /* for example:  */

  .container {
    display: grid;
  }
}

כנראה ולא תשתמשו רבות בתכונה @supports מכיוון ול CSS ישנה עתודה (fallback) טבעית כך שבמידה והדפדפן אינו מזהה קומבינציה כלשהי של property : value, הוא יתעלם מתכונה זו וישתמש בתכונה אותה הוא מזהה המוגדרת למעלה בשרשרת.

שימוש או ירושה של תכונה הנמצאית מעלה בשרשרת נקרא Cascading.

אך למרות הנאמר לתכונה @supports קיימים לא מעט שימושים. בואו נראה כמה מהם:

/* Here we gonna write the fallback as you'll see in a minute */

@supports (display: grid) {
    .container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 2rem;
    }
}

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

אז במקרים אלו (אם לא נציין אחרת) ניתן פשוט לאפשר לדפדפן להשתמש בברירת המחדל כך שאותם אלמנטים בקונטיינר יקבלו את התכונה display : block ויופיעו אחד מתחת לשני.

אך בהרבה מצבים זה אינו מספק – נאמר גלריה כלשהי של תמונות. במצבים אלו כנראה ויהיה נכון להשתמש בעתודה שעובדת על Flex כברירת מחדל, ובמידה והדפדפן תומך ב CSS Grid להשתמש באותו Grid – זה נראה משהו בסגנון הבא:

.container {
    display: flex;
    flex-wrap: wrap;
}

.container > div {
    flex: 200px;
    margin: 1rem;
}

@supports (display: grid) {
    .container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 2rem;
    }

    .container > div {
        margin: 0;
    }
}

שימוש באופרטור not בתכונה supports@

ישנה גם האפשרות להשתמש בלוגיקה "not" עבור התכונה @supports וזה נראה כך:

/* Considered a BAD PRACTICE, at least if you're supporting IE 11 and iOS 8 and older */
@supports not (display: grid) {
    /* Isolated code for non-support of grid */
}
@supports (display: grid) {
    /* Isolated code for support of grid */
}

שימו לב לאופרטור not בו השתמשנו. במקרה זה האופרטור יבדוק ויישם CSS כלשהו רק במידה ואין תמיכה ב CSS Grid.

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

מספר שימושים לתכונה supports@

הנה מספר שימושים נוספים לתכונה @supports, לדוגמה תמיכה בתכונה mix-blend-mode:

.thing {
  opacity: 0.5;
}
    
@supports (mix-blend-mode: multiply) {
  .thing {
    mix-blend-mode: multiply;
    opacity: 0.75;
  }
}

דוגמה נוספת היא תמיכה בתכונה initial-letters שנועדה עבור Drop Caps:

@supports (initial-letter: 4) or (-webkit-initial-letter: 4) {
  p::first-letter {
     -webkit-initial-letter: 4;
     initial-letter: 4;
  }
}

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

שילוב תנאים עם and / or

ניתן לשלב כמה בדיקות תכונות עם האופרטורים and ו-or. זה שימושי כשתכונה מסוימת תלויה בכמה properties שעובדים יחד:

@supports (display: grid) and (gap: 1rem) {
    .layout {
        display: grid;
        gap: 1rem;
    }
}

@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
    .glass {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
}

האופרטור or שימושי במיוחד כשרוצים לבדוק גרסאות עם vendor prefix של אותה תכונה. דפוס זה עובד היטב עם תכונות חדשות כמו aspect-ratio ב-CSS או CSS Variables.

זיהוי תכונות מתקדם: selector() ו-font-tech()

מאז ההשקה המקורית של @supports, נוספו פונקציות בדיקה חדשות. אלו מאפשרות לבדוק יותר מסתם צמדי property:value.

בדיקת תמיכה בסלקטור עם selector()

הפונקציה selector() בודקת אם הדפדפן תומך בסלקטור CSS מסוים. לפונקציה זו יש 94.8% תמיכה גלובלית:

@supports selector(:has(> img)) {
    .card:has(> img) {
        padding: 0;
    }
}

@supports selector(:nth-child(1 of .active)) {
    .active:nth-child(1 of .active) {
        font-weight: bold;
    }
}

זה שימושי במיוחד עבור סלקטורים חדשים כמו :has() ב-CSS שעדיין לא נתמכים בכל מקום.

בדיקת טכנולוגיית גופנים עם font-tech()

הפונקציות font-tech() ו-font-format() מאפשרות לזהות תמיכה בטכנולוגיות גופנים ספציפיות:

@supports font-tech(color-COLRv1) {
    @font-face {
        font-family: "ColorEmoji";
        src: url("emoji-colr.woff2");
    }
}

@supports font-format(woff2) {
    @font-face {
        font-family: "MyFont";
        src: url("font.woff2") format("woff2");
    }
}

אלו תוספות חדשות יותר עם תמיכה צרה מעט (Chrome 108+, Firefox 106+, Safari 17+), אבל הן שימושיות כשעובדים עם variable fonts או color fonts.

תמיכת דפדפנים בתכונה supports@

התכונה @supports נתמכת בכל הדפדפנים הנפוצים ונמצאת כיום מעל 96% תמיכה גלובלית. כרום, פיירפוקס ואופרה תומכים בה מאז 2013, Edge מגרסה 12, וסאפרי מגרסה 9 משנת 2015. ניתן להשתמש בה בפרודקשן ללא חשש:

שאלות נפוצות

אם יש לכם שאלות או שימושים מעניינים ל-@supports, שתפו אותנו בתגובות.

Further Reading:

• Using Feature Queries in CSS.
• How @supports Works.
• MDN web docs.