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

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

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

Policybazaar

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

צוות ההשקעות של Policybazaar השתמש בטכניקת :has() selector כדי לספק למשתמשים השוואה ברורה בין תוכניות שונות. בתמונה הבאה מוצגים שני סוגים של תוכניות בממשק ההשוואה (צהוב וכחול). אפשר להשוות כל תוכנית רק עם תוכנית מאותו סוג. כשמשתמשים ב-: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);
}

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

קוד

בדוגמה להשוואה בין תוכניות, נעשה שימוש ב-:has() כדי לבדוק אם יש מחלקה. אפשר גם לבדוק את המצב של רכיב קלט כמו תיבת סימון באמצעות :has(input:checked). בפריט הוויזואלי שבו מוצג החידון, כל שאלה בבאנר הסגול היא תיבת סימון. ‫Policybazaar בודקת אם התשובה לשאלה ניתנה באמצעות :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 (& ו->) ובהטמעה באמצעות :has() כדי להגדיר את הסגנון של התמונה הממוזערת. בדפדפנים שלא תומכים ב-CSS, נעשה שימוש בכלל הרגיל של מחלקת 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() the family selector.

מקורות מידע:

• CSS Wrapped 2023
• ‫‎:has(): the family selector
• הדגמות של ‎ :has()‎
• רוצה לדווח על באג או לבקש תכונה חדשה? נשמח לשמוע מכם.

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

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