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

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

:has() הוא חלק מ-Baseline Newly Available (בסיס חדש זמין).

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

בזאר המדיניות

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

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

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

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