מקרים לדוגמה של :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 Wrapped 2023
• ‎:has(): הבורר של הקבוצה המשפחתית
• הדגמות :has()
• רוצה לדווח על באג או לבקש תכונה חדשה? נשמח לשמוע ממך!

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

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