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

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

:has() הוא חלק מ-Baseline New available.

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

Policybazaar

בעזרת הסלקטור :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 השתמשה ב-: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() בבורר המשפחתי.

מקורות מידע:

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

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

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