Kueri penampung
menawarkan pendekatan yang
sangat dinamis dan fleksibel terhadap
desain. Kueri penampung menggunakan @container
pada aturan. Cara ini berfungsi dengan
ke kueri media dengan @media
, tetapi sebaliknya, @container
mengkueri induk
untuk informasi gaya, bukan area pandang dan agen pengguna.
Kueri penampung adalah bagian dari Baseline Newly Available.
Dengan merespons ukuran penampung, kueri penampung memungkinkan komponen beradaptasi ke lokasinya dalam antarmuka. Misalnya, komponen kartu dapat menyesuaikan ukuran dan gaya sesuai dengan wadah di mana ia ditempatkan, baik itu {i>sidebar<i}, {i>hero<i} bagian, atau kisi-kisi di dalam {i> body<i} utama laman.
Seperti yang ditampilkan dalam ilustrasi berikut, Anda dapat menggabungkan kueri media untuk makro tata letak, kueri kontainer untuk tata letak mikro, dengan preferensi media untuk membuat sistem desain responsif yang kuat. {i>Read<i} lebih lanjut tentang kueri penampung dan desain responsif baru.
![Gambar yang menunjukkan cara berbagai jenis gaya visual bekerja sama.](https://developer.chrome.google.cn/static/blog/css-ui-ecommerce-cq/image/new-responsive.png?authuser=2&hl=id)
Artikel ini merupakan bagian dari rangkaian yang membahas bagaimana perusahaan e-commerce meningkatkan situs web mereka menggunakan fitur CSS dan UI yang baru. Kali ini, kita membahas bagaimana beberapa perusahaan menggunakan dan mendapatkan manfaat dari kueri container.
redBus
redBus mengelola dan menyajikan kode yang berbeda untuk versi seluler dan desktopnya. Setelah menerapkan kueri container pada Rekomendasi aktivitas dan halaman cargo, mereka dapat menyatukan kode ini ke dalam satu codebase untuk situs-situs tersebut. Hal ini membuat mereka responsif dan menghemat waktu waktu pengembangannya. Contoh berikut menunjukkan hal ini menggunakan halaman kargo:
Kode
Dalam contoh berikut, .bpdpCardWrapper
adalah penampung induk,
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
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 (code base tunggal) | |
---|---|---|
Infrastruktur | Infrastruktur terpisah (biaya tinggi). | Infrastruktur yang sama (lebih sedikit biaya). |
Desain | UI terpisah tetapi konsistensi buruk. | Menantang untuk dipecahkan, tetapi mungkin dilakukan. |
Performa | Mudah ditangani karena sistem ini terpisah tetapi sama seperti upaya meningkatkan performa. | Ini adalah halaman dan fitur khusus, tetapi skor PageSpeedInsights redBus di atas 80. |
Pengembangan | Tim developer yang terpisah. | pengurangan waktu sebesar 30% - 40%. |
Tokopedia
{i>Product Detail Pages<i} (PDP) Tokopedia berisi beberapa tab untuk toko dan informasi produk. Sebelumnya, tata letak halaman ini dibagi menjadi tiga kolom dan terkadang nama produk di sebelah kiri terpotong untuk ukuran layar (lihat video "Sebelum" berikut).
Untuk mengatasi masalah tata letak ini, mereka menerapkan kueri penampung dengan mudah dan cepat. Setelah implementasi ini, mereka dapat memiliki tata letak yang fleksibel nama produk selalu terlihat sepenuhnya (lihat video "Sesudah" berikut).
Sebelum
Setelah
Kode
Kode berikut membuat kueri ukuran penampung induk yang bernama infowrapper
.
Jika lebar maksimum infowrapper
adalah 360 piksel, elemen turunan
width
, margin,
, dan padding
disesuaikan.
Menetapkan container-type
ke inline-size
akan membuat kueri ukuran arah inline
dari induk. Dalam bahasa latin seperti bahasa Inggris, ini akan menjadi lebar
penampung induk, karena teks mengalir 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 penggunaan mereka dengan mencari elipsis teks di situsnya. Hal ini menunjukkan penampung yang mungkin terlalu kecil, sehingga menyebabkan konten terpotong dinonaktifkan bagi pengguna.
Kasus penggunaan lain yang baik untuk kueri penampung untuk situs e-commerce adalah untuk melihat untuk komponen yang digunakan kembali. Misalnya, tombol Tambahkan ke keranjang mungkin ditampilkan secara berbeda berdasarkan penampung induk (misalnya, hanya ikon jika berada di kartu dan ikon produk dengan teks jika merupakan CTA utama di halaman). Tujuan dapat menjadi kandidat yang baik untuk kueri container.
Anda dapat memilih untuk melakukan perbaikan tambahan pada situs. Sebagai contoh, Anda dapat dimulai dengan kasus penggunaan yang lebih kecil seperti contoh elips dari Tokopedia, dan menerapkan kueri container di sana. Kemudian, secara progresif menemukan lebih banyak kasus dan meningkatkan CSS.
Resource:
- Kueri penampung berada di browser stabil
- Kueri container-Mendesain di Browser
- Demo kueri container
- Demo: kartu kueri container
- Video: Yang baru di UI Web - I/O 2023
- 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, popover, kueri container, dan pemilih has()
.