studi kasus :has()

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X LinkedIn
Saurabh Rajpal
Saurabh Rajpal
X LinkedIn

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

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

Lihat seri lengkap yang menjadi bagian dari artikel ini, yang membahas cara perusahaan e-commerce meningkatkan kualitas situs mereka menggunakan fitur CSS dan UI baru.

Policybazaar

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

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

Menerapkan :has() untuk menata gaya elemen induk dan turunannya guna membuat fungsi pemilihan yang terikat kategori.

Kode

:has() memberi Anda akses untuk menata gaya elemen induk dan turunannya. Kode berikut memeriksa apakah penampung induk memiliki class .disabled-group yang ditetapkan. Jika ya, kartu akan berwarna abu-abu, dan tombol "Tambahkan" akan dicegah agar tidak bereaksi terhadap klik dengan menetapkan 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 bertransisi ke pertanyaan berikutnya.

health.policybazaar.com/

Kode

Dalam 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 sudah, memicu animasi menggunakan animation: quesSlideOut 0.3s 0.3s linear forwards untuk menggeser 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 bersarang & dalam class .thumbnailWrapper yang mencakup semua thumbnail. Hal ini membuat CSS lebih modular dan mudah dibaca.

Screenshot halaman Tokopedia sebelum dan sesudah penggunaan pemilih has.
Sebelum dan sesudah menggunakan :has().

Kode

Kode berikut menggunakan pemilih dan kombinator CSS (& dan >) serta bersarang 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 keseluruhan sama di semua 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 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:

Jelajahi artikel lain dalam seri ini yang membahas manfaat yang diperoleh perusahaan e-commerce dari penggunaan fitur CSS dan UI baru seperti Animasi berbasis scroll, transisi tampilan, kueri popover dan penampung.