studi kasus :has()

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

CSS terkenal tidak memiliki cara untuk secara langsung memilih elemen induk berdasarkan untuk turunan-turunannya. Aplikasi ini telah menjadi permintaan utama developer selama bertahun-tahun. Tujuan Pemilih :has(), yang kini didukung oleh semua browser utama, dapat mengatasi masalah ini. Sebelum pembaruan :has(), Anda akan sering membuat rantai pemilih panjang atau menambahkan class untuk menata gaya. Baru saja Anda dapat menata gaya berdasarkan hubungan elemen dengan turunannya. Baca selengkapnya tentang pemilih :has() di Digabungkan dengan CSS 2023 dan 5 cuplikan CSS yang harus diketahui setiap developer frontend.

Meskipun pemilih ini tampaknya kecil, namun dapat memungkinkan sejumlah besar kasus penggunaan. Artikel ini menunjukkan beberapa kasus penggunaan yang dapat dilakukan perusahaan e-commerce dengan Pemilih :has().

:has() adalah bagian dari Baseline Baru Tersedia.

Dukungan Browser

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 121.
  • Safari: 15.4.

Sumber

Lihat serial lengkap artikel ini sebagai bagian dari artikel ini, yang membahas bagaimana perusahaan e-commerce meningkatkan kualitas situsnya menggunakan fitur CSS dan UI baru.

Bazar Kebijakan

Dengan pemilih :has(), kita dapat menghilangkan validasi berbasis JavaScript pilihan pengguna dan menggantinya dengan solusi CSS yang berfungsi lancar 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 menunjukkan 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 yang jenis paket lain tidak dapat dipilih.

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

Kode

:has() memberi Anda akses ke elemen induk gaya dan turunannya. Tujuan berikut ini memeriksa kode apakah penampung induk memiliki class .disabled-group yang ditetapkan. Jika ya, kartu akan berwarna abu-abu, dan bagian "Add" dicegah dari 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 {i>inline<i} untuk pengguna dan menggunakan :has() untuk mencentang status kotak centang pertanyaan untuk melihat apakah pertanyaan dijawab. Jika ya, animasi akan diterapkan untuk beralih ke pertanyaan berikutnya.

health.policybazaar.com/

Kode

Dalam contoh perbandingan rencana, :has() digunakan untuk memeriksa keberadaan . Anda juga dapat memeriksa status elemen input seperti kotak centang menggunakan :has(input:checked). Dalam visual yang menunjukkan kuis, setiap pertanyaan dalam banner ungu adalah kotak centang. Policybazaar memeriksa apakah pertanyaan itu dijawab menggunakan :has(input:checked) dan jika ya, picu animasi menggunakan animation: quesSlideOut 0.3s 0.3s linear forwards untuk menggeser ke yang berikutnya pertanyaan tersebut. 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, berarti CSS overlay ditambahkan. Di sini, pemilih :has() digunakan bersama dengan & pemilih bertingkat dalam class .thumbnailWrapper menyeluruh yang berlaku ke semua {i>thumbnail<i}. Tindakan ini akan menghasilkan CSS yang 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 >) dan susun bertingkat dengan :has() untuk menata gaya thumbnail. Untuk perangkat non-pendukung browser, aturan kelas CSS tambahan reguler digunakan sebagai fallback. Tujuan Aturan @supports selector(:has(*)) juga digunakan untuk memeriksa dukungan browser. Oleh karena itu, pengalaman secara keseluruhan akan 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. Periksa lihat beberapa contoh di has() pemilih keluarga.

Resource:

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