Studi kasus kueri container

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

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.

Dukungan Browser

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

Sumber

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.
web.dev—Yang Baru Responsif.

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

Sebelum mengimplementasikan kueri container, kata "ISKU 10 in 1 Obeng satu.." di kiri atas dipotong untuk ukuran layar yang lebih kecil.

Setelah

Mengimplementasikan kueri container akan menyesuaikan tata letak dengan mempertahankan teks dalam area tampilan.

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:

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().