מקרים לדוגמה של :has()

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

:has() הוא חלק מהקטע Baseline Newly Available.

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

Policybazaar

בעזרת הבורר :has() הצלחנו לבטל את האימות שמבוסס על JavaScript של הבחירה של המשתמש, ולהחליף אותו בפתרון CSS שפועל בצורה חלקה עבורנו עם אותה חוויה כמו קודם. – Aman סוני, מנהל טכני, Policybazaar

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

קוד

:has() מאפשרת לעצב רכיבי הורה ורכיבי הצאצאים שלהם. הקוד הבא בודק אם למאגר הורה יש קבוצת סיווג .disabled-group. אם זה קורה, הכרטיס מופיע באפור והלחצן 'הוספה' לא מגיב ללחיצות. לשם כך, מגדירים את pointer-events לערך none.

.plan-group-container:has(.disabled-group) {
  opacity: 0.5;
  filter: grayscale(100%);
}

.plan-group-container:has(.disabled-section) .button {
  pointer-events: none;
  border-color: #B5B5B5;
  color: var(--text-primary-38-color);
  background: var(--input-border-color);
}

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

קוד

בדוגמה להשוואה בין תוכניות, השתמשנו ב-:has() כדי לבדוק את נוכחות הכיתה. אפשר גם לבדוק את המצב של רכיב קלט, כמו תיבת סימון, באמצעות :has(input:checked). ברכיב הוויזואלי שבו מוצג הטריוויה, כל שאלה בבאנר הסגול היא תיבה לבחירה. המערכת של Policybazaar בודקת אם השאלה נע answered באמצעות :has(input:checked). אם כן, היא מפעילה אנימציה באמצעות animation: quesSlideOut 0.3s 0.3s linear forwards כדי להחליק לשאלה הבאה. אפשר לראות איך זה עובד בקוד הבא.

.segment_banner__wrap__questions {
 position: relative;
 animation: quesSlideIn 0.3s linear forwards;
}

.segment_banner__wrap__questions:has(input:checked) {
 animation: quesSlideOut 0.3s 0.3s linear forwards;
}


@keyframes quesSlideIn {
 from {
   transform: translateX(50px);
   opacity: 0;
 }
 to {
   transform: translateX(0px);
   opacity: 1;
 }
}

@keyframes quesSlideOut {
 from {
   transform: translateX(0px);
   opacity: 1;
 }
 to {
   transform: translateX(-50px);
   opacity: 0;
 }
}

Tokopedia

ב-Tokopedia השתמשו ב-:has() כדי ליצור שכבת-על אם התמונה הממוזערת של המוצר מכילה סרטון. אם התמונה הממוזערת של המוצר מכילה מחלקה .playIcon, מתווספת שכבת-על של CSS. כאן, הבורר ‎ :has()‎ משמש יחד עם הבורר להטמעה & בתוך הכיתה הכוללת .thumbnailWrapper שחלה על כל התמונות הממוזערות. כך יוצרים קובצי CSS מודולריים וקלים יותר לקריאה.

קוד

הקוד הבא משתמש בסלקטורים ובקומבינטורים של CSS (& ו->) ובעיצוב בתוך עיצוב (nesting) באמצעות :has() כדי לעצב את התמונה הממוזערת. בדפדפנים שלא תומכים בכך, הכלל הרגיל של הכיתה הנוספת של CSS משמש כחלופה. הכלל @supports selector(:has(*)) משמש גם לבדיקת תמיכה בדפדפן. לכן, החוויה הכוללת זהה בכל גרסאות הדפדפן.

export const thumbnailWrapper = css`
  padding: 0;
  margin-right: 7px;
  border: none;
  outline: none;
  background: transparent;

  > div {
    width: 64px;
    height: 64px;
    overflow: hidden;
    cursor: pointer;
    border-color: ;
    position: relative;
    border: 2px solid ${NN0};
    border-radius: 8px;
    transition: border-color 0.25s;

    &.active {
      border-color: ${GN500};
    }

    @supports selector(:has(*)) {
      &:has(.playIcon) {
        &::after {
          content: '';
          display: block;
          background: rgba(0, 0, 0, 0.2);
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
        }
      }
    }

    & > .playIcon {
      position: absolute;
      top: 25%;
      left: 25%;
      width: 50%;
      height: 50%;
      text-align: center;
      z-index: 1;
    }
  }
`;

דברים שכדאי לזכור כשמשתמשים ב-:has()

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

מקורות:

• סיום שירות CSS לשנת 2023
• ‎:has(): הבורר של הקבוצה המשפחתית
• הדגמות :has()
• רוצה לדווח על באג או לבקש תכונה חדשה? חשוב לנו לשמוע מה דעתך.

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

• למה יכולות ממשק המשתמש באינטרנט חשובות לאתר המסחר האלקטרוני שלכם?
• מקרים לדוגמה של אנימציות מבוססות גלילה
• מקרים לדוגמה בנושא Transitions
• מקרים לדוגמה בנושא חלונות קופצים
• מקרים לדוגמה של שאילתות בקונטיינרים