Kueri container menawarkan pendekatan yang sangat dinamis dan fleksibel untuk desain responsif. Kueri penampung menggunakan at-rule @container. Cara kerjanya mirip dengan kueri media dengan @media, tetapi @container akan mengkueri penampung induk untuk informasi gaya visual, bukan area pandang dan agen pengguna.
Kueri penampung adalah bagian dari Baru Saja Tersedia Dasar-Dasar.
Dengan merespons ukuran penampung, kueri penampung memungkinkan komponen beradaptasi dengan lokasinya di antarmuka. Misalnya, komponen kartu dapat menyesuaikan ukuran dan gayanya sesuai dengan penampungnya, baik itu sidebar, bagian utama, atau petak dalam isi utama halaman.
Seperti 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 andal. Baca lebih lanjut tentang kueri penampung dan desain responsif baru.
Artikel ini adalah bagian dari rangkaian yang membahas cara perusahaan e-commerce meningkatkan situs mereka menggunakan fitur CSS dan UI yang baru. Kali ini, kita akan mempelajari cara beberapa perusahaan menggunakan dan mendapatkan manfaat dari kueri container.
redBus
redBus mempertahankan dan menampilkan kode yang berbeda untuk versi seluler dan desktop. Setelah menerapkan kueri container di halaman Rekomendasi aktivitas dan kargo, mereka dapat menyatukan kode ini ke dalam satu codebase untuk situs tersebut. Hal ini membuatnya responsif dan menghemat waktu pengembangan. Contoh berikut menunjukkan hal ini dengan menggunakan halaman kargo:
Code
Dalam contoh berikut, .bpdpCardWrapper adalah penampung induk, yang diberi nama sebagai 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 code base) | |
|---|---|---|
| Infrastruktur | Infrastruktur terpisah (biaya tinggi). | Infrastruktur yang sama (biaya lebih rendah). |
| Desain | UI terpisah tetapi konsistensi yang buruk. | Menantang untuk dipecahkan, tetapi bisa dilakukan. |
| Performa | Mudah ditangani karena sistemnya terpisah, tetapi menduplikasi upaya peningkatan performa. | Ini adalah halaman dan fitur khusus, tetapi skor PageSpeedInsights redBus di atas 80. |
| Pengembangan | Tim developer terpisah. | Pengurangan waktu 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 menggunakan kueri penampung dengan mudah dan cepat. Setelah penerapan ini, mereka dapat memiliki tata letak fleksibel dengan nama produk selalu terlihat sepenuhnya (lihat video "Setelah" berikut).
Sebelum
Setelah
Code
Kode berikut mengkueri ukuran penampung induk yang bernama infowrapper.
Jika lebar maksimum infowrapper adalah 360 piksel, width, margin,, dan padding
komponen turunan akan disesuaikan.
Menyetel container-type ke inline-size akan membuat kueri ukuran arah inline
induk. Dalam bahasa latin seperti bahasa Inggris, ini akan menjadi lebar
penampung induk, karena teks mengalir secara inline 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 penampung yang mungkin terlalu kecil, sehingga menyebabkan konten terpotong bagi pengguna.
Kasus penggunaan lain yang tepat untuk kueri penampung untuk situs e-commerce adalah memeriksa komponen yang digunakan kembali. Misalnya, tombol Tambahkan ke keranjang mungkin ditampilkan secara berbeda berdasarkan penampung induk (misalnya, hanya ikon jika ada di kartu produk dan ikon dengan teks jika merupakan CTA utama pada halaman). Tombol tersebut dapat menjadi kandidat yang baik untuk kueri penampung.
Anda dapat memilih untuk melakukan peningkatan tambahan pada situs. Misalnya, Anda dapat memulai dengan kasus penggunaan yang lebih kecil seperti contoh elips dari Tokopedia, lalu mengimplementasikan kueri container di sana. Kemudian, temukan lebih banyak kasus secara bertahap dan tingkatkan CSS.
Referensi:
- Kueri container ditempatkan di browser yang stabil
- Mendesain kueri container di Browser
- Demo kueri container
- Demo: kartu kueri container
- Video: Yang baru di UI Web - I/O 2023
- 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, popover, kueri penampung, dan pemilih has().