Kueri penampung
menawarkan pendekatan yang sangat dinamis dan fleksibel untuk desain
responsif. Kueri container menggunakan aturan @@container. Cara kerjanya mirip dengan kueri media dengan @media, tetapi @container membuat kueri penampung induk untuk informasi gaya, bukan viewport dan agen pengguna.
Dengan merespons ukuran penampung, kueri penampung memungkinkan komponen beradaptasi dengan lokasinya dalam antarmuka. Misalnya, komponen kartu dapat menyesuaikan ukuran dan gaya sesuai dengan penampungnya, baik itu sidebar, bagian hero, atau petak dalam isi utama halaman.
Seperti yang ditunjukkan dalam ilustrasi berikut, Anda dapat menggabungkan kueri media untuk tata letak makro, kueri penampung untuk tata letak mikro, dengan kueri media berbasis preferensi pengguna untuk membuat sistem desain responsif yang efektif. Baca selengkapnya tentang kueri penampung dan desain responsif baru.
Artikel ini adalah bagian dari seri yang membahas cara perusahaan e-commerce meningkatkan kualitas situs mereka menggunakan fitur CSS dan UI baru. Kali ini, kita akan mempelajari cara beberapa perusahaan menggunakan dan mendapatkan manfaat dari kueri penampung.
redBus
redBus mempertahankan dan menayangkan kode yang berbeda untuk versi seluler dan desktopnya. Setelah menerapkan kueri penampung di halaman Aktivitas dan kargo, mereka dapat menyatukan kode ini ke dalam satu codebase untuk situs tersebut. Hal ini membuat mereka responsif dan menghemat waktu pengembangan. Contoh berikut menunjukkan hal ini menggunakan halaman kargo:
Kode
Dalam contoh berikut, .bpdpCardWrapper adalah penampung induk,
yang diberi nama bpdpSection.
Jika penampung bpdpSection memiliki lebar minimum 744 piksel, font-size
dan line-height untuk komponen yang dipilih oleh .bpdpCardContainer dan
.subTxt, .bpdpAddress akan diperbarui.
//Code for Container Queries
.bpdpCardWrapper {
container-type: inline-size;
container-name: bpdpSection;
}
@container bpdpSection (min-width: 744px){
.bpdpCardContainer{
font-size: 1rem;
line-height: 1.5rem;
}
.subTxt, .bpdpAddress{
font-size: 0.875rem;
line-height: 1.25rem;
}
}
Dampak
| Sebelum (beberapa code base) | Setelah (satu codebase) | |
|---|---|---|
| Infrastruktur | Infrastruktur terpisah (biaya tinggi). | Infrastruktur yang sama (biaya lebih rendah). |
| Desain | UI terpisah, tetapi konsistensi buruk. | Sulit dipecahkan, tetapi mungkin. |
| Performa | Mudah ditangani karena sistemnya terpisah, tetapi menggandakan upaya peningkatan performa. | Hal ini khusus untuk halaman dan fitur, tetapi skor PageSpeedInsights redBus di atas 80. |
| Pengembangan | Tim developer terpisah. | Pengurangan waktu sebesar 30% - 40%. |
Tokopedia
Halaman Detail Produk (PDP) Tokopedia berisi beberapa tab untuk informasi toko dan produk. Sebelumnya, tata letak halaman ini dibagi menjadi tiga kolom dan terkadang nama produk di sebelah kiri terpotong untuk ukuran layar yang lebih kecil (lihat video "Sebelum" berikut).
Untuk mengatasi masalah tata letak ini, mereka dengan mudah dan cepat mengadopsi kueri penampung. Setelah penerapan ini, mereka dapat memiliki tata letak yang fleksibel di mana nama produk selalu terlihat sepenuhnya (lihat video "Setelah" berikut).
Sebelum
Setelah
Kode
Kode berikut mengkueri ukuran penampung induk bernama infowrapper.
Jika lebar maksimum infowrapper adalah 360 piksel, width, margin,, dan padding komponen turunan akan disesuaikan.
Menetapkan container-type ke inline-size akan mengkueri ukuran arah inline
induk. Dalam bahasa Latin seperti bahasa Inggris, ini akan menjadi lebar penampung induk, karena teks mengalir sebaris dari kiri ke kanan.
export const styCredibilityContainer = css`
container-name: infowrapper;
container-type: inline-size;
`;
export const styBtnShopFollow = css`
margin-left: auto;
width: 98px;
@container infowrapper (max-width: 360px) {
width: 100%;
margin-top: 2px;
margin-bottom: 8px;
padding-left: 60px;
}
`;
export const styBottomRow = css`
margin-top: 4px;
padding-left: 60px;
display: flex;
align-items: center;
@container infowrapper (max-width: 360px) {
padding-left: 0px;
}
> div {
text-align: left;
margin-top: 0 !important;
}
`;
Hal-hal yang perlu dipertimbangkan saat menggunakan kueri penampung
Tokopedia menemukan kasus penggunaannya dengan mencari elipsis teks di situs mereka. Hal ini menunjukkan bahwa penampung mungkin terlalu kecil, sehingga menyebabkan konten terpotong bagi pengguna.
Kasus penggunaan lain yang baik untuk kueri penampung di situs e-commerce adalah untuk mencari komponen yang digunakan kembali. Misalnya, tombol Tambahkan ke keranjang mungkin ditampilkan secara berbeda berdasarkan penampung induk (misalnya, hanya ikon jika berada di kartu produk dan ikon dengan teks jika merupakan CTA utama di halaman). Tombol dapat menjadi kandidat yang baik untuk kueri penampung.
Anda dapat memilih untuk melakukan peningkatan inkremental pada situs Anda. Misalnya, Anda dapat memulai dengan kasus penggunaan yang lebih kecil seperti contoh elips dari Tokopedia, dan menerapkan kueri penampung di sana. Kemudian, temukan lebih banyak kasus secara progresif dan tingkatkan CSS.
Referensi:
- Kueri penampung tersedia di browser stabil
- Kueri penampung - Mendesain di Browser
- Demo kueri penampung
- Demo: kartu kueri penampung
- Video: Yang baru di UI Web - I/O 2023
- Ingin melaporkan bug atau meminta fitur baru? Kami ingin mendengar pendapat Anda.
Baca artikel lain dalam seri ini yang membahas manfaat penggunaan fitur CSS dan UI baru seperti Animasi yang digerakkan scroll, popover, kueri penampung, dan pemilih has() bagi perusahaan e-commerce.