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.
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.
: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.
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.](https://developer.chrome.google.cn/static/blog/css-ui-ecommerce-has/image/has-before-after.png?authuser=2&hl=id)
: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:
- Digabungkan CSS 2023
- :has(): pemilih keluarga
- Demo :has()
- Ingin melaporkan bug atau meminta fitur baru? Kami ingin mendengar pendapat Anda!
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.