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

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

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

תמיכה בדפדפנים

• 105
• 105
• 121
• 15.4

מקור

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

Policybazaar

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

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

health.policybazaar.com/

קוד

בדוגמה להשוואה בין תוכניות, השתמשנו ב-: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 מודולריים וקלים יותר לקריאה.

לפני ואחרי השימוש ב-:has().

קוד

הקוד הבא משתמש בסלקטורים ובקומבינטורים של 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 וממשק משתמש, כמו אנימציות שמבוססות על גלילה, מעברים בין תצוגות, חלונות קופצים ושאילתות של קונטיינרים.

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