studi kasus :has()

Swetha Gopalakrishnan

Saurabh Rajpal

CSS terkenal tidak memiliki cara untuk memilih langsung elemen induk berdasarkan turunannya. Hal ini telah menjadi permintaan teratas oleh developer selama bertahun-tahun. Pemilih :has(), yang kini didukung oleh semua browser utama, akan mengatasi hal ini. Sebelum :has(), Anda sering merangkai pemilih panjang atau menambahkan class untuk hook penataan gaya. Sekarang Anda dapat menata gaya berdasarkan hubungan elemen dengan turunannya. Baca selengkapnya tentang pemilih :has() di Digabungkan CSS 2023 dan 5 cuplikan CSS yang harus diketahui oleh setiap developer frontend.

Meskipun terlihat kecil, pemilih ini dapat memungkinkan sejumlah besar kasus penggunaan. Artikel ini menunjukkan beberapa kasus penggunaan yang dibuka oleh perusahaan e-commerce dengan pemilih :has().

:has() adalah bagian dari Versi Dasar Baru Tersedia.

Baca rangkaian lengkap yang disertakan dalam artikel ini, yang membahas cara perusahaan e-commerce meningkatkan kualitas situs mereka menggunakan fitur CSS dan UI yang baru.

Pasar Kebijakan

Dengan pemilih :has(), kami dapat menghapus validasi berbasis JavaScript pada pilihan pengguna dan menggantinya dengan solusi CSS yang berfungsi mulus bagi kami, dengan pengalaman yang sama seperti sebelumnya.—Aman Soni, Tech Lead, Policybazaar

Tim Investasi Policybazaar dengan cerdas menerapkan pemilih :has() untuk memberikan indikasi visual yang jelas bagi pengguna yang sedang membandingkan rencana. Gambar berikut menampilkan dua jenis rencana dalam UI perbandingan (kuning dan biru). Setiap paket hanya dapat dibandingkan dengan jenisnya sendiri. Dengan menggunakan :has(), saat pengguna memilih satu jenis paket, jenis rencana lainnya tidak dapat dipilih.

Code

:has() memberi Anda akses untuk menata gaya elemen induk dan turunannya. Kode berikut memeriksa apakah penampung induk memiliki kumpulan class .disabled-group. Jika demikian, kartu akan berwarna abu-abu, dan tombol "Tambahkan" dicegah agar tidak merespons klik dengan menyetel pointer-events ke 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);
}

Tim kesehatan di Policybazaar menerapkan kasus penggunaan yang sedikit berbeda. Mereka memiliki kuis inline untuk pengguna dan menggunakan :has() untuk memeriksa status kotak centang pertanyaan guna melihat apakah pertanyaan telah dijawab. Jika ya, animasi akan diterapkan untuk beralih ke pertanyaan berikutnya.

Code

Pada contoh perbandingan paket, :has() digunakan untuk memeriksa keberadaan class. Anda juga dapat memeriksa status elemen input seperti kotak centang menggunakan :has(input:checked). Dalam visual yang menampilkan kuis, setiap pertanyaan di banner ungu adalah kotak centang. Policybazaar memeriksa apakah pertanyaan telah dijawab menggunakan :has(input:checked) dan, jika ya, picu animasi menggunakan animation: quesSlideOut 0.3s 0.3s linear forwards untuk bergeser ke pertanyaan berikutnya. Lihat cara kerjanya dalam kode berikut.

.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 menggunakan :has() untuk membuat gambar overlay jika thumbnail produk berisi video. Jika thumbnail produk berisi class .playIcon, overlay CSS akan ditambahkan. Di sini, pemilih :has() digunakan bersama dengan pemilih bertingkat & dalam class .thumbnailWrapper keseluruhan yang berlaku untuk semua thumbnail. Cara ini akan membuat CSS lebih modular dan mudah dibaca.

Code

Kode berikut menggunakan pemilih dan kombinator CSS (& dan >) serta disusun bertingkat dengan :has() untuk menata gaya thumbnail. Untuk browser yang tidak mendukung, aturan class CSS tambahan reguler digunakan sebagai penggantian. Aturan @supports selector(:has(*)) juga digunakan untuk memeriksa dukungan browser. Oleh karena itu, pengalaman pengguna secara keseluruhan tetap sama di seluruh versi browser.

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;
    }
  }
`;

Hal-hal yang perlu dipertimbangkan saat menggunakan :has()

Gabungkan :has() dengan pemilih lain untuk membuat kondisi yang lebih kompleks. Lihat beberapa contoh di has() pemilih keluarga.

Referensi:

• Digabungkan oleh CSS 2023
• :has(): pemilih keluarga
• Demo :has()
• Apakah Anda ingin melaporkan bug atau meminta fitur baru? Kami ingin mendengar pendapat Anda.

Pelajari artikel lain dalam rangkaian ini yang membahas bagaimana perusahaan e-commerce mendapatkan manfaat dari penggunaan fitur CSS dan UI baru seperti animasi berbasis Scroll, transisi tampilan, popover, dan kueri container.

• Mengapa Kemampuan UI Web penting untuk situs e-commerce Anda?
• Studi kasus animasi berbasis scroll
• Lihat studi kasus Transisi
• Studi kasus popover
• Studi kasus kueri container